IBM MobileFirst - LiveUpdate React Native SDK plug-in

To add IBM MobileFirst™ LiveUpdate feature to an existing React Native app, you add the react-native-ibm-mobilefirst & react-native-ibm-mobilefirst-liveupdate 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-liveupdate contains API to work with LiveUpdate feature.

Refer to the documentation links for more information.

Installation

Download the react-native-ibm-mobilefirst-liveupdate.tar.gz from this repo and run the following command to install LiveUpdate plugin

npm install react-native-ibm-mobilefirst-liveupdate --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 MFLiveUpdateApp

• Next, add the react native plugin to your app

cd MFLiveUpdateApp

npm install react-native-ibm-mobilefirst-liveupdate —-save

Note : LiveUpdate package supports React Native v0.62.x and above.

• Install Mobilefirst specific cocopods dependencies to the project.

cd ios && pod install

This step is applicable only for iOS platform.

• react-native-ibm-mobilefirst-liveupdate 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.

Configure the Application

Android

Make the following changes to AndroidManifest.xml (<PROJECT_ROOT>/android/app/src/main/)

• Add xmlns:tools="http://schemas.android.com/tools" to the manifest tag. E.g.

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

• Add tools:replace="android:allowBackup" to the application tag. E.g.

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

iOS

• Install Mobilefirst specific cocopods dependencies to the project.

cd ios && pod install

This step is applicable only for iOS platform.

Test the Application

Android

• To run the application :

react-native run-android

iOS

• To run the application :

react-native run-ios

Supported platforms

• Android
• iOS

Configuration In MobileFirst Operation Console

1. Add a scope mapping for liveupdate.mobileclient in MobileFirst Operations Console → [your application] → Security tab → Scope-Elements Mapping. Map it to an empty string if you want to use the default protection or to a security check if you're using one.

Learn more about scope mapping

3. You can add schemas and features from the MobileFirst Operations Console → [your application] → Live Update Settings

Once you've setup schemas and features you can start use the client side API.

Sample Usages of the API

var useClientCache = false; //True (default) tells the native iOS/Android code if we want to cache the result of the calls. cache expiratrion
 is set in the MFP admin console.

var featureId = 'featureId';
var propertyId = 'propertyId' ;

MFLiveUpdate.obtainConfiguration(useClientCache)
  .then(result => {
  
 console.log('Is feature enabled for' + featureId + ':' + result.isFeatureEnabled('featureId')); 
console.log ('Property value for the ' + propertyId + 'is :' +result.getProperty('propertyId'));


 }) 
  .catch(err => console.log('There was an error:' + err))

Documentation

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

IBM Live Update service