Adding the MobileFirst Foundation SDK to React Native Applications
improve this page | report issueOverview
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
- Adding the MobileFirst React Native SDK
- Updating the MobileFirst React Native SDK
- Generated MobileFirst React Native SDK artifacts
- Tutorials to follow next
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:
- React Native CLI and MobileFirst CLI installed on the developer workstation.
- A local or remote instance of MobileFirst Server is running.
- Read the Setting up your MobileFirst development environment and Setting up your React Native development environment tutorials.
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
-
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).
-
Change directory to the root of the React Native project:
cd hello
-
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.
-
Link the plugin libraries by running the command:
react-native link
Note: This command is not required from react-native 0.60
-
For iOS only, install Mobilefirst Pod dependencies
cd ios && pod install
Existing Application
-
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
-
Link the plugin libraries by running the command:
react-native link
Note: This command is not required from react-native 0.60
-
For iOS only, install Mobilefirst Pod dependencies
cd ios && pod install
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 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:
- Load the MobileFirst Operations Console.
- 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:
- Review the Using the Mobile Foundation SDK tutorials
- Review the Adapters development tutorials
- Review the Authentication and security tutorials
- Review the Notifications tutorials
- Review All Tutorials
Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.