Skip to content
This repository has been archived by the owner on Oct 17, 2022. It is now read-only.

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

License

Notifications You must be signed in to change notification settings

ibm-bluemix-mobile-services/bms-push-react-native

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

80 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

  • 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
  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 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'
  }
  1. 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">
  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 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":"us-south"
}).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":"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:

  • 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

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.