The Silverline BlogExpert Salesforce tips & tricks, articles and musings. Sprinkled with fun.

The Missing Salesforce Mobile SDK + React Native Tutorial

Help & Training

Preface: To SDK or not to SDK?

If you’re looking to use the Android and iOS Mobile SDK’s in a React Native app, this tutorial is for you.

There are two available strategies for building a Salesforce/React Native app:

  1. Roll your own OAuth & HTTP/REST implementation
  2. Use the Salesforce-provided Android & iOS Mobile SDK’s

Option 1: The no-SDK route is not that hard

“Rolling your own” may sound complicated but at present time, it is actually the easier method to get up and running. See this Dreamforce 2017 presentation and the Linking API to get going in the right direction.

Option 2: If you need Mobile SDK

If you require offline syncing & storage, or would just prefer to use the Salesforce-built code, you’ll need to do some extra work to get there. Salesforce offers a forceios & forceandroid CLI to generate template React Native apps for one platform or the other, but building an application for both platforms or integrating the SDK’s into an existing application is not a clear process… until now!Assuming you’ve looked into it and chosen Option 2, here are the steps that got me up and running:

Step 0: Generate The App

The forcedroid and forceios CLI’s are hardcoded to certain RN versions and platforms, so we will start with a blank out-of-box React Native app:

$ react-native init MobileSDKExample

Step 1: Include the SDKs

Now you need to update package.json to include references to the SDKs:

...
"sdkDependencies": {
    "salesforcemobilesdk-android": "https://github.com/forcedotcom/SalesforceMobileSDK-Android.git#v5.3.0",
    
    "salesforcemobilesdk-ios": "https://github.com/forcedotcom/SalesforceMobileSDK-iOS.git#v5.3.0"
}
...

Remember to replace 5.3.0 with the most recent version of the sdk.

Step 2: postinstall

You’ll need to add a postinstall entry in the “scripts” section of your package.json. You need three commands to get this to work.

sed -i "" "s/#import <RCTAnimation\\/RCTValueAnimatedNode.h>/#import \"RCTValueAnimatedNode.h\"/" ./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h
sed -i "" "s/react-native.*/react-native:+'/g" ./mobile_sdk/salesforcemobilesdk-android/libs/SalesforceReact/build.gradle
rm -rf ./mobile_sdk/salesforcemobilesdk-android/node_modules/react-native

The first command resolves this bug in React Native, and the next two get you around the fact that the MobileSDK has a hard-coded version of React Native.Note: I think this brings up some architectural questions about the best way for the Mobile SDK to handle this, but I have more on this topic later on. Anyway you can download my postinstall script like so:

$ wget https://gist.githubusercontent.com/realdoug/169e275fefcc7e9c89b4a3aee3bcc2bb/raw/552bf42263b493c63f22cb66936b44f32392e0da/mobilesdk-postinstall.sh

And then update your package.json:

"scripts": {
    ...
    "postinstall": "sh ./mobilesdk-postinstall.sh"
}

Step 3: SFDC Install scripts

Then you need to obtain & run the MobileSDK install scripts. This is what gets run as part of forceios& forcedroidbut we want to run it in our own project.

$ wget https://raw.githubusercontent.com/forcedotcom/SmartSyncExplorerReactNative/master/installios.js
$ wget https://raw.githubusercontent.com/forcedotcom/SmartSyncExplorerReactNative/master/installandroid.js

Step 4: Podfile

If you’re installing on iOS you’ll need a Podfile to handle dependencies. The Podfile in the SmartSyncExplorer example project is a good start but here is one that I found works (note the project name on line 4. you’ll need to use your project name):

platform :ios, '9.0' 
project 'MobileSDKExample.xcodeproj'

