Developing for React Native

improve this page | report issue
Develop your React Native applications by following the tutorials bellow: set-up your development environment, experience the product and add value by integrating with Mobile Foundation 8.0 offerings.

If you are a developer who has chosen React Native as the framework to develop your mobile or web app, the following sections help you get started with IBM Mobile Foundation SDK in your React Native app.

You can use your preferred code editor such as Atom.io, Visual Studio Code, Eclipse, IntelliJ or any other editor for writing your applications.

Step 1: Installing the React Native CLI

To get started with React Native development the first step required is to install the React Native CLI.

To install React Native CLI:

Download and install NodeJS.

From a Command-line window, run the following command:

    npm install -g react-native-cli
   

Follow the instructions provided in the Getting Started page in React Native docs, to set up your machine for React Native development.

This includes the setup required for Android & iOS.

Step 2: Setting up the MobileFirst development environment

After you have installed the React Native CLI, set up the MobileFirst development environment. For detailed information, refer to the tutorial Setting up the MobileFirst development environment to set up your MobileFirst development environment.


Go to Quick Start tab, to learn how to quickly get started with development using React Native SDK.

Follow the steps below to quickly get started with development using React Native on MobileFirst Platform Foundation.

The purpose of this quick start tutorial is to explain a simple end-to-end flow.

A sample application is provided in Github, the sample is downloaded and registered with MobileFirst Server. The provided adapter (or a new adapter) is deployed to the MobileFirst Operations Console. The application logic is changed to make a resource request.

Expected result: To successfully ping the MobileFirst Server and to successfully retrieve data using an adapter.

Step 1: Starting the MobileFirst Server

Make sure you have created a Mobile Foundation instance, or if you are using the MobileFirst Developer Kit, navigate to the server's folder and run the command: ./run.sh in Mac and Linux or run.cmd in Windows.

Step 2: Adding the React Native SDK

Step 2.1: Downloading the React Native sample application from Github.

Step 2.2: Adding the React Native SDK to the downloaded React Native sample application

The MobileFirst SDK for React Native is available as a React Native module from NPM.

  1. Navigate to the root of your downloaded React Native project and add the MobileFirst core React Native plug-in, change directory to the root of the React Native project: cd MFPStarterReactNative
  2. Add the MobileFirst Plugins by using the NPM CLI command: npm install react-native-plugin-name
    For example:
            npm install react-native-ibm-mobilefirst --save
          
    The above command adds MobileFirst Core SDK Plugin to the React Native project.
  3. Link all native dependencies to your app
            react-native link
          

Step 3: 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. Run the following command to register the application:
            mfpdev app register
          

    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.

    • 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.

Step 4: Editing the application logic

  1. Open the React native project in your code editor of choice.
  2. Import the WLAuthorizationManager class into your App.js
  3.          import {WLAuthorizationManager} from 'react-native-ibm-mobilefirst';
             
  4. Select the App.js file, which is located at project's root folder and paste the following code snippet, replacing the existing WLAuthorizationManager.obtainAccessToken() function:
    See the React Native Client-side API references here.
               WLAuthorizationManager.obtainAccessToken("").then(
                   (token) => {
                     console.log('-->  pingMFP(): Success ', token);
                     var resourceRequest = new WLResourceRequest("/adapters/javaAdapter/resource/greet/",
                       WLResourceRequest.GET
                     );
                     resourceRequest.setQueryParameters({ name: "world" });
                     resourceRequest.send().then(
                       (response) => {
                         // Will display "Hello world" in an alert dialog.
                         alert("Success: " + response.responseText);
                       },
                       (error) => {
                         alert("Failure: " + JSON.stringify(error));
                       }
                     );
                   }, (error) => {
                     console.log('-->  pingMFP(): failure ', error.responseText);
                     alert("Failed to connect to MobileFirst Server");
                   });
           

Step 5: Deploying an adapter

Download this prepared .adapter artifact and deploy it from the MobileFirst Operations Console using the Actions → Deploy adapter action.

Step 5.1: Select the Actions → Download sample option. Download the Hello World Java adapter sample

Alternatively, click the New button next to Adapters.

If Maven and MobileFirst CLI are not installed, follow the on-screen Set up your development environment instructions.

Step 5.2: From a Command-line window, navigate to the adapter's Maven project root folder and run the command:

    mfpdev adapter build
  

Step 5.3: When the build finishes, deploy it from the MobileFirst Operations Console using the Actions → Deploy adapter action. The adapter can be found in the [adapter]/target folder.

Step 6: Testing the application

Use the following command to run the application:

     react-native run-ios|run-android
    

If a device is connected, the application is installed and launched in the device. Otherwise the simulator or emulator will be used.

For detailed instructions on quick start steps, see here.

Results

  • Clicking the Ping MobileFirst Server button will display Connected to MobileFirst Server.
  • If the application is able to connect to the MobileFirst Server, a resource request call using the deployed Java adapter takes place. The adapter response is then displayed in an alert.
Last modified on July 25, 2018