react-native-ibm-mobilefirst-push

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.

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

Package Sidebar

Install

npm i react-native-ibm-mobilefirst-push

Weekly Downloads

49

Version

8.0.2020032412

License

SEE LICENSE IN LICENSE.TXT

Unpacked Size

922 kB

Total Files

41

Last publish

Collaborators

  • ibmmfpf