A Step-by-Step Guide to Integrating Salesforce Mobile SDK in Expo/React Native

If you’re a mobile app developer using Expo and React Native, you might be wondering how to harness the power of Salesforce’s extensive features in your applications. However, the integration process with Salesforce Mobile SDK in Expo/React Native can be a daunting task, especially with the lack of clear instructions from Salesforce

Fear not! In this comprehensive guide, we will walk you through the process of integrating Salesforce Mobile SDK in Expo SDK 49 ( the latest upon writing this article) , to create powerful mobile applications that leverage Salesforce’s functionalities. We’ll break down the steps, provide clear instructions, and offer valuable tips to ensure a smooth integration process.

Whether you’re a seasoned Expo/React Native developer or just starting your journey, this article will equip you with the knowledge and confidence to connect your mobile apps to Salesforce, enabling you to build data-driven and feature-rich applications that elevate your business endeavors.

So, let’s dive in and embark on this exciting journey of Salesforce Mobile SDK integration with Expo and React Native!

All the work that we’re going to implement is gonna be available here

GitHub - islamouzou/sfapp

I however encourage you to implement these steps from scratch before attempting to download the project .

1- Set-up Expo and create a new expo project :

i suppose you already have NODE on your machine .

Get started

After installing Node.js, you can use npx to create a new app. but first you need to install expo-cli and eas-cli

npm install -g expo-cli

npm install -g eas-cli

Create a project

Create a project by running:

npx create-expo-app

let’s call the app “sfapp” (salesforce app ) and wait for npm to configure all the dependencies , sit back and relax .

We’ll be using “yarn” instead of npm , i always get issues using npm

• Navigate to “sfapp” directory delete package.lock file and run :

yarn

Let’s test our app at this point by running :

npx expo start

Scan the QR code on Expo GO on your phone or open emulator , your phone should be on the same network as your computer .

Development builds

Now that our app is working , let’s move on to the next step , which is creating a custom Expo Go application to which we can add a custom code . in our case it’s the Salesforce SDK . ( We’ll be testing on Android only )

A development build of your app is a Debug build that contains the expo-dev-client package. As a production build is for the general public, and a preview build lets your team test your next release, a development build lets developers iterate as quickly as possible. It comes with extensible development tools to develop and test your project.

You can think of a development build as your version of the Expo Go client , This way we can integrate Custom Native code which is Salesforce SDK .

What is expo-dev-client

The expo-dev-client package is used to create a development build. It is a library designed to support any workflow, release process, or set of dependencies in the Expo/React Native ecosystem. Whatever your project needs, either now or in the future, you'll be able to create a development build for it and get the productivity and quality of life improvements of JavaScript-driven development.

Install expo-dev-client

To initialize a development build, you need to install the expo-dev-client library in your project:

npx expo install expo-dev-client

Prebuild the project

expo prebuild is the process of generating native directories android / ios .

• after each app.json config change or new native modules installed , you run again prebuild .

npx expo prebuild

this will generate android and ios folders , let’s try to build a new dev build now .

with your android phone plugged into your computer ( with usb debbuging enabled ) run this command

npx expo run:android

if everything goes well you should see a prompt to install the new app in your phone . install it , and that’s our custom dev-client .

Important !! : We haven’t yet added any custom code , this example was just to demonstrate how expo run / prebuild commands work.

we’ll get right into Salesforce .

SalesForce React Native SDK

The main issue with salesforce SDK is that it’s not a package that you install with npm and use like any other package , i don’t really understand why is it that complicated . why do i have to initialize a porject with forcedotcom tool and not add directly the sdk to my project dependencies . but that’s what we’ll do anyway .

Prerequisites :

1- SalesforceMobileSDK-Android :

clone this repository and put SalesforceMobileSDK-Android folder inside a new folder “mobile_sdk” in your expo project root as shown in this picture .

https://github.com/forcedotcom/SalesforceMobileSDK-Android

2- Install react-native-force package :

Now , open package.json and add salesforce SDK for react native package .

"react-native-force": "git+https://github.com/wmathurin/SalesforceMobileSDK-ReactNative.git#rn71"

Save and run

yarn

this will install the new package .

Let’s import a login function from “react-native-force” to demonstrate a call to salesforce sdk .

In App.js add a button and import oauth function from “react-native-force” as shown here .

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, Button } from "react-native";
import { oauth } from "react-native-force";

