Adding the Persistent Mobile Foundation SDK to React Native Applications

Overview

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

The PMF React Native SDK is provided as a react native plug-in, and can be downloaded at ReactNativeSDK.

Available plug-ins are:

  • react-native-pmf - The core SDK plug-in

Jump to:

React Native SDK components

react-native-pmf

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

Prerequisites:

Adding the PMF React Native SDK

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

Before you start, make sure that the PMF 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 PMF 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 Persistent Mobile Foundation Plugins by using the NPM CLI command: npm install react-native-plugin-name For example:

    npm install react-native-pmf

    The above command adds Persistent Mobile Foundation Core SDK Plugin to the React native project.

  4. Link the plugin libraries by running the command:

    react-native link

    Note: This command is not required from react-native 0.60

Existing Application

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

    npm install react-native-pmf

  2. Link the plugin libraries by running the command:

    react-native link

    Note: This command is not required from react-native 0.60

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 PMF:

    pmfdev 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 pmfdev app register CLI command first connects to the Mobile Foundation 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 Mobile Foundation 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 pmfdev app register CLI command first connects to the Mobile Foundation 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 Mobile Foundation Server.

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

The pmfdev app register CLI command first connects to the PMF to register the application. Each platform is registered as an application in PMF.

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

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

Updating the PMF React Native SDK

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

Generated PMF 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 PMF.

Property Description Example values
wlServerProtocol The communication protocol with the PMF. http or https
wlServerHost The host name of the PMF. 192.168.1.63
wlServerPort The port of the PMF. 9080
wlServerContext The context root path of the application on the PMF. /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 PMF.

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

Tutorials to follow next

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

▲
Last modified on