All rights are reserved by Niteesh Kumar.. Theme images by Storman. Powered by Blogger.


Total Pageviews

Blog Archive


Wednesday, 8 May 2019

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 ('') ...... }

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="" android:exported="true" android:permission="" > <intent-filter> <action android:name="" /> <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="" /> </intent-filter> </service> <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService" android:exported="false" > <intent-filter> <action android:name="" /> </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 file inside android/src/main/java... and do the following steps - 

Add the line below in the imports of your  -

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-

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.

6 on: "React Native Push Notification Android & iOS"
  1. Unknowing of any real plan to speak of, he took refuge in one of Arizona's lake regions and camped out, and even there, narrowly missing apprehension.

    kiss manga

  2. Truly, the expense of repairing a cell phone is typically high. Albeit here and there the issues are minor, the phone masters consistently charge us a major total of cash.Handy reparatur

  3. Many people want to learn to communicate with animals because they are looking for a way to hear from their pet in the animal afterlife. gogoanime

  4. And when we do this right, animals and people can take a big breath of relief, we feel safe together and more connected. 9anime

  5. They had no compassionate guidance to help them, no one they could trust, and no chance to tell their story to someone who could hear them and help them heal and regroup and move forward in their life. gogo anime

  6. Start with your FREE Heart Wisdom eBook: Hidden Secrets to Communicating with Pets! See the link below to The Heart School of Animal Communication on the Learn How to Talk to Animals website to get your copy! 123movie