How to integrate Push Notification in react native using OneSignal (Android) — [updated]

oneSignal with React native integration

Things Required :

Onesignal Account: https://app.onesignal.com/login

React native Project

Firebase Account: https://console.firebase.google.com/

So let’s get started.

First thing first, visit https://app.onesignal.com/login and log in/signup.

Click on NewApp/web Button to create a new App.

Once you have created an app, go to the settings screen (Below is the screenshot for your reference). We are going to configure google android inside Native app platform section.

On click edit(pencil icon in front of Google Android), it requires 2 things, one is Google Firebase server key and the firebase server id is the second one. Let's generate those keys.

1. Create a Firebase project: go to https://firebase.google.com/ and sign in using google account.
   Next, click on Go to console link on the top right corner.

2. Press “ADD PROJECT” or select an existing one below. Find below Screenshot

3. Enter a project name and press “CONTINUE”.

Make sure to disable firebase for this project, if you want you can enable it later then just press “CREATE PROJECT”. (see above).

4) Getting your Firebase Cloud Messaging token and Sender ID :

4.1 Click the Gear icon in the top left and select “Project settings”.

4.2 Select the “CLOUD MESSAGING” tab.

4.3 Save the two values listed (server key and sender id):

So we have both, the secret key and the sender Id. Now go back to your onesignal account and go to your app setting(got to your app setting in onesignal). Click on edit in front of Google Android and paste both keys accordingly and click Save. find the screenshot below.

Done! You now have a key to send push notifications from your Android app.

So till now, we have done OneSignal setup with firebase, let's continue integrating OneSignal with react native.

Install oneSignal library:
npm install — save react-native-onesignal

Link the library: Do not link if you are using RN version > 60.
react-native link react-native-onesignal

In your AndroidManifest.xml, add android:launchMode=”singleTop” as an attribute to your main activity.

<application ....>
  <activity
    android:name=".MainActivity"
    android:label="OneSignal Example"
    android:launchMode="singleTop"> <!-- Add this attribute to your main activity -->
  </activity>

5. Next At the very top of your Android project’s app/build.gradle, add the following code to the very top of the file. (you can copy the below code)

buildscript {
    repositories {
        maven { url 'https://plugins.gradle.org/m2/' } // Gradle Plugin Portal 
    }
    dependencies {
        classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[0.12.1, 0.99.99]'
    }
}

apply plugin: 'com.onesignal.androidsdk.onesignal-gradle-plugin'

6. Inside of the android { … } section in your app/build.gradle, please ensure that your compileSdkVersion and buildToolsVersion is at least API level 26 or higher.

build tool version

7. In order to initialize the SDK:

constructor(properties) {
  super(properties);
  OneSignal.init("YOUR_ONESIGNAL_APPID");
}

You will get YOUR_ONESIGNAL_APPID inside your app in Onesignal:
Go to settings -> Keys and ID’S section

8. Usage: for your reference, find the code below how to use OneSignal in your App. Make sure you imported the library before use.

import React, { Component } from ‘react’;
import OneSignal from ‘react-native-onesignal’; // Import package from node modules
export default class App extends Component {
constructor(properties) {
super(properties);
OneSignal.init(“YOUR_ONESIGNAL_APPID”);
OneSignal.addEventListener(‘received’, this.onReceived);
OneSignal.addEventListener(‘opened’, this.onOpened);
OneSignal.addEventListener(‘ids’, this.onIds);
}
componentWillUnmount() {
OneSignal.removeEventListener(‘received’, this.onReceived);
OneSignal.removeEventListener(‘opened’, this.onOpened);
OneSignal.removeEventListener(‘ids’, this.onIds);
}
onReceived(notification) {
console.log(“Notification received: “, notification);
}
onOpened(openResult) {
console.log(‘Message: ‘, openResult.notification.payload.body);
console.log(‘Data: ‘, openResult.notification.payload.additionalData);
console.log(‘isActive: ‘, openResult.notification.isAppInFocus);
console.log(‘openResult: ‘, openResult);
}
onIds(device) {
console.log(‘Device info: ‘, device);
}
}

Booom! We have integrated Onesignal with react native android. Let’s run the project and check if we get users in our OneSignal dashboard.

How to check if it’s working or not?

9. Go to the OneSignal dashboard and click on the Audience tab -> View all Users.
If you can see your device inside the below table that means you have configured OneSignal correctly.

users in oneSignal dahsboard

Now let’s check if Notifications works.

10. Go to the Message section of OneSignal and click on the NEW PUSH button.

Then type the title, your Message. You can also upload an image and custom link for that image. Click on “SEND TO TEST DEVICE” and check whether you are receiving the notification or not.

If you follow the above, you will get the notification into your Android Phone/Emulator. Below is a screenshot attached.

Woooppp! We have successfully integrated RN with OneSignal.

Bonus: By default, notifications will be shown with a bell icon in the notification shade. Follow the Customize Notification Icons guide to create your own small notification icon for your app.

URL: https://documentation.onesignal.com/docs/customize-notification-icons

Additionally, For a simple react-native starter, You can clone https://github.com/rajaishwary/rn-codeXui. It has simple component wrappers with theming and some utility components.
If you have build an awesome component. Feel free to add a PR.