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.

Installation

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

Pre-requisites

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

Android

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

  • xmlns:tools="http://schemas.android.com/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 mfpclient.properties 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 com.ibm.mobilefirstplatform.clientsdk.android.push
  • 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:

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

  also, add the following under the application tag:

    ```
    <activity 
     	android:name="com.ibm.mobilefirstplatform.clientsdk.android.push.api.MFPPushNotificationHandler" 
     	android:theme="@android:style/Theme.NoDisplay"/>
  
    <!-- MFPPush Intent Service -->
    <service android:exported="true" android:name="com.ibm.mobilefirstplatform.clientsdk.android.push.api.MFPPushIntentService">
  		<intent-filter>
          	<action android:name="com.google.firebase.MESSAGING_EVENT" />
      	</intent-filter>
    </service>
  	
    <service android:name="com.ibm.mobilefirstplatform.clientsdk.android.push.api.MFPPush" android:exported="true">
       	<intent-filter>
      		<action android:name="com.google.firebase.INSTANCE_ID_EVENT" />
      	</intent-filter>
    </service>
    ```

• open /MFPPushApp/android/build.gradle file

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

    classpath 'com.google.gms:google-services:4.0.0'

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

  • add the following lines inside the dependencies{…}

    implementation 'com.google.firebase:firebase-core:16.0.1'
    implementation 'com.google.android.gms:play-services-base:15.0.1'
    implementation 'com.google.firebase:firebase-messaging:17.1.0'

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

    apply plugin: 'com.google.gms.google-services'

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

iOS

• 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 = Platform.select({
    	ios: NativeAppEventEmitter,
    	android: DeviceEventEmitter,
  });
    
  emitter.addListener("my_listener", function(notification) {
  	// Here 'notification' is an instance of MFPSimplePushNotification class
    	console.log(notification.getAlert());
  });
  

Supported platforms

• Android
• iOS

Documentation

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

IBM Push Notifications