IBM Cloud Push Notifications React-Native plugin

IBM Cloud Mobile Services - Client SDK React Native for Push Notifications service

The IBM Cloud Push Notifications service provides a unified push service to send real-time notifications to mobile and web applications. The SDK enables react-native apps to receive push notifications sent from the service.

Ensure that you go through IBM Cloud Push Notifications service documentation before you start.

Contents

• Version History
• Prerequisites
• Installation
  • Automatic installation
  • Manual installation
• Dependencies
  • iOS
  • Android FCM
• Set up SDKs
  • iOS
  • Android
• Initialize SDK
• Register for notifications
• UnRegister from push
• Push Notification service tags
  • Retrieve tags
  • Subscribe to a tag
  • Retrieve subscriptions
  • Unsubscribing from tag
• Samples and videos

Version History

• 1.3.0 - Added support for CocoaPods and tokyo region
• 1.2.0 - Added Android title

Prerequisites

• Xcode 10+
• Android: minSdkVersion 16+, compileSdkVersion 28+
• React Native >= 0.57.8
• React Native CLI >= 2.0.1

Installation

Mostly automatic installation

Install the bmd-push-react-native using ,

$ react-native install bmd-push-react-native

You can link the package like this,

$ react-native link bmd-push-react-native

Manual installation

If you want to link it manually ,

• iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ bmd-push-react-native and add RNBmdPushReact.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNBmdPushReact.a to your project's Build Phases ➜ Link Binary With Libraries

• Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.bmdpush.react.RNBmdPushReactPackage; to the imports at the top of the file
• Add new RNBmdPushReactPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

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

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

compile project(':bmd-push-react-native')

Dependencies

iOS

CocoaPods

1. Open the ios directory and add use_frameworks! and Swift version in the Podfile.

  use_frameworks!
  ENV['SWIFT_VERSION'] = '5.0'

OR

use_frameworks!

  target 'Your Target Name' do
	  pod 'RNBmdPushReact', :path => '../node_modules/bmd-push-react-native'
  end
  post_install do |installer|
    installer.pods_project.targets.each do |target|
      if ['BMSPush', 'BMSCore', 'BMSAnalyticsAPI'].include? target.name
        target.build_configurations.each do |config|
          config.build_settings['SWIFT_VERSION'] = '5.0'
        end
      end
    end
  end

2. run pod install and open your <your-app>.xcworkspace in Xcode.
3. You need to add an empty Swift file in the app to build it successfully. This is for the swift bridging header.

Android FCM

Create a firebase project and add the following bundle ids for android,

1. Add your bundle Id and com.ibm.mobilefirstplatform.clientsdk.android.push . Download the google-services.json and add inside the android ➜ app.

2. In the root build.gradle ➜ buildscript add the following ,

 repositories {
      google()
      jcenter()
  }
  dependencies {
      classpath 'com.android.tools.build:gradle:3.2.1'
      classpath 'com.google.gms:google-services:4.0.1'
  }

3. Go to android ➜ app ➜ build.gradle and add the following after dependencies {....},

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

Set up SDKs

Set up iOS

Open the iOS app in XCode and do the following ,

1. Under the Capabilities section enable the Push Notifications

2. Enable the Background modes for Remote notifications and Background fetch

3. Go to Build Settings and make the following changes

   a. locate Other Linker Flags and add -lc++ , -ObjC and $(inherited)

Now you can build and run the iOS app from Xcode or using the react-native run-ios command.

Set up Android

Add the following inside the AndroidManifest.xml file .

1. Add xmlns:tools="http://schemas.android.com/tools" in the <manifest ...> tag

For example

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" package="com.pushsample">

2. Add the following permissions,

<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.USE_CREDENTIALS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>

3. Add tools:replace="android:allowBackup" inside the <application ..> tag

For example

<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:allowBackup="false"
android:launchMode="singleTask"
android:theme="@style/AppTheme"
tools:replace="android:allowBackup">

4. Add the following inside the <activity android:name=".MainActivity" ....>,

<intent-filter>
<action android:name="yourapp.bundle.IBMPushNotification" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>

5. Add the following lines,

