React Native for iOS with IBM MobileFirst Platform Foundation

MobileFirst Platform Foundation with React Native for iOS

In the video below I go through a simple app using the MobileFirst Platform Foundation iOS SDK and a MobileFirst Platform Foundation HTTP Adapter with React Native for iOS as the front end framework. Below I will include important snippets of how to export the native MobileFirst iOS SDK methods into the React Native javascript code.

Below I think one of the more important chunks of code to integrate React Native for iOS with the MobileFirst Platform Foundation. The code chunk is the MobileFirst Platform Foundation Adapter invocation call from the file ResourceRequest.m being exported into the React Native javascript code. In this section of code there are two important React Native methods. One being RCT_EXPORT_MODULE(); which will allow you to export a native class into the React Native javascript. The other is RCT_EXPORT_METHOD(...) this class explicitly tells React to expose this class's method for use in the React Native javascript. Exporting the particular method below is going to pass in a path named "path" and also a callback named "results." The adapter call is getting a list of movies stored as JSON data to a particular path (this path ended up not being needed). Then that data is passed as the callback into the React Native code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#import <Foundation/Foundation.h>
#import "WLResourceRequest.h"
#import "ResourceRequest.h"
@implementation ResourceRequest
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(getJavaAdapter:(NSString *)path results:(RCTResponseSenderBlock)callback)
{
  NSLog(@"Invoking GET Procedure...");
  NSURL* url = [NSURL URLWithString:@"http://localhost:10080/HelloMobileFirst/adapters/MoviesAdapter/getStories"];
  WLResourceRequest* resourceRequest = [WLResourceRequest requestWithURL:url method:WLHttpMethodGet];
  [resourceRequest sendWithCompletionHandler:^(WLResponse *response, NSError *error) {
    NSString* resultText;
    if(error != nil){
      resultText = @"Invocation failure.";
      resultText = [resultText stringByAppendingString: error.description];
    }
    else{
      resultText = response.responseText;
      callback(@[[NSNull null], resultText]);
    }
  }];
}
@end

Below is some React Native for iOS snippets that I found important when creating my sample from the file index.ios.js that is created when create a React Native project.

It is important that you use require to import the module from the MobileFirst iOS SDK into the React Native javascript. Take note that the 'NativeModule' that is being imported is the name of the class above.

1
var ResourceRequest = require('NativeModules').ResourceRequest;

After importing it is simple to use a method from that class inside the index.ios.js file. Below is the invocation of the MobileFirst Adapter from the React Native iOS javascript. The success call of this adapter invocation is going to populate a native ListView with movies from the JSON that is returned.

1
2
3
4
5
6
7
8
9
10
    ResourceRequest.getJavaAdapter("cart", (error, result) => {
              if(error){
                alert("No Dice");
              } else if(result){
                resultJSON = JSON.parse(result);
                this.setState({
                  dataSource: this.state.dataSource.cloneWithRows(resultJSON.movies),
                  loaded: true, });
              }
          });

Helpful links to recreate this project.

  1. React Native Tutorial. You should go through this tutorial first to get a base project set up.
  2. Configuring a native iOS application with the MobileFirst Platform SDK Use this tutorial to learn the necessary files to use the MobileFirst iOS SDK.
  3. React's Native Module (iOS) Tutorial This tutorial will cover how to export your native modules to use in your React's javascript code.

You can download a zip of my project from my google drive account here. This project will not work right away when downloading it. You still need to set up the MobileFirst server to connect to and create a MobileFirst adapter to invoke. This project should put you on a good starting path if you intend to use React Native for iOS.

Last modified on September 13, 2016
Share this post: