Creating a React Native Project with Forcereact

After you’ve successfully installed a native Mobile SDK environment, you can begin creating React Native apps.

To create an app, use forcereact in a terminal window or at a Windows command prompt. The forcereact utility gives you two ways to create your app.

Specify the type of application you want, along with basic configuration data.
OR
Use an existing Mobile SDK app as a template. You still provide the basic configuration data.

In Mobile SDK 9.0, forcereact adds an app type option to support TypeScript: react_native_typescript. This type becomes the default for the forcereact create command. To instead use standard JavaScript, you specify the react_native app type.

You can use forcereact in interactive mode with command-line prompts, or in scripted mode with the parameterized command-line version.

Using Forcereact Interactively

To enter application options interactively at a command prompt, type forcereact create. The forcereact utility then prompts you for each configuration option.

Using Forcereact with Command-Line Options

If you prefer, you can specify forcereact parameters directly at the command line. To see usage information, type forcereact without arguments. The list of available options displays:

1$ forcereact
2
3forcereact: Tool for building a React Native mobile application 
4            using Salesforce Mobile SDK
5
6Usage:
7
8# create a React Native mobile application
9forcereact create
10    --platform=comma-separated list of platforms (ios, android)
11    [--apptype=application type (react_native_typescript or react_native, 
12        leave empty for react_native_typescript)]
13    --appname=application name
14    --packagename=app package identifier (e.g. com.mycompany.myapp)
15    --organization=organization name (your company's/organization's name)
16    [--outputdir=output directory (leave empty for current directory)]

Using this information, type forcereact create, followed by your options and values. For example, to create a React Native app that supports TypeScript:

1$ forcereact create 
2--platform=ios,android
3--appname=CoolReact 
4--packagename=com.test.my_new_app 
5--organization="Acme Widgets, Inc." 
6--outputdir=CoolReact

Specifying a Template

forcereact createWithTemplate is identical to forcereact create except that it also asks for a template repo URI. You set this path to point to any repo directory that contains a Mobile SDK app that can be used as a template. Your template app can be any supported Mobile SDK app type—react_native or react_native_typescript. The force script changes the template’s identifiers and configuration to match the values you provide for the other parameters.

Before you use createWithTemplate, it's helpful to know which templates are available. To find out, type forcereact listtemplates. This command prints a list of templates provided by Mobile SDK. Each listing includes a brief description of the template and its GitHub URI. For example:

1Available templates:
2
31) Basic React Native application: 
4    forcereact createwithtemplate --templaterepouri=ReactNativeTemplate
52) Basic React Native application that uses deferred login
6    forcereact createwithtemplate --templaterepouri=ReactNativeDeferredTemplate
73) Basic React Native application written in TypeScript
8    forcereact createwithtemplate --templaterepouri=ReactNativeTypeScriptTemplate
94) Sample application using MobileSync data framework
10   forcereact createwithtemplate --templaterepouri=MobileSyncExplorerReactNative

After you've found a template's URI, you can plug it into the forcereact command line. Here’s command-line usage information for creating a TypeScript project with forcereact createWithTemplate:

1forcereact createWithTemplate
2    --platform=Comma separated platforms (ios, android)
3    --templaterepouri=Template repo URI
4    --appname=Application Name
5    --packagename=App Package Identifier (e.g. com.mycompany.myapp)
6    --organization=Organization Name (Your company's/organization's name)
7    [--outputdir=Output Directory (Leave empty for current directory)]

For any template in the SalesforceMobileSDK-Templates repo, you can drop the path for templaterepouri—just the template name will do. For example, consider the following command-line call:

1forcereact createWithTemplate
2--platform=ios,android 
3--templaterepouri=MobileSyncExplorerReactNative 
4--appname=MyReact 
5-—packagename=com.mycompany.react 
6--organization="Acme Software, Inc." 
7-—outputdir=""

This call creates a React Native app in the current directory that supports both iOS and Android. It uses the same source code and resources as the MobileSyncExplorerReactNative sample app. Forcereact changes the app name to “MyReact” throughout the project.

Build and Run Your App with Android Studio

For React Native, Mobile SDK supports both npm and yarn for package management. When you see both options, the choice is yours.

In a Terminal window or at Windows command prompt, change to your project’s root directory.
1cd <my_project_root>
Run the following command:
- npm start
  OR
- yarn start
Open your project in Android Studio.
- From the Welcome screen, click Import Project (Eclipse ADT, Gradle, etc.).
  
  OR
- From the File menu, click File | New | Import Project....
Browse to your <project_ root>/android/ directory and click OK.
Android Studio automatically builds your workspace. This process can take several minutes. When the status bar reports “Gradle build successful”, you’re ready to run the project.
Click Run 'app', or press SHIFT+F10.
Android Studio launches your app in the emulator or on your connected Android device.

Build and Run Your App in Xcode

In a Terminal window, change to your project’s root directory.
1cd <my_project_root>
Type npm start, then press Return.
In Xcode, open <project_ root>/ios/<project_name>.xcworkspace.
Click Run.
Xcode launches your app in the simulator or on your connected iOS device.

How the Forcereact Script Generates New Apps

The script downloads templates at runtime from a GitHub repo. For the forcereact create command, the script uses the default templates in the SalesforceMobileSDK-Templates GitHub repo.
The script uses npm to download React Native dependencies.
The script uses git (Android) or CocoaPods (iOS) to download Mobile SDK libraries.

Mobile SDK Development Guide