react-native-onesignal.md

Integrate One Signal Push Notification in React Native (Android)

In this guide I have covered setup for android platform only. For iOS please check official doc

Step-1: Setup a firebase app

1.1: Create an App in your Firebase console

1.2: Get Server key and Sender ID from the Firebase app

1.2.1: In the left side panel of firebase console, click on the gear icon beside Project Overview

1.2.2: In the Settings page, click on the Cloud Messaging tab to get Server key & Sender ID

Step-2: Setup One Signal Account

2.1: Create an App in your One Signal account

2.1.1: Give it a name and select Google Android when prompted for platform

2.1.2: Next use the Server key & Sender ID from step 1.2.2

2.1.3: Select React Native as your target SDK

2.1.4: Get the App ID

Step-3: Setup React Native App with One Signal Plugin

3.1: Install the plugin

yarn add react-native-onesignal

or

npm install --save react-native-onesignal

3.2: Link library to project

react-native link react-native-onesignal

3.2: Additional steps to configure android platform

3.2.1: Modify android/app/src/main/AndroidManifest.xml

<manifest ...>

    ...
    <!-- Add the following 2 lines  -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> 
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

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

</manifest>

3.2.2: Modify android/app/build.gradle

Add the following code to the very top of the file

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'

3.2.3: Make sure compileSdkVersion and buildToolsVersion is at least API level 26 or higher in android/build.gradle

android {
    compileSdkVersion 27
    buildToolsVersion '27.0.3'
    // ...
}

Step-3: Minimum code to add One Signal in the React Native app

3.1: Modify App.js

...
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);
    OneSignal.configure(); 	// triggers the ids event
  }

  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);
  }
}