What is React-Native?
As you know, it’s possible to create native apps in Android and iOS, using native programming languages to write your code. Alternatively, it is also possible to create hybrid apps that run in both Android and iOS, written in JavaScript, CSS, and HTML. Hybrid apps run in a web view container that provides the translation bridge to native code. This approach implies some performance penalties and doesn’t always have the true look and feel of native apps.
In 2013, Facebook introduced React (a.k.a ReactJS), an open-source development framework which was followed by React-Native in 2015. ReactJS is essentially a JavaScript library used for creating web-based UIs. And, React-Native is a framework that uses the ReactJS library to build native components for mobile apps. Moreover, React-Native is cross-platform, supporting both Android and iOS.
Interestingly, although you write React-Native components in special flavors of JavaScript, CSS, and markup, the underlying objects are native device objects that access the operating system directly. As a result, the performance and look and feel of React-Native components rise “similar” to the native standards. Pretty awesome, huh?
One more important thing for using React-Native is that you don’t have to compile your apps to test changes. Once you’ve got the app running on a real or virtual device, you just edit and save the code, and then refresh your emulator or simulator to see your changes.
How does Salesforce use React-Native to build custom Mobile Apps?
Salesforce has made available in its Mobile SDK, the command-line tools that help to build and run the React-Native application that connects with your Salesforce’s Org.
Although the underlying Facebook framework remains in pre-release mode, Mobile SDK treats React-Native as a full SDK citizen. The Mobile SDK has the following components such as authentication, SmartStore, and SmartSync Data Framework to create full-fledged Mobile SDK apps.
The command-line available to create the React-Native app is “Forcereact”.
Forcereact: command-line tool
To use Forcereact you need first to set up the Mobile SDK Developer Tools.
Also, although React-Native coding is done in JavaScript, you still need to install native platform development tools: Android Studio, Xcode, or both. To create React-Native apps for Mobile SDK, you use the Forcereact npm utility.
Last but not least, keep in mind that to connect to the Salesforce service, every mobile app requires a Salesforce connected app. In fact, a connected app authorizes your app to communicate with Salesforce and to securely access Salesforce APIs. So, after you create and save your connected app, notice its details:
- Copy the Callback URL and Consumer Key values. You use these values to set up authentication in your app.
- Mobile SDK apps do not use the consumer secret, so you can ignore this value.
Demo Mobile App: Salesforce and React-Native
To understand the value and capacity of Salesforce mobile SDK with React-Native, let’s build one application! In this example, I will use an app related to the expenses of my company, Stellaxius.
Firstly, we want to use the natural capacities of Salesforce, such as natural login of SF and some sharing-permission functionalities inside of the mobile app. Additionally, we wish to use some native capacities of the smartphone, such as acceding the camera, to take, for instance, proof-photos of our invoices.
Some Screens of the React-Native Mobile App
1. Native Login of SF
2. List of Expenses – The same as in Salesforce Web UI
3. List of Expenses – The same as in Salesforce Web UI
4. Edit of Expense – The bottom Take Photo will launch the screen of the Camera and from there you can adjust the zoom of Camera
5. The screen of the Camera – The Zoom Button and Flash are available in this screen. The user can adjust the zoom and flash to take the photo with the desired precision.
Demo Mobile App: The Architecture
The following image shows up the structure of our application.
Here the folder “Components” includes the majority of the items of the mobile application. The rest of it, it’s basically the normal structure of application when you use the tool Forcereact to create the React-Native application for Salesforce.
The main file of application is located in the main folder. The file name is App.js
Explanation:
As you can see, the file is written in Javascript aligned with React-Native and React. Thus, we can program our application with Javascript connecting to Salesforce using authentication, SmartStore, and SmartSync Data Framework/ Salesforce mobile SDK. We can also couple it with native capabilities of the smartphone, for example, the camera.
All of this, brings great value to your company! Salesforce has given us the capacity to connect to our Salesforce Org and extended to the mobile world without the discrimination of being a mobile hybrid application.
And yes, we do need to consider that our clients have the necessity of expanding their business to other areas. So, for that, it is very important to reuse what we have in our Org and translate it into the mobile landscape as quickly as possible, leveraging key resources – time and people.
We hope this article has been useful and interesting for you! Subscribe to our Knowledge Center where you will find all about the #1 CRM in the world! If you wish me to cover a specific topic or even if you have any suggestion or question, just drop a comment! Now, are you ready to expand your Org’s to the mobile landscape with Salesforce tools? 🙂
SUBSCRIBE KNOWLEDGE CENTER
Subscribe for free to our Knowledge Center to get the latest articles straight to your inbox!
