Sample Application with React Native and the Salesforce Mobile SDK

January 30, 2017 in React, React Native, Salesforce, 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.
The sample application works with the Contact object to allow you to load a meaningful number of employees using a Developer Edition (You can’t load as many records in the User object in a Developer Edition). You can easily modify the application queries to work on the User object in a real life environment.

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.

css.php