React Native Push Notification Android & iOS

Today We are going to discuss How to set up React Native Push Notification with react native for both Android and iOS. There are multiple packages available to implement the same. for example-

1. react-native-firebase
2. react-native-push-notification
3. react-native-fcm

I have tried all three packages mentioned above. But today I am going to discuss react-native-push-notification as after trying all three of them I found this on more convenient to use.

First We will discuss how to setup react-native-push-notification for Android & iOS in your react native project.

Step by Step Guide to Set Up React Native Push Notification-  

1 - First of all, install react native push notification package in your react native project. Use the command given below -

npm install --save react-native-push-notification For iOS you can also use - yarn add react-native-push-notification

2 - If you will go through react native push notification official documentation you will see react-native link react-native-push-notification. But this will not link the package completely and you may face some problem. So it's we should link manually.

React Native Push Notification Android Manual Linking -

1 - Go at android/app/build.gradle and add the following dependencies - 

dependencies { ...... implementation project(':react-native-push-notification') implementation ('com.google.android.gms:play-services-gcm:8.1.0') ...... }

You can use a specific gcm-play-service version and change the version number 8.1.0 for your version. In some cases, you may see an error like gcm-play-service version is 16.1.0 at run time but it is getting 8.1.0 at compile time.

So, in that case, change the version number from 8.1.0 to 16.1.0.

2 -  Now go to your android/app/src/AndroidMenifest.xml file and add the following changes - 

Just below uses-permission add the following lines -

<uses-permission android:name="android.permission.WAKE_LOCK" /> <permission android:name="${applicationId}.permission.C2D_MESSAGE" android:protectionLevel="signature" /> <uses-permission android:name="${applicationId}.permission.C2D_MESSAGE" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

and just before closing application tag add the lines given below-

<meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_name" android:value="YOUR NOTIFICATION CHANNEL NAME"/> <meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_description" android:value="YOUR NOTIFICATION CHANNEL DESCRIPTION"/> <meta-data android:name="com.dieam.reactnativepushnotification.notification_color" android:resource="@android:color/white"/> <receiver android:name="com.google.android.gms.gcm.GcmReceiver" android:exported="true" android:permission="com.google.android.c2dm.permission.SEND" > <intent-filter> <action android:name="com.google.android.c2dm.intent.RECEIVE" /> <category android:name="${applicationId}" /> </intent-filter> </receiver> <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" /> <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver"> <intent-filter> <action android:name="android.intent.action.BOOT_COMPLETED" /> </intent-filter> </receiver> <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService"/> <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerServiceGcm" android:exported="false" > <intent-filter> <action android:name="com.google.android.c2dm.intent.RECEIVE" /> </intent-filter> </service> <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService" android:exported="false" > <intent-filter> <action android:name="com.google.firebase.MESSAGING_EVENT" /> </intent-filter> </service>

NOTE -  Replace ${applicationId} with the application ID that you are using in firebase application. As your application id should be same both in the firebase application that you have created for the push notification and the project you are working in. 

Go to your android/app/build.gradle file and you will find applicationId in defaultconfig. 

3 - Now go to your MainActivity.java file inside android/src/main/java... and do the following steps - 

Add the line below in the imports of your MainActivity.java  -

import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;

Add the following line inside the implementation of MainApplication - 

@Override protected List<ReactPackage> getPackages() { return Arrays.<reactpackage>asList( new MainReactPackage(), new ReactNativePushNotificationPackage(), //Add This Line

4 -  Go to your settings.gradle file and add the following line on the bottom of the file - 

include ':react-native-push-notification' project(':react-native-push-notification').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-push-notification/android')

Now you are done with linking react-native-push-notification package for Android.

React Native Push Notification iOS Manual Linking -

For iOS, we will be using PushNotificationIOS library that is provided by react-native itself. To use this you need to link the PushNotificationIOS library from X-Code to your project. Follow the URL given below to manually link this library with your react native project-

https://facebook.github.io/react-native/docs/linking-libraries-ios#manual-linking

After Successfully linking this library follow the steps given below for further set up of iOS push notification set up -

1 - To enable the support for push notification and register event you need to make some changes in your AppDeligate.

Add the below line on the top of your Appdelegate.m file -  

#import <React/RCTPushNotificationManager.h>

  

2 - After this add the blow lines in your AppDelegate Implementation just above @end - 

// Required to register for notifications - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings { [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; } // Required for the register event. - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken { [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; } // Required for the notification event. You must call the completion //handler after handling the remote notification. - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler { [RCTPushNotificationManager didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler]; } // Required for the registrationError event. - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error { [RCTPushNotificationManager didFailToRegisterForRemoteNotificationsWithError:error]; } // Required for the localNotification event. - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification { [RCTPushNotificationManager didReceiveLocalNotification:notification]; }

Now for iOS we are done setting up react native push notification.