Adding the MobileFirst Foundation SDK to React Native Applications

improve this page | report issue

Overview

In this tutorial, you learn how to add the MobileFirst SDK to a new or existing React Native application, which has been created with React Native CLI. You also learn how to configure the MobileFirst Server to recognise the application, and to find information about the MobileFirst configuration files that are changed in the project.

The MobileFirst React Native SDK is provided as a react native npm plug-in, and is registered at NPM.

Available plug-ins are:

  • react-native-ibm-mobilefirst - The core SDK plug-in

Jump to:

React Native SDK components

react-native-ibm-mobilefirst

The react-native-ibm-mobilefirst plug-in is the core MobileFirst plug-in for React Native and is required. If you install any of the other MobileFirst plug-ins, the react-native-ibm-mobilefirst plug-in is automatically installed too, if not already installed.

Prerequisites:

Adding the Mobile Foundation React Native SDK

Follow the instructions below to add the Mobile Foundation React Native SDK to a new or existing React Native project, and register it in the MobileFirst Server.

Before you start, make sure that the MobileFirst Server is running.
If using a locally installed server: From a Command-line window, navigate to the server’s folder and run the command: ./run.sh.

Adding the SDK

New Application

  1. Create a React Native project: react-native init projectName.
    For example:

    react-native init Hello
    
    • Hello is the folder name and name of the application.

    The templated index.js enables you to use additional MobileFirst features as such Multilingual application translation and initialization options (see the user documentation for more information).

  2. Change directory to the root of the React Native project: cd hello

  3. Add the MobileFirst Plugins by using the NPM CLI command: npm install react-native-plugin-name For example:

    npm install react-native-ibm-mobilefirst
    

    The above command adds MobileFirst Core SDK Plugin to the React native project.

  4. Link the plugin libraries by running the command:

    react-native link
    

Existing Application

  1. Navigate to the root of your existing React Native project and add the MobileFirst core React Native plug-in:

    npm install react-native-ibm-mobilefirst
    
  2. Link the plugin libraries by running the command:

    react-native link
    

Registering the application

  1. Open a Command-line window and navigate to the root of the particular platform (iOS or Android) of the project.

  2. Register the application to MobileFirst Server:

    mfpdev app register
    
  • iOS :

    If your platform is iOS then you are asked to provide the application’s BundleID. Important: The BundleID is case sensitive.

    The mfpdev app register CLI command first connects to the MobileFirst Server to register the application, then generates the mfpclient.plist file at the root of the Xcode project, and adds to it the metadata that identifies the MobileFirst Server.

  • Android :

    If your platform is Android then you are asked to provide the application’s package name. Important: The package name is case sensitive.

    The mfpdev app register CLI command first connects to the MobileFirst Server to register the application, followed by generating the mfpclient.properties file in the [project root]/app/src/main/assets/ folder of the Android Studio project and to add to it the metadata that identifies the MobileFirst Server.

If a remote server is used, use the command mfpdev server add to add it.

The mfpdev app register CLI command first connects to the MobileFirst Server to register the application. Each platform is registered as an application in MobileFirst Server.

Tip: You can also register applications from the MobileFirst Operations Console:

  1. Load the MobileFirst Operations Console.
  2. Click the New button next to Applications to register a new application and follow the on-screen instructions.

Updating the MobileFirst React Native SDK

To update the MobileFirst React native SDK with the latest release, remove the react-native-ibm-mobilefirst plug-in: run the npm uninstall react-native-ibm-mobilefirst command and then run the npm install react-native-ibm-mobilefirst command to add it again.

SDK releases can be found in the SDK’s NPM repository.

Generated MobileFirst React Native SDK artifacts

Android Environment

mfpclient.properties

Located in the ./app/src/main/assets/ folder of the Android Studio project, this file defines the client-side properties used for registering your Android app on the MobileFirst Server.

Property Description Example values
wlServerProtocol The communication protocol with the MobileFirst Server. http or https
wlServerHost The host name of the MobileFirst Server. 192.168.1.63
wlServerPort The port of the MobileFirst Server. 9080
wlServerContext The context root path of the application on the MobileFirst Server. /mfp/
languagePreferences Sets the default language for client sdk system messages. en

iOS Enviroment

mfpclient.plist

Located at the root of the project, this file defines the client-side properties used for registering your iOS app on the MobileFirst Server.

Property Description Example values
protocol The communication protocol with the MobileFirst Server. http or https
host The host name of the MobileFirst Server. 192.168.1.63
port The port of the MobileFirst Server. 9080
wlServerContext The context root path of the application on the MobileFirst Server. /mfp/
languagePreferences Sets the default language for client sdk system messages. en

Tutorials to follow next

With the MobileFirst React Native SDK now integrated, you can now:

Last modified on July 24, 2018