<activity android:name="com.ibm.mobilefirstplatform.clientsdk.android.push.api.MFPPushNotificationHandler" android:theme="@android:style/Theme.NoDisplay"/>

<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:exported="true" android:name="com.ibm.mobilefirstplatform.clientsdk.android.push.api.MFPPush">
<intent-filter>
<action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
</intent-filter>
</service>

Now you can build and run the android app from android studio or using the react-native run-android command.

Initialize SDK

Import the following dependecnice ,

import {Push} from 'bmd-push-react-native';
import { DeviceEventEmitter } from 'react-native';

To initialize Push use the following code,

• Initialize without additional options

// Initialize for push notifications without passing options
Push.init({
    "appGUID":"xxxxxx-xxxx-41xxxx67-xxxxx-xxxxx",
    "clientSecret":"xxxxx-xxxxx-xxxx-xxxxx-xxxxxxx",
    "region":".ng.bluemix.net"
}).then(function(response) {

    alert("InitSuccess: " + response);

}).catch(function(e) {

    alert("Init Error: " + e);

});

• Initialize with additional options

// Initialize for push notifications by passing options
// Initialize for iOS actionable push notifications, custom deviceId and varibales for Parameterize Push Notifications 

var optionsJson = {
    "categories": { 
        "Category_Name1":[{
            "IdentifierName":"IdentifierName_1",
            "actionName":"actionName_1",
            "IconName":"IconName_1"
            },{
            "IdentifierName":"IdentifierName_2",
            "actionName":"actionName_2",
            "IconName":"IconName_2"
            }
        ]},
        "deviceId":"mydeviceId",
        "variables":{"username":"ananth","accountNumber":"536475869765475869"}
    };

Push.init({
    "appGUID":"xxxxxx-xxxx-41xxxx67-xxxxx-xxxxx",
    "clientSecret":"xxxxx-xxxxx-xxxx-xxxxx-xxxxxxx",
    "region":".ng.bluemix.net",
    "options": optionsJson
}).then(function(response) {

    alert("Init Success: " + response);

}).catch(function(e) {

    alert("Init Error: " + e);
});

**IMPORTANT: These are the following supported regions - ".ng.bluemix.net", ".eu-gb.bluemix.net" , ".au-syd.bluemix.net", ".eu-de.bluemix.net", ".us-east.bluemix.net", and ".jp-tok.bluemix.net"

Register for notifications

The following options are supported:

• Register without UserId

  
  // Register device for push notification without UserId
  var options = {};
  Push.register(options).then(function(response) {
    alert("Success: " + response);
  }).catch(function(e) {
      alert("Register Error: " + e);
  });
  

• Register with UserId

  // Register device for push notification with UserId
  
  var options = {"userId":"ananthreact"};
      Push.register(options).then(function(response) {
      alert("Success: " + response);
  }).catch(function(e) {
      alert("Register Error: " + e);
  });
  

UnRegister from push

push.unregisterDevice().then(function(response) {
    alert("Success unregisterDevice : " + response);
}).catch(function(e) {
    alert("UnRegister error : " + e);
});

Push Notification service tags

Retrieve tags

Push.retrieveAvailableTags().then(function(response) {
    alert("get tags : " + response);
}).catch(function(e) {
    alert("get tags error : " + e);
});

Subscribe to a tag

Push.subscribe(response[0]).then(function(response) {
    alert("subscribe tags : " + response);
}).catch(function(e) {
    alert("subscribe tags error : " + e);
});

Retrieve subscriptions

Push.retrieveSubscriptions().then(function(response) {
    alert("retrieveSubscriptions tags : " + response);
}).catch(function(e){
    alert("error retrieveSubscriptions : " + e);
});

Unsubscribing from tag

var tag = "tag1";
Push.unsubscribe(tag).then(function(response) {
    alert("unsubscribe tag : " + response);
}).catch(function(e) {
    alert("Error : " + e);
});

Samples and videos

• For samples, visit - Github Sample

• For video tutorials visit - IBM Cloud Push Notifications

Learning more

• Visit the IBM Cloud Developers Community.

• Getting started with IBM MobileFirst Platform for iOS

Connect with IBM Cloud

Twitter | YouTube | Blog | Facebook |

======================= Copyright 2020-21 IBM Corp.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.