target 'MobileSDKExample' do 
  source 'https://github.com/CocoaPods/Specs.git' 

  react_native_path = '../node_modules/react-native'
  
  pod 'DoubleConversion', :podspec => react_native_path + '/third-party-podspecs/DoubleConversion.podspec'
  pod 'GLog', :podspec => react_native_path + '/third-party-podspecs/GLog.podspec'
  pod 'Folly', :podspec => react_native_path + '/third-party-podspecs/Folly.podspec'
  pod 'yoga', :path => react_native_path + '/ReactCommon/yoga'
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  
  pod 'React', :path => '../node_modules/react-native', :subspecs => [    
    'DevSupport',
    'tvOS',
    'jschelpers',
    'cxxreact',
    'ART',
    'RCTActionSheet',
    #'RCTAdSupport',
    'RCTAnimation',
    'RCTCameraRoll',
    'RCTGeolocation',
    'RCTImage',
    'RCTNetwork',
    'RCTPushNotification',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
    'RCTLinkingIOS'
  ] 
  pod 'SalesforceAnalytics', :path => '../mobile_sdk/SalesforceMobileSDK-iOS'
  pod 'SalesforceSDKCore', :path => '../mobile_sdk/SalesforceMobileSDK-iOS'
  pod 'SmartStore', :path => '../mobile_sdk/SalesforceMobileSDK-iOS'
  pod 'SmartSync', :path => '../mobile_sdk/SalesforceMobileSDK-iOS'
  pod 'SalesforceReact', :path => '../mobile_sdk/SalesforceMobileSDK-iOS' 
end

Step 5: iOS install

Ok, lets actually install it! For iOS:

$ node installios.js
$ cd mobile_sdk/salesforcemobilesdk-ios && ./install.sh
$ pod update

If all went well, you can open ios/MobileSDKExample.xcworkspace in XCode. You’ll need to make the following adjustments:

Step 5A: Remove React target

You’ll want to remove the React build target from the Pods project in your xcworkspace, like so (at the bottom of XCode, you should see a minus sign):

The Missing Salesforce Mobile SDK + React Native Tutorial

Step 5B: Update AppDelegate

At this point you’re pretty much done with the iOS install but if you’d like to automatically authenticate the user when the app boots, you’ll need to write a little Objective-C. Look at ios directory of the ReactNative SmartSyncExplorer project. You can lift InitialViewController verbatim from the project.

https://raw.githubusercontent.com/forcedotcom/SmartSyncExplorerReactNative/v5.3.0/ios/SmartSyncExplorerReactNative/InitialViewController.m
https://raw.githubusercontent.com/forcedotcom/SmartSyncExplorerReactNative/v5.3.0/ios/SmartSyncExplorerReactNative/InitialViewController.h

You’ll then need to add these files to XCode, and then make sure InitialViewController is imported intoAppDelegate.h.

For AppDelegate.m, you’ll need to lift all of the extra methods, and make the same updates to didFinishLaunchingWithOptions. Unfortunately, this function may change from version to version in React Native, you’re best to compare these two files, and make the changes strategically. The Salesforce version has some comments to guide you.

Step 6: Android Install

Installing on Android is much easier. It’s a simple two-step process. First, run the installer:

$ node installandroid.js

Then, just make sure that settings.gradlelooks like this:

rootProject.name = 'MobileSDKExample'
def libsRootDir = new File( settingsDir, '../mobile_sdk/SalesforceMobileSDK-Android/libs' )
include ':app'
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:SmartSync'
project( ':libs:SmartSync' ).projectDir = new File( libsRootDir, 'SmartSync' )
include ':libs:SalesforceReact'
project( ':libs:SalesforceReact' ).projectDir = new File( libsRootDir, 'SalesforceReact' )

Step 7: Celebrate!

You’ve done it! If the Salesforce and React Native gods have smiled upon you today, now have an Android, iOS, Salesforce Mobile SDK, and React Native application running on the latest version of each project.

Conclusions

If you’ve read through all of this and have a working app, congratulations. It took me a good bit of fiddling to get this project right. I’d like to add a short call to action: let’s make this process better! React Native is a very powerful tool for building business & consumer apps. How, great would it be if getting Salesforce into your app is just a call to react-native linkaway? This tutorial is meant to get a new project off the ground under the current state, but if I have extra time, I’d like to explore what changes could be made the Mobile SDK itself to make this process even easier. Hope you found it useful.


Click here to access the original posting of this article on Medium.com.

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Max Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Max
Guest
Max

Nice tutorial. I have the react native app now working and i don´t get any errors.
But how do i use the SDK now?
In Salesforce Docs they use react-native-force. But this module is missing.

Thanks for your Help.

Need a custom solution? We can help. Let's Chat