How to integrate OneSignal in react-native

“
OneSignal is a high volume and reliable push notification service for websites and mobile applications. We support all major native and mobile platforms by providing dedicated SDKs for each platform, a RESTful server API, and an online dashboard for marketers to design and send push notifications.

In this artical I'm going to explain how to integrate OneSignal in react-native, for android platform.

Requirement For Setup

A OneSignal Account.
Firebase project Server Key and Sender ID
Your OneSignal App ID, avaliable in OneSignal app setting.

Setup and Integration

Create firebase project
Create OneSignal app
Integrate OneSignal SDK in react-native

I'm going to provide detail information on each step.

1. Create firebase project

To send push notification on android app throught OneSignal we need to have firebase project Server Key and Sender ID. So first we need to create firebase project.

screenshots of firebase console

Add Poject

In created project go to project setting where you will get Server Key and Sender ID

“
Now we have Server Key and Sender ID now we can create OneSignal app and configure it for android platform.

2. Create OneSignal App

Select Platform (Here we create for android)

put here Server Key and Sender ID and configure platform

Finally you will get your OneSignal App ID

3.Integrate OneSignal SDK in react-native

Add library to project

1yarn add react-native-onesignal
2            OR 
3npm install --save react-native-onesignal

Link library to project

1react-native link react-native-onesignal

“
In your AndroidManifest.xml, add android:launchMode="singleTop" as an attribute to your main activity. You can also set location permissions.

1<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2    package="com.onesignalexample.demoApp"
3    android:versionCode="1"
4    android:versionName="1.0">
5
6    <uses-permission android:name="android.permission.INTERNET" />
7    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
8    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
9    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> 
10    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 
11    <uses-permission android:name="android.permission.CAMERA" />   
12
13    <uses-sdk
14        android:minSdkVersion="16"
15        android:targetSdkVersion="22" />
16
17    <application
18      android:name=".MainApplication"
19      android:allowBackup="true"
20      android:label="@string/app_name"
21      android:icon="@drawable/icon"
22      android:theme="@style/AppTheme"
23      android:launchMode="singleTop">
24      
25      <activity
26        android:name=".MainActivity"
27        android:label="@string/app_name"           android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
28        android:windowSoftInputMode="adjustPan">
29        <intent-filter>
30            <action android:name="android.intent.action.MAIN" />
31            <category android:name="android.intent.category.LAUNCHER" />
32        </intent-filter>
33      </activity>
34      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
35      
36   </application>
37
38</manifest>

Add OneSignal App ID in app/build.gradle for android.

1.....
2
3android {
4    compileSdkVersion 26
5    buildToolsVersion "26.0.2"
6
7    dexOptions {
8        jumboMode true
9    }
10    defaultConfig {
11        applicationId "com.onesignalexample.demoApp"
12        minSdkVersion 21
13        targetSdkVersion 26
14        versionCode 1
15        versionName "1.0"
16        ndk { abiFilters "armeabi-v7a", "x86" }
17        vectorDrawables.useSupportLibrary = true
18        manifestPlaceholders = [
19            onesignal_app_id: "#######-######-###-####-######",
20            onesignal_google_project_number: "#######"
21        ]
22   }
23   
24.....

“
For IOS platform will blog in next post..

How to integrate OneSignal in react-native

Requirement For Setup

Setup and Integration

1. Create firebase project

2. Create OneSignal App

3.Integrate OneSignal SDK in react-native

Related Post

Quick & Easy MobX Tutorial in ReactNative - Beginner Steps

Free React App Deployment with Heroku and CD

Selenium: Beginner's Guide for Automation Testing