Sample Application with React Native and the Salesforce Mobile SDK

I recently shared a sample Employee Directory / Org Chart application built with React Native. That version of the application used a Node.js back-end. In this post, I’ll share the same application powered by a Salesforce back-end and built with the Salesforce Mobile SDK. Salesforce automatically provides the org chart data for users (employees) and contacts, so it makes a lot of sense to build this type of app on the Salesforce platform. The Salesforce Mobile SDK provides a series of services that make it easy to build React Native apps that integrate with Salesforce: authentication, Salesforce REST services library, push notification, encrypted database, offline synchronization, etc.

Watch the video to see the Employee Directory application in action:

Follow the steps below to install and run the application on your system. These instructions assume you are developing an iOS app on a Mac.

Step 1: Install React Native

Follow the React Native getting started instructions to install React Native. Make sure you select your Mobile OS and Development OS for the right instructions.

Step 2: Install the Salesforce Mobile SDK

1. On the command prompt, type the following command to install CocoaPods:

   sudo gem install cocoapods
   

   CocoaPods is a dependency manager for Swift and Objective-C used by the Salesforce Mobile SDK to merge Mobile SDK modules into Xcode projects.

2. Type the following command to install the Salesforce Mobile SDK for iOS:

   sudo npm install -g forceios
   

Step 3: Create the Project

1. Open a command prompt and type the following command to create a new React Native application using the Salesforce Mobile SDK:

   forceios create
   

   Answer the prompts as follows (adjust the package name and organization name as needed):

   Enter your application type (native, native_swift, react_native, hybrid_local, hybrid_remote): react_native
   Enter your application name: SalesforceEmployeeDirectory
   Enter the package name for your app (com.mycompany.myapp): com.mycompany.orgchart
   Enter your organization name (Acme, Inc.): MyCompany, Inc
   Enter output directory for your app (leave empty for the current directory):
2. Navigate (cd) to the project directory:

   cd SalesforceEmployeeDirectory
   

3. Open a command prompt and type the following command to start the local server:

   npm start
   

4. Open another command prompt and type the following command to run the app in the emulator:

   react-native run-ios
   

Step 4: Import Sample Data

1. Sign up for a new Developer Edition.
2. Click this link to install the OrgChart unmanaged package into your org. The package adds an ImportOrgChartData Visualforce page and two fields (Picture__c and Include_In_Org_Chart__c) to the Contact object.
3. In the Developer Console, open the ImportOrgChartData Visualforce page. Click the Preview button, and click the Import Data button.

Step 4: Implement the Project

1. Clone the sample app repository:

   git clone https://github.com/ccoenraets/employee-directory-react-native-salesforce

2. Copy the app folder from employee-directory-react-native-salesforce into your SalesforceEmployeeDirectory project folder
3. Open index.ios.js. Delete the existing content and replace it with:

   import {AppRegistry} from 'react-native';
   
   import EmployeeDirectoryApp from './app/EmployeeDirectoryApp';
   
   AppRegistry.registerComponent('SalesforceEmployeeDirectory', 
                                     () => EmployeeDirectoryApp);
   

4. Hit Cmd + R to refresh the app in the emulator

Code Highlights

There are two parts to the Salesforce integration in this application:

• Authentication: The auth object of the react-native-force module makes it easy to authenticate with Salesforce using OAuth. Check out the EmployeeDirectoryApp class for details.
• REST Services: The net object of the react-native-force module makes it easy to invoke the Salesforce Rest services. Check out the employee-service-salesforce module for details.