Create a React Native App

Learning Objectives

After completing this unit, you’ll be able to:

• Create a simple React Native app with Mobile SDK.
  
• Access React Native components provided by Mobile SDK.
  
• Add your connected app information to your app.
  
• Build and test your Mobile SDK React Native app.
  

Create a React Native App with Forcereact

The following example creates a React Native app using forcereact on macOS X. You can use forcereact on either macOS X or Windows, but you can develop an iOS React Native app on macOS X only.

1. To create a React Native app, run forcereact create in a Terminal window.
   
2. Enter the following values at the prompts:
   

• Platform: Comma-delimited list of one or more platforms. Can be ios, android, or ios,android
  
• Application type: Press <Return>
  
• Application name: FirstReact
  
• Package name: com.mytrail.react
  
• Organization name: MyTrail, Inc.
  
• Output directory: FirstReact
  

3. Here’s how your input should look (minus any nonsensical syntax highlighting):
   

4. $ forcereact create
   Enter the target platform(s) separated by commas (ios, android):
   ios,android
   Enter your application type (react_native_typescript or react_native, leave empty for react_native_typescript):
   <Return>
   Enter your application name:
   FirstReact
   Enter your package name:
   com.mytrail.react
   Enter your organization name (Acme, Inc.):
   MyTrail, Inc.
   Enter output directory for your app (leave empty for the current directory):
   FirstReact

Application name, package name, organization name, and output directory are custom properties that you provide.

What does this forcereact call create? A React Native app that:

• Is named FirstReact
  
• Supports both iOS and Android
  
• Supports the use of TypeScript
  
• Is built with Mobile SDK libraries
  
• Resides in the <current_directory>/FirstReact/ directory
  

The first time you create a forcereact app on any development machine, expect a wait time of several minutes while the React Native libraries are downloaded.

Set Connected App Values

After a command line message reports that your project is ready, update the new project to reflect your connected app settings.

iOS

1. In Xcode, open the <current_directory>/FirstReact/ios/FirstReact.xcworkspace file.
   
2. In the Project view, navigate to FirstReact/FirstReact/Supporting Files, then open the bootconfig.plist file.
   
3. Replace the values of "remoteAccessConsumerKey" and "oAuthRedirectURI" with your own settings.
   

Android

1. In the Android Studio Welcome Screen, click Import Project (Eclipse ADT, Gradle, etc.). Or, if another project is already open in Android Studio, choose File | Open.
   
2. Select the <current_directory>/FirstReact/android directory, then click OK.
   
3. In the Project view, open the app/src/main/res/values/bootconfig.xml file.
   
4. Replace the values of "remoteAccessConsumerKey" and "oauthRedirectURI" with your own settings.
   

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="remoteAccessConsumerKey">3MVG9Iu66FKeHhINkB1l7xt7kR8czFcCTUhgoA8Ol2Ltf1eYHOU4SqQRSEitYFDUpqRWcoQ2.dBv_a1Dyu5xa</string>
   <string name="oauthRedirectURI">testsfdc:///mobilesdk/detect/oauth/done</string>
   <string-array name="oauthScopes">
       <item>api</item>
   </string-array>
   <string name="androidPushNotificationClientId"></string>
</resources>

Build and Test Your React Native App

To run your React Native app, return to the Terminal app or Windows command line.

Your React Native app, when it’s built, creates a bundle that contains your custom JavaScript components. To run the app with the JavaScript and native code talking to each other, start up the React Native development server.

1. In a Terminal window in macOS or the command prompt in Windows, change to your app’s root directory. In our case, that’s FirstReact.
   
2. Run one of the following commands:
   

• yarn start or npm start 
  

When the command line reports “Loading dependency graph, done,” you can run the app from within your development environment.

1. To launch a forcereact iOS app:
   

1. In Xcode, open FirstReact/ios/FirstReact.xcworkspace.
   
2. Click Run.
   

2. To launch a forcereact Android app:
   

1. From the Android Studio Welcome screen, or from the File | Open menu item, navigate to FirstReact/android/.
   
2. Click OK.
   
3. Click Run.
   

When the login screen appears, enter your Developer Edition org credentials. When prompted, authorize the app to access data, and a list view screen appears.

There it is—your sparkling new Mobile SDK React Native app!

Wait—Where Are My JavaScript Files?

If you’ve browsed through your project in Xcode or Android Studio, you’re probably wondering: Where are the React Native JavaScript and markup files? You won’t find them in the Xcode or Android Studio project. Since these JavaScript files can be shared between iOS and Android apps, they’re created one level higher and referenced only in the project’s build settings. Look for the app.tsx file at the same level as the ios/ or android/ folder.

React Native Components for Mobile SDK

When you browse the app.js file, some of the first lines of code you find import the Mobile SDK special sauce. Mobile SDK provides JavaScript components that allow React Native apps to access Mobile SDK features. The components include:

• react.force.oauth.ts (login, identity, and authentication)
  
• react.force.net.ts (REST API helper classes and utilities)
  
• react.force.smartstore.ts (SmartStore offline caching feature)
  
• react.force.mobilesync.ts (Mobile Sync offline synchronization feature)
  

Like the Mobile SDK components used in hybrid apps, these components define bridges from JavaScript to native Mobile SDK code. You import them in your app.tsx file from the react-native-force library. For example, to import all the components, you use:

import {oauth, net, smartstore, mobilesync} from 'react-native-force';

You specify the path to react-native-force components in the dependencies section of your app’s root-level package.json file. Typically, you use the SalesforceMobileSDK-ReactNative.gitrepo:

...
"react-native-force": "git+https://github.com/forcedotcom/SalesforceMobileSDK-ReactNative.git#v9.0.0"
...

If you’ve branched this repo locally, you can set this path to your local branch.

You can’t use the force.js library with React Native.

Real-Time Testing

Now, let’s have some fun.

From your app’s root directory, open the app.tsx file in a text editor. Find the styles object definition near the bottom of the file.

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22,
        backgroundColor: 'white',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },

In the item property of this object, add a line that sets backgroundColor to 'red':

const styles = StyleSheet.create({
    ...
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
backgroundColor: 'red',
    }
});

Switch back to your iOS simulator and press Command-R. See the red background?

You can preview any changes you save in the React Native JavaScript source just by refreshing the emulator or simulator.

Resources

• Mobile SDK Development Guide: React Native Development