Happy to write here. In this blog, let us see how to send push notification using , a push notification service. We are going to build a simple react native app, just to receive notifications. Onesignal Firebase setup For using one signal service, we need two things. Google server key Sender Id To create the above two, we have to create a project in . Head over to Firebase console.firebase.google.com Create a project in it. Once it is done, move to the settings page. Click on the gear icon near the Project overview then move to cloud messaging. You will probably see a screen as shown below. We can see the Server key and Sender ID from the setting page. We are now done with the Firebase setup. One signal setup Now, let’s move to the one signal setup. Head over to onesignal.com Create an account in onesignal.com. Once you are done creating an account, you will need to add the app that you are going to create, to one signal. The following steps are to be followed One signal will prompt for Name of the app and the platform that we are going to use. Give a name to your app and select Android on the platform. Next, we will be configuring the platform. We will have to provide the Google server key and Sender Id in the next window. Next, we will have to select the SDK. In our case, we have to select React Native in it. Now we are done with the One Signal set-up. React Native Setup Now let’s see how to set up one signal in our code. Before you start, please ensure that you have already installed React Native and NPM in your system. If not install them to proceed. To create a new project, move to a desired directory/location and open Terminal. Type in the below command react- WhateverProject native init This will create a new react native project. Once it is done, install the one signal npm package npm react- -onesignal install native --save Next, open the project in any editor. Open the Manifest file, which you can find in android/app/src/main/AndroidManifest.xml In the manifest file, we will have to add the following to the activity tag. launchMode= android: "singleTop" Refer to the below screenshot if you have any doubts. Save the file. Next, open the build.gradle file located in android/app/build.gradle In that add the One signal app id and Google sender id in the default config, like shown below manifestPlaceholders = [onesignal_app_id: , : ] "your-one-signal-app-id" onesignal_google_project_number "google-sender-id" That’s it the setup for React native. Now, let’s run the app. Open two terminal tabs and in the first tab, type the following react-native start This will start the server in your machine. In the other terminal tab, type in adb devices This will list the connected android devices/emulators in your machine. It is advised to use physical devices for this case, as in most cases, notification is not received in emulators. Now if you see your device id in the terminal, type in react-native run android Once the app runs in your device, you are done with the setup. Lets push notification Now, to ensure one signal is working fine, we have to go to the one signal dashboard. Go to the tab in onesignal.com. If you see the count 1 in subscribed users, congratulations! you have successfully configured one signal. Audience Now, let’s send some push notification to your device. Head over to the message tab and create a new push notification. Refer below screenshot for sending a push notification. Now you can see notification received in your device. By default, if you tap on the notification, it will take you to the home page of the respective application. We can also give an external link for the notification. Now we are done with the push notification. Bonus A question may arise to you on how to programmatically send push notification. That is with the react-native code. Here is the solution. Create a new .js file and add the following code in your project. { headers = { : , : ,
  }; endpoint = ; params = { : , : headers, : .stringify({ : , : [ { field: , : , : , : id,
        },
      ], : { : }, : { : data}, : , }),
  };
  fetch(endpoint, params).then( .log(res));
} export ( ) function sendNotification data, id let 'Content-Type' 'application/json; charset=utf-8' Authorization "Basic '<<Your one signal rest api key>>'" let 'https://onesignal.com/api/v1/notifications' let method 'POST' headers body JSON app_id '<<Your one signal app id>>' filters // Will send notification only to specific device // Optional 'tag' key 'Id' relation '=' value headings en 'Your Heading' contents en url 'https://something.any' // optional => res console Now we can send notification by just importing this function and calling it like this. sendNotification ( , ) "This notification is from RN code" 1 Now the notification will be sent to user with the particular tag, id===1. This is how we can send push notification in React native through One signal. I encourage you to explore more about this in one signal documentation so that you can learn more about creating different segments in it. Thank you!

Fetch

Google

OneSignal

Read My Stories

Portfolio

Newsletter

Buy Me a Coffee

Software Engineer

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Send Push Notifications via OneSignal by Building a React Native app [A How-To Guide]

Send Push Notifications via OneSignal by Building a React Native app [A How-To Guide]

Too Long; Didn't Read

Companies Mentioned

Sriram

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Send Push Notifications via OneSignal by Building a React Native app [A How-To Guide]

Too Long; Didn't Read

Companies Mentioned

Sriram

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES