React Native App Development with Salesforce Mobile SDK

Salesforce Mobile SDK supports two types of mobile apps; Native and Hybrid. With mobile SDK, you can develop native apps using a native programming language and hybrid apps that can run on Android and iOS, well-written in HTML, CSS, and JavaScript. Let you know, Hybrid apps based on Apache Cordova run in a web view container. It offers the translation bridge to native code, and this approach demands a performance penalty; additionally doesn’t showcase any true look and feel of native apps. There’s one more option in Mobile SDK, React Native using which the developer experiences the identical simplicity and style of Hybrid development; that’s why it is mainly picked. 

Now the question is, Why Salesforce Mobile SDK? With this mobile SDK, you can experience a good turn you usually miss with other mobile SDKs (benefits will be discussed later). 

If you are looking to develop applications adopting the Salesforce ecosystem, you are on the right page. In this article, we will put forth varied aspects that you should consider regarding Salesforce Mobile SDK, and that may help you harness the power of the Salesforce platform to make feature-packed React Native apps. 

Benefits of the Salesforce Mobile SDK

If you are interested in choosing Salesforce mobile SDK to develop an app for your business, you should know some unknown aspects about it. 

• Your custom apps can make the best out of Salesforce features and functionality. 
• Distribute apps using the application store of the native device. 
• Process push notifications from Salesforce. 
• Work easily, even in offline mode. 

Leverage the Salesforce Mobile SDK to make well-informed business decisions by allowing Salesforce-maintained data into chief component locations. 

Benefits of Using React Native

Introduced by Facebook in 2013, React is an open-source development framework. Currently, React technology is categorized into two: 

• ReactJS, and
• React Native. 

A JS library, ReactJS, is usually preferred to create web-based UIs. It’s a framework that makes the best out of the ReactJS library to develop native components for mobile applications. It’s a cross-platform framework that supports Android and iOS. However, you write React Native components in JS, CSS, and markup; the basic objects are native device objects that directly access the operating system. 

Consequently, the look, feel, and performance of React Native components appear to be native standards. The chief reason for using React Native is hot reloading. With React Native, there’s no need to recompile your app with Gradle or Xcode to test the changes. 

Once your app is ready and running as expected on a virtual or real device, you can edit and save its code. Next, you only need to refresh your simulator or emulator to review your changes. Salesforce Mobile SDK acknowledges React Native as a complete SDK citizen. You can create React Native apps with Salesforce command line tools and consider Mobile SDK components to develop feature-packed Mobile SDK apps. 

React Native bridges offer developers access to standard features of mobile SDK, like Mobile Sync, SmartStore, Salesforce REST API access, and Salesforce login and authentication. Besides, you can access your native objects. 

Getting Started with React Native & the Salesforce Mobile SDK

1. Set Up Your React Native Development Environment

Salesforce mobile SDK offers forcereact, a command-line script used to install React Native and Mobile SDK libraries and also to create projects from the template apps. So, you need to install the below packages to support this tool:

a. Install git.

• If you need to check if git is already installed, at the operating command prompt, type “git version” and press “Return.”

• If you get an error message, “command not found,” you can download and install the git package for your OS at Git SCM.

b. Install Node.js and npm.

• Again, to check if these tools are also installed, type “npm -v” at the command prompt and press “Return.”

• If you get an error message, “command not found,” you can download and install the Node.js package for your OS at Node.js.

c. Install yan. 

[sudo] npm install -g yarn

For more information, see Getting Started | Installation at yarn.

d. Install the TypeScript compiler.

[sudo] npm install -g typescript

For more information, see Download at TypeScript.

e. Install forcereact.

[sudo] yarn global add forcereact

2. Creating a React Native Project with Forcereact

Post you have successfully installed React Native development environment, you can start developing React Native apps. 

For that, you need to use forcereact at a Windows command prompt or in a terminal window. With forcereact utility, you can follow one of the two ways to develop your app:

Either Use a current Mobile SDK app as a template and provide the basic configuration data.

OR

Specify your app type with basic configuration data. 

You can use forcereact in two modes:

• Interactive mode with command-line prompts.

Type "forcereact create." 

Then, the forcereact utility prompts you for all the configuration options.

• Scripted mode with the parameterized command-line version.

You can directly define forcereact parameters at the command line. To review usage details, 

type "forcereact" without arguments

The available list of options will display:

$ forcereact

forcereact: Tool for building a React Native mobile application 
            using Salesforce Mobile SDK

Usage:

# create a React Native mobile application
forcereact create
    --platform=comma-separated list of platforms (ios, android)
    [--apptype=application type (react_native_typescript or react_native, 
        leave empty for react_native_typescript)]
    --appname=application name
    --packagename=app package identifier (e.g., com.mycompany.myapp)
    --organization=organization name (your company's/organization's name)
    [--outputdir=output directory (leave empty for current directory)]

3. Using TypeScript in React Native Projects

With TypeScript, you can attract varied benefits to React Native apps. Besides helping you write safer code, it can coexist flawlessly with vanilla JavaScript. And you can use as little or as much TypeScript as you like. 