export default function App() {
  return (
    <View style={styles.container}>
      <Button
        title="Login"
        onPress={() => {
          oauth.authenticate();
        }}
      ></Button>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

save and run this command to regenerate new native files

npx expo prebuild --clean

clean will remove existing android and ios folders , and regenerate them .

let’s build again our dev-client

npx expo run:android

If everything goes well you’ll see a login button , what happens if you click it ???????

Well of course nothing will happen. cause we are not pointing to the SDK . for this to work we’d have to make some changes in Our native files then Prebuild and Build the project .

Modifying Native Files :

In order for salesforce sdk to work with our project , we’d have to point to it first of all . in order to do that , let’s do it .

1- / android/settings.gradle

this is our actual settings.gradle file

rootProject.name = 'sfapp'

apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle");
useExpoModules()

apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json')"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
applyNativeModulesSettingsGradle(settings)

include ':app'
includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json')"].execute(null, rootDir).text.trim()).getParentFile())

let’s add the following lines and explain what they’re doing

def libsRootDir = new File(settingsDir, '../mobile_sdk/SalesforceMobileSDK-Android/libs')

include ':libs:SalesforceAnalytics'
project(':libs:SalesforceAnalytics').projectDir = new File(libsRootDir, 'SalesforceAnalytics')

include ':libs:SalesforceSDK'
project(':libs:SalesforceSDK').projectDir = new File(libsRootDir, 'SalesforceSDK')

include ':libs:SmartStore'
project(':libs:SmartStore').projectDir = new File(libsRootDir, 'SmartStore')

include ':libs:MobileSync'
project(':libs:MobileSync').projectDir = new File(libsRootDir, 'MobileSync')

include ':libs:SalesforceReact'
project(':libs:SalesforceReact').projectDir = new File(libsRootDir, 'SalesforceReact')

So , the first line is pointing to the directory that contains Salesforce SDK modules , then we include each module separately ,we have Five modules which are :

• SalesforceAnalytics
• SalesforceSDK
• SmartStore
• MobileSync
• SalesforceReact

!!!!! the main reason our button didn’t work is because of The SalesforceReact was missing .

2- / android/build.gradle

Here is our actual /android/build.gradle file

Inside dependencies block let’s add this line of code , this is simply to prevent kotlin compiling errors , so here is dependencies block after modification

dependencies {
        classpath('com.android.tools.build:gradle:7.4.2')
        classpath('com.facebook.react:react-native-gradle-plugin')
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"

}

3- / android/app/src/build.gradle

Here is our actual file dependencies block

let’s add this dependencie

implementation project(':libs:SalesforceReact')

what this is doing is straight forward , adding the SalesforceReact project as a dependency

• Modify minSdkVersion to 24 , Edit this line

minSdkVersion rootProject.ext.minSdkVersion

to

minSdkVersion 24

4- / android/app/src/main/MainActivity.java

• add this import statement to the top of the file , after the package .

import com.salesforce.androidsdk.reactnative.ui.SalesforceReactActivity;

• Edit The activity declaration to extend SalesforceReactActivity instead of ReactActivity

public class MainActivity  extends SalesforceReactActivity

• Override shouldAuthenticate Method , ( add this before onCreate method )

@Override
    public boolean shouldAuthenticate() {
        return false;
  }

5- / android/app/src/main/MainApplication.java

• Add this import statement at the top after package

import com.salesforce.androidsdk.reactnative.app.SalesforceReactSDKManager;

• add this line inside “getPackages” method before “return packages” statement

packages.add(SalesforceReactSDKManager.getInstance().getReactPackage());

• add this line inside OnCreate method after SoLoader.init method call

SalesforceReactSDKManager.initReactNative(getApplicationContext(), MainActivity.class);

That’s It !:

Don’t worry if this was a lot of work . the issue is that whenever we execute prebuild command we lose these changes .

To get Around this , what i did is , i created a simple script file in which i execute “ npx expo prebuild — clean” and after it a call other node scripts that add those modifications . i made all the scripts using ChatGPT .

So the idea is “whenever we execute the prebuild command we get those modifications in place” without having to edit everything manually .

I’ll leave a link with the project on github with the scripts files so all you have to do is execute ./prebuild.sh instead “ npx expo prebuild ”of and it will get the job done

Let’s test what we’ve done

Execute this once again , with physical phone connected through a cable or an emulator

npx expo run:android

let’s see what we get !

If everything goes well , you should go to login activity when pressing the button .

Now , let’s use the scripts a created found in this project

GitHub - islamouzou/sfapp

Notice the folder “prebuild-scripts ” and the script file “prebuild.sh” , let’s remove android folder and execute the script and see that we don’t need to do everything manually anymore .

Add “xmldom”: “⁰.6.0” to project’s package.json like this :

Now in the root folder execute this :

./prebuild.sh

Don’t worry if you get IOS warnings about CocoaPods cause we’re not covering IOS .

You should see :

build.gradle file updated successfully.
Modifications applied to MainActivity.java file.
Modifications applied to MainApplication.java file.
Code snippet added to settings.gradle file.
Attribute android:manageSpaceActivity added to AndroidManifest.xml.
AndroidManifest.xml file updated successfully.
build.gradle file updated successfully.

Unless there is an error , you can post errors you got if there are any in the comment section and i’ll do my best to help.

Let’s run again now :

npx expo run:android

Everything should work just like we did in the manual way .