Ninjas Practicing Multidimensionality


    8.0.2020032412 • Public • Published

    IBM MobileFirst - Push React Native SDK plug-in

    To add IBM MobileFirst™ Push capabilities to an existing React Native app, you add the react-native-ibm-mobilefirst & react-native-ibm-mobilefirst-push plug-in to your app. The react-native-ibm-mobilefirst plug-in contains the IBM MobileFirst Platform Foundation SDK and the react-native-ibm-mobilefirst-push contains all the APIs to work with Push Notifications.

    Refer to the documentation links for more information.


    Download the react-native-ibm-mobilefirst-push.tar.gz from this repo and run the following command to install Push plugin

    npm install react-native-ibm-mobilefirst-push --save

    Getting Started


    1. Make sure you have all the pre-requisites for a React Native app covered. See the React Native Getting Started page if you're new to this whole stuff.
    2. Setup of MobileFirst server

    Create React Native Project

    • The first step is to create a React Native project. Let's call our app as the MobileFirstApp. Use the React Native CLI to create a new project.

    react-native init MFPPushApp

    • Next, add the react native plugin to your app

    cd MFPPushApp

    npm install react-native-ibm-mobilefirst-push —-save

    • Link your project so that all native dependencies are added to your React Native project. This step is not required for react-native version 0.60 and above.

    react-native link

    • Install Mobilefirst specific cocopods dependencies to the project.

    cd ios && pod install

    This step is applicable only for iOS platform.

    • react-native-ibm-mobilefirst-push plugin internally depends on react-native-ibm-mobilefirst plugin, so your app will be required to have mfpclient configuration file. Make sure your application is added with mfpclient configuration file updated with Valid MobileFirst Server Host Address.

    • Setup the Push Notifications feature in MobileFirst Server Operations Console for Android and iOS Platforms. Refer this documentation for more details.

    Configure the Application


    • Add the following lines to AndroidManifest.xml ({project-folder}/android/app/src/main/) :

      • xmlns:tools="" --- within the manifest tag
      • tools:replace="android:allowBackup" --- within the application tag
    • Register the application: mfpdev app register (NOTE: Double check the values in file)

    • Register your app on Firebase Console.

      • create a new Project
      • go to Project Settings
      • click on Add Firebase to your Android app
      • give the package name
      • click on Register app and skip the rest of the steps
      • add another app by clicking add App button
      • give the package name just as you have in your app. For eg. com.myreactnativeapp
      • click on Register app
      • download the config file — google-services.json and paste it inside /<YOUR—REACT—NATIVE—APP>/android/app/ directory
    • Configure your app

      • open AndroidManifest.xml and add the following in the tag

        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
        <uses-permission android:name="android.permission.WAKE_LOCK"/>

      in the application tag inside the Main Activity of the app add the following intent-filter:

         	<action android:name="YOUR.PACKAGE_NAME.HERE.IBMPushNotification" />
        	<category android:name="android.intent.category.DEFAULT" />

      also, add the following under the application tag:

        <!-- MFPPush Intent Service -->
        <service android:exported="true" android:name="">
              	<action android:name="" />
        <service android:name="" android:exported="true">
          		<action android:name="" />
    • open /MFPPushApp/android/build.gradle file

      • add the following line to dependencies{ … } inside the buildscript{ … } block

        classpath ''

    • open /MFPPushApp/android/app/build.gradle file

      • add the following lines inside the dependencies{…}

        implementation ''
        implementation ''
        implementation ''
      • finally add the following line at the end of the build.gradle file:

        apply plugin: ''

    • To run the application : react-native run-android


    • Make sure your iOS Application is configured with valid provisioning profile enabled with push capability

    • By default, React Native creates a native iOS project built with application delegate class, therefore you will need to add the following code below to application delegate(AppDelegate.m) class file.

      - (void) application:(UIApplication *) application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
        [[NSNotificationCenter defaultCenter] postNotificationName:@"RNMFPPushDidRegisterForRemoteNotificationsWithDeviceToken" object:deviceToken];
      - (void) application:(UIApplication*)application didFailToRegisterForRemoteNotifications: (NSError*) error {
        [[NSNotificationCenter defaultCenter] postNotificationName:@"RNMFPPushDidFailToRegisterForRemoteNotificationsWithError" object:error];
      - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo {
        [[NSNotificationCenter defaultCenter] postNotificationName:@"RNMFPPushDidReceiveRemoteNotification" object:userInfo];
    • To run the application : react-native run-ios

    Note : In XCode, in the project navigator, drag and drop mfpclient.plist from ios folder. This step is applicable only for iOS platform.

    React Native App

    • We need to add a Notification Event Listener in order to be notified when a Push Notification arrives. For this, add the following code to your JS file.

    • Register a Notification Callback by using the registerNotificationsCallback API of MFPPush class: MFPPush.registerNotificationsCallback("my_listener");

      Finally add the following code to define a Event Listener:

      import {Platform, DeviceEventEmitter, NativeAppEventEmitter} from 'react-native';
      import {MFPPush, MFPSimplePushNotification} from 'react-native-ibm-mobilefirst-push'
      const emitter ={
        	ios: NativeAppEventEmitter,
        	android: DeviceEventEmitter,
      emitter.addListener("my_listener", function(notification) {
          // Here 'notification' is an instance of MFPSimplePushNotification class

    Supported platforms

    • Android
    • iOS


    See the IBM MobileFirst Platform Foundation section of IBM Dev Center:

    IBM Push Notifications


    npm i react-native-ibm-mobilefirst-push

    DownloadsWeekly Downloads






    Unpacked Size

    922 kB

    Total Files


    Last publish


    • ibmmfpf