Adding the Persistent Mobile Foundation SDK to React Native Applications

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

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

Prerequisites

React Native CLI and PMF CLI installed on the developer workstation.
A local or remote instance of PMF is running.
Read the Setting up your PMF development environment and Setting up your React Native development environment tutorials.

React Native SDK components

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.

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.If a remote server is used,

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 following command.

./run.sh

Adding the SDK

New Application

Create a React Native project with the following name.

react-native init projectName.
Example
```
npx react-native init Hello
```
Where, 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).
Change directory to the root of the React Native project by using the following command.

cd hello
Download the SDK .zip file from the PMF Operations Console → Download Center → SDKs tab and extract the downloaded file.
Add the Persistent Mobile Foundation plug-ins by using the following command.

npm install react-native-plugin-name

Example
```
 npm install react-native-pmf(add manual path)
```
The above command adds the Persistent Mobile Foundation Core SDK plug-in to the React native project.
Link the plug-in libraries by running the command:
```
react-native link
```

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

Existing Application

Download the SDK .zip file from the PMF Operations Console → Download Center → SDKs tab and extract the downloaded file.

Release 9.1
- Navigate to the root of your existing React Native project and add the PMF core React Native plug-in by using the following command.
  
  npm install react-native-pmf <add manual path>
Release 9.2
- Uninstall the existing PMF React-Native plug-ins by using the following command.
  
  npm uninstall<plug-in name>
- Navigate to the iOS platform location and update the pods by using the following command.
```
pod update
```
- Install PMF React-Native plug-ins by using the following command.
  
  npm install <relative path to plug-in><react native plug-in name>
- Navigate to the iOS platform location and update the pods by using the following command.
```
pod update
```
Note: React-native-base plug-in is mandatory to use any React native functionality.
Link the plug-in libraries by running the command:
```
react-native link
```
Note: This command is not required from react-native 0.60.

Registering the application

Open a command-line window and navigate to the root of the particular platform (iOS or Android) of the project.
Register the application to PMF by using the following command.
```
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 PMF 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 PMF 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 PMF 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 PMF Server.

If a remote server is used, add it by using the following command.

pmfdev server add

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 as follows.

Load the PMF Operations Console.
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 by using the following command.

npm uninstall react-native-pmf

Then run the command to add it again.

npm install react-native-pmf

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.0.2.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.0.2.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:

Review the Using the PMF SDK tutorials.
Review the Adapters development tutorials.
Review the Authentication and security tutorials.
Review the Notifications tutorials.

▲

Last modified on