Home

Awesome

React-Native plugin for IBM Cloud Push Notifications service

Codacy Badge

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

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 ,

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesbmd-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 PhasesLink Binary With Libraries
  1. Open up android/app/src/main/java/[...]/MainActivity.java
  1. 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')
  1. 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
  1. run pod install and open your <your-app>.xcworkspace in Xcode.
  2. You need to add an empty Swift file in the app to build it successfully. This is for the swift bridging header. image

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 androidapp.

  2. In the root build.gradlebuildscript 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'
  }
  1. Go to androidappbuild.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">
  1. 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"/>
  1. 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">
  1. 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>
  1. 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 for push notifications without passing options
Push.init({
    "appGUID":"xxxxxx-xxxx-41xxxx67-xxxxx-xxxxx",
    "clientSecret":"xxxxx-xxxxx-xxxx-xxxxx-xxxxxxx",
    "region":"us-south"
}).then(function(response) {

    alert("InitSuccess: " + response);

}).catch(function(e) {

    alert("Init Error: " + e);

});
// 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":"us-south",
    "options": optionsJson
}).then(function(response) {

    alert("Init Success: " + response);

}).catch(function(e) {

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

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

Register for notifications

The following options are supported:

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

Learning more

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.