Mobile SDK arrives with a new template app to help you demonstrate Ty[eScript usage. 

You can download or view the new template at the SalesforceMobileSDK-Templates GitHub repos. 

TypeScript’s source code can stay in *.ts, *.tsx, or *.js files.

n app.tsx, the template adds the below custom types to the original JavaScript code: 

interface Response {
    records: Record[]
}
            
interface Record {
    Id: String,
    Name: String
}
            
interface Props {
}
            
interface State {
    data : Record[] 
}

4. Mobile SDK Native Modules for React Native Apps

For React Native, Mobile SDK offers native modules that perform as JavaScript bridges to native Mobile SDK functionality. 

1. OAuth

The OAuth plugin for Cordova and OAuth bridges are similar. 

Usage

import {oauth} from 'react-native-force';

2. Network

The Network bridges and the force.js library for hybrid apps are almost identical. 

Usage

import {net} from 'react-native-force';

3. Mobile Sync

The Mobile Sync bridge and the Mobile Sync plugin for Cordova are also similar. But, the first arguments are not optional in React Native like the plugin. 

Usage

import {mobilesync} from 'react-native-force';

4. SmartStore

The SmartStore bridge and the SmartStore plugin in Cordova are akin. But, the first arguments are not optional in React Native, like the plugin. 

Usage

import {smartstore} from 'react-native-force';

5. Mobile SDK Sample App Using React Native

In Mobile SDK, to match the speed of React Native is to review the sample code. 

Mobile SDK offers four implementations of the MobileSyncExplorer app, including a React Native version. You need to follow the MobileSyncExplorerReactNative/README.md file instructions to use MobileSyncExplorerReactNative. 

6. Defer Login

When you develop apps with prior versions of React Native for Mobile SDK, a Salesforce login screen is presented at startup. Usually, such apps can harness the benefit of deferring authentication till at some later point. 

Starting with React Native for Mobile SDK 4.2, in your app, you can defer login to any logical place. 

You can conduct deferred login implementation in the two-step process below:

1. In your Android or iOS native container app, you call Mobile SDK methods that disable authentication in the beginning.

2. In your React code, you can call the Mobile SDK JS function at the point where you want to start authentication. 

A React Native template app from Mobile SDK helps demonstrate specifically deferred login: ReactNativeDeferredTemplate. 

To develop an app based on this template, use the forcereact createwithtemplate command as below:

$ forcereact createwithtemplate

Enter the target platform(s) separated by commas (ios, android): ios,android

Enter URI of repo containing template application or a Mobile SDK template name: ReactNativeDeferredTemplate

Enter your application name: MyDeferred

...

Implementation Step

Step#1: Disable Login at the Beginning

• Android (Java):

The Salesforce login screen, by default, appears at the beginning. To disable this behavior, you need to override the shouldAuthenticate() method in your MainActivity class as below:

@Override 

public boolean shouldAuthenticate() {    

    return false; 

}

• iOS (Objective-C):

At startup, to disable the Salesforce login screen from being present:

Set “shouldAuthenticate” to false in your project’s bootconfig.plist file.

<dict>
    <key>remoteAccessConsumerKey</key>
    <string>3REW9Iu66....</string>
    <key>oauthRedirectURI</key>
    <string>testsfdc:///mobilesdk/detect/oauth/done</string>
    <key>oauthScopes</key>
    <array>
        <string>web</string>
        <string>api</string>
    </array>
    <key>shouldAuthenticate</key>
    <false/>
</dict>

Step#2: In React, initiate Authentication (JS)

To start the authentication process, call the below oauth function:

function authenticate(success, fail)

This function demands two arguments:

• A success callback function, and 
• A failure callback function. 

If authentication succeeds, a success callback will invoke with a dictionary, including userId, clientId, loginUrl, etc. 

7. Upload Binary Content

At any force.com endpoint that backs the binary upload feature, you can upload binary content. 

In react.force.net.js, the sendRequest() method has a new optional parameter named fileParams.

function sendRequest(endPoint, path, successCB, errorCB, method, payload, headerParams, fileParams)

This parameter may be like the below form:

{

    <fileParamNameInPost>: // value depends on the endpoint 

    {

        fileMimeType:<someMimeType>,  

        fileUrl:<fileUrl>, // url to file to upload

        fileName:<fileNameForPost>

    }

}

How Can Emizentech Help You? 

Obviously, coding is not an easy peasy job. It demands the required skills and expertise to go seamlessly and get the expected outcome. If you hold such an experience in mobile app development and looking forward to developing a React Native app using Salesforce Mobile SDK, then go ahead. But, in the long run, performing a developer role while running your business would make you stressed out and even miss the spots where your participation is crucial. 

No need to fret anymore when we are here to help you out. You can count on Emizentech for all your app development needs. Of course, we hold a team of expert Salesforce developers holding certifications who are going to assist you in your project. Besides, we offer post-deployment services and will take care of your app till you want us. We assure you that we will keep your app running successfully, following the latest trends and technologies. 

Conclusion

While finishing up, we hope you find this post easy and understandable to get some technical specifications and coding when it comes to React Native app development with the Salesforce Mobile SDK. Still, if you get stuck with any issues, you can connect with our app development experts. We are here for you whenever you need us.