đź“Ł Attention Salesforce Certified Trailblazers! Link your Trailhead and Webassessor accounts and maintain your credentials by December 14th. Learn more.
close
trailhead

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 Mac OS X. You can use forcereact on either OS X or Windows, but you can develop an iOS React Native app on OS 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 name: FirstReact

    • Package name: com.mytrail.react

    • Organization name: MyTrail, Inc.

    • Output directory: FirstReact

    Here’s how your input should look (minus any nonsensical syntax highlighting):
    $ forcereact create
    Enter the target platform(s) separated by commas (ios, android): ios,android
    Enter your application name: FirstReact
    Enter your package name: com.bestapps.ios
    Enter your organization name (Acme, Inc.): BestApps.com
    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
  • Is built with Mobile SDK libraries
  • Resides in the <current_directory>/FirstReact/ directory
Note

Note

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/Classes, then open the AppDelegate.m file. 

  3. Near the top of the file, replace the default values of RemoteAccessConsumerKey and OAuthRedirectURI with your own settings. 

// Fill these in when creating a new Connected Application on Lightning Platform
static NSString * const RemoteAccessConsumerKey = 
    @"3MVG9Iu66FKeHhINkB1l7xt7kR8czFcCTUhgoA8Ol2Ltf1eYHOU4SqQRSEitYFDUpqRWcoQ2.dBv_a1Dyu5xa";
static NSString * const OAuthRedirectURI = @"testsfdc:///mobilesdk/detect/oauth/done";

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/res/values/bootconfig.xml file.

  4. Replace the remoteAccessConsumerKey and oauthRedirectURI values 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:
    • In Mac OS: npm start
    • In Windows: npm run-script start-windows

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.

React Native app list view

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 index.ios.js or index.android.js at the same level as the ios/ or android/ folder.

React Native JavaScript files for iOS shown in Finder

React Native JavaScript files for Android shown in Finder

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.js (login, identity, and authentication)
  • react.force.network.js (REST API helper classes and utilities)
  • react.force.smartstore.js (SmartStore offline caching feature)
  • react.force.smartsync.js (SmartSync Data Framework 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.js file from the react-native-force library. For example, to import all the components, you use:
import {oauth, network, smartstore, smartsync} 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.git repo:
...
"react-native-force": "https://github.com/forcedotcom/SalesforceMobileSDK-ReactNative.git"
...

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

Note

Note

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.js file in a text editor. Find the following code snippet near the bottom of the file.
const styles = StyleSheet.create({    
    container: {        
        flex: 1,        
        backgroundColor: 'red',    
    },
    header: {        
        height: 50,
        alignItems:'center'
    },
    row: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: 'white',
        flexDirection: 'row',
        padding: 12,
    },
...
In the row prop of the styles object, change backgroundColor to red:
row: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'red',
    flexDirection: 'row',
    padding: 12,    
},

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

React Native app list view screen with red background

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

retargeting