{"id":9333,"date":"2024-05-29T07:21:29","date_gmt":"2024-05-29T07:21:29","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=9333"},"modified":"2024-05-29T08:41:32","modified_gmt":"2024-05-29T08:41:32","slug":"react-native-app-development-with-salesforce-mobile-sdk","status":"publish","type":"post","link":"https:\/\/dianapps.com\/blog\/react-native-app-development-with-salesforce-mobile-sdk\/","title":{"rendered":"React Native App Development with Salesforce Mobile SDK"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Almost every business these days runs its operations through applications and websites. And we can\u2019t deny the fact that business requires a wide variety of mobile and web apps. As an instance, sales employees might need apps that help in keeping track records of their customers.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For businesses that embrace the Salesforce ecosystem, the Salesforce Mobile SDK offers a powerful solution for developing cutting-edge applications. Whether you prefer native or hybrid apps, the Mobile SDK provides a versatile platform that caters to your specific needs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Among the options available, <\/span><a href=\"https:\/\/dianapps.com\/blog\/is-react-native-the-right-platform-for-your-next-app\/\"><span style=\"font-weight: 400;\">React Native is the right platform<\/span><\/a><span style=\"font-weight: 400;\">. With its seamless blend of cross-platform app development<\/span> <span style=\"font-weight: 400;\">simplicity and native app aesthetics, React Native has become the go-to choice for developers leveraging the Salesforce Mobile SDK.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Discover how this powerful combination can elevate your app development endeavors and drive your business towards success.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s dig out the full potential of the Salesforce CRM development platforms as we dive into the fascinating world of Salesforce Mobile SDK and its integration with React Native.\u00a0<\/span><\/p>\n<h1><span class=\"ez-toc-section\" id=\"What-is-Salesforce-Mobile-SDK-Development\"><\/span><span style=\"font-weight: 400;\">What is Salesforce Mobile SDK Development?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p><span style=\"font-weight: 400;\">Imagine having the power of Salesforce Platform right at your fingertips within your very own mobile apps. That&#8217;s exactly what Salesforce Mobile SDK Development offers. It allows developers to tap into the full potential of the Salesforce ecosystem and create amazing mobile applications that connect seamlessly with the Salesforce Platform.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You might be wondering, &#8220;Why not just access Salesforce data through a mobile browser?&#8221;\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That\u2019s true to some extent, but what about the UI\/UX? Since, most Salesforce websites are optimized for desktop usage, and navigating them on a mobile device can be a real headache.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is where the Salesforce Mobile SDK comes to the rescue!\u00a0<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-9343 aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/pasted-image-0-12.png\" alt=\"Salesforce Mobile SDK Development\" width=\"798\" height=\"449\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/pasted-image-0-12-768x432.png 768w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/pasted-image-0-12-640x360.png 640w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/pasted-image-0-12-400x225.png 400w\" sizes=\"(max-width: 798px) 100vw, 798px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/oktana.com\/salesforce-mobile-sdk\/#:~:text=Salesforce%20Mobile%20SDK%20is%20a,which%20uses%20TypeScript%20and%20JavaScript.\"><span style=\"font-weight: 400;\">Source<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">This SDK eliminates the frustration of clunky mobile browsing by enabling developers to build native mobile apps that directly access Salesforce data. These apps are lightning-fast and responsive, providing users with an exceptional mobile experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But here&#8217;s the best part: Salesforce Mobile SDK allows for generous customization.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That\u2019s true!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Instead of a one-size-fits-all solution, businesses can create tailor-made apps that perfectly match their branding, incorporate unique features, and add that extra touch of functionality. It&#8217;s all about delivering a top-notch user experience that reflects the company&#8217;s identity and meets its specific needs.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"What-Benefits-Does-Salesforce-Mobile-SDK-Offer\"><\/span><span style=\"font-weight: 400;\">What Benefits Does Salesforce Mobile SDK Offer?\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Once the development stage is complete, the app can be independently published on the App Store or Google Play Store. The Mobile SDK offers a foundation for <\/span><b>custom mobile app development<\/b><span style=\"font-weight: 400;\">, enabling developers to pre-configure the necessary requirements to connect an app to the Salesforce org. This ensures secure access to the information within the org.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And it doesn\u2019t end here! The Salesforce Mobile SDK comes with a pool of benefits that software developers can take advantage of. Here are some core advantages to consider:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The ability to work with Salesforce data while offline.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Allows the use of features and capabilities of Salesforce in custom mobile applications.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Salesforce push notifications can be handled.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Full Salesforce functionality, i.e. no need to reinvent the wheel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Applications can be distributed through the Native device&#8217;s application store.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Why-use-React-Native-in-the-Salesforce-Ecosystem\"><\/span><span style=\"font-weight: 400;\">Why use React Native in the Salesforce Ecosystem?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">You must have heard about the commonly used open-source framework &#8211; React Native for mobile app development that allows developers to access native UI elements directly through the java script library, markup and stylesheets. It also provides various functionalities that can prove to be beneficial for Salesforce ecosystems. Let\u2019s have a look at those in detail.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"1-Cross-platform-compatibility\"><\/span><span style=\"font-weight: 400;\">1. Cross-platform compatibility<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">With <\/span><a href=\"https:\/\/dianapps.com\/react-native-app-development\"><b>React Native App Development Services<\/b><\/a><span style=\"font-weight: 400;\">, you can develop mobile applications that can seamlessly operate on iOS as well as Android devices without the need of different codebases.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"2-Native-like-experience\"><\/span><span style=\"font-weight: 400;\">2. Native-like experience<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The components built with React Native look, feel, and perform like native app elements, providing a seamless user experience.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"3-Hot-reloading\"><\/span><span style=\"font-weight: 400;\">3. Hot reloading<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">This feature allows you to make alterations in your code and examine the updates in real-time eliminating the need of recompilation. With hot-reloading, you can save time and effort in the development process.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"4-Integration-with-Salesforce-ecosystem\"><\/span><span style=\"font-weight: 400;\">4. Integration with Salesforce ecosystem<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Salesforce Mobile SDK recognizes React Native as a valuable addition, providing access to essential components like Mobile Sync, SmartStore, Salesforce REST API, login\/authentication, and native object interaction.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"5-Single-codebase\"><\/span><span style=\"font-weight: 400;\">5. Single codebase<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">By using React Native, you can maintain a single codebase for your app, reducing development and maintenance efforts compared to building separate apps for Android and iOS.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"6-JavaScript-based-development\"><\/span><span style=\"font-weight: 400;\">6. JavaScript-based development<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">React Native leverages JavaScript, a widely adopted programming language, making it easier for developers to learn and write code, and providing flexibility in choosing tools and libraries.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"7-Faster-development-turnaround\"><\/span><span style=\"font-weight: 400;\">7. Faster development turnaround<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">React Native&#8217;s efficient development environment enables faster turnaround times, allowing you to quickly produce native clients for mobile devices and cater to your client&#8217;s needs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">By utilizing React Native in Salesforce development services, businesses can benefit from these advantages to create feature-rich and robust mobile applications within the Salesforce ecosystem.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Limitations-of-using-HTML5\"><\/span><span style=\"font-weight: 400;\">Limitations of using HTML5<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Developers who have worked with React, Angular, Vue.Js (and other client frameworks) may wonder, &#8220;Why not just create a responsive HTML5 application?&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While the HTML5 approach is feasible, there are limitations when trying to access core components on mobile devices, such as:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Limited native features\u2014Support for camera, contacts, and other native features varies, particularly among older mobile browsers.<\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Unfriendly security flows\u2014In mobile web apps, simple security measures can pose complex implementation challenges. They can also be painful for users.<\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">When a web app with authentication restarts or comes back from the background, for instance, users may need to re-enter their credentials.<\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">No secure offline storage\u2014HTML browsers support offline databases and caching but not standard encryption. All of these features are available with the Mobile SDK.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Lack of native look and feel\u2014HTML can only mimic the native look, and customers are unable to use familiar compound gestures.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Also read about: The <\/span><a href=\"https:\/\/dianapps.com\/blog\/the-state-of-react-native-for-web-windows-and-macos-in-2023\/\"><span style=\"font-weight: 400;\">State of React Native for Web, Windows, and macOS<\/span><\/a><span style=\"font-weight: 400;\"> in 2023.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Getting-Started-with-React-Native-the-Salesforce-Mobile-SDK\"><\/span><span style=\"font-weight: 400;\">Getting Started with React Native &amp; the Salesforce Mobile SDK<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Setting-Up-the-Development-Environment\"><\/span><span style=\"font-weight: 400;\">Setting Up the Development Environment\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4><span class=\"ez-toc-section\" id=\"Step-1-Check-Git-Installation\"><\/span><span style=\"font-weight: 400;\">Step 1: Check Git Installation<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">First, ensure that Git is installed on your system. Open the command prompt and type &#8220;git version&#8221; to check if Git is already installed. If not, download and install Git from Git SCM for your OS.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Step-2-Install-Nodejs-and-npm\"><\/span><span style=\"font-weight: 400;\">Step 2: Install Node.js and npm<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Next, check if Node.js and npm (Node Package Manager) are installed. Type &#8220;npm -v&#8221; in the command prompt to verify. If you get a &#8220;command not found&#8221; error, download and install Node.js from the official website.<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Step-3-Install-Yarn\"><\/span><span style=\"font-weight: 400;\">Step 3: Install Yarn<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Yarn serves as both a package manager and project manager, suitable for small projects or large monorepos. Install Yarn globally using the following command:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">[sudo] npm install -g yarn<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Step-4-Install-TypeScript-Compiler\"><\/span><span style=\"font-weight: 400;\">Step 4: Install TypeScript Compiler<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">TypeScript is a strongly typed language that enhances JavaScript tooling. Install the TypeScript compiler globally with:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">[sudo] npm install -g typescript<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Step-5-Install-ForceReact\"><\/span><span style=\"font-weight: 400;\">Step 5: Install ForceReact<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">ForceReact is a command-line script in the Salesforce Mobile SDK for installing React Native and Mobile SDK libraries and creating projects from templates. Install ForceReact globally using Yarn:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">[sudo] yarn global add forcereact<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With these installations, your React Native development environment is ready to start building innovative mobile apps with Salesforce Mobile SDK.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s now start with React Native App Development!<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"1-Start-a-React-Native-project-with-Forcereact\"><\/span><span style=\"font-weight: 400;\">1. Start a React Native project with Forcereact.<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Once you\u2019ve successfully set up the native Mobile SDK environment successfully, you can start creating React Native apps. To create an app, open a terminal window or a Windows command prompt and use the forcereact utility. This utility offers two methods to create your app:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0 \u00a0 \u00a0 \u00a0A.\u00a0 Specify the desired application type and provide basic configuration data.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">OR<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0 \u00a0 \u00a0 \u00a0B. Use an existing Mobile SDK app as a template, where you still need to provide the basic configuration data.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Forcereact offers a TypeScript-supporting app type option, &#8220;react_native_typescript,&#8221; in Mobile SDK 9.0, which sets the default for the \u201cforcereact create\u201d command. If you prefer using standard JavaScript, you can specify the app type as &#8220;react_native.&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You have the option to use forcereact in:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Interactive mode with command-line prompts\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Parameterized command-line version<\/span><\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"2-Implement-TypeScript-in-React-Native-Projects\"><\/span><span style=\"font-weight: 400;\">2. Implement TypeScript in React Native Projects.<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We have already discussed Flexbox <\/span><a href=\"https:\/\/dianapps.com\/blog\/react-native-0-71-flexbox-gap-typescript-and-its-first-class-support\/\"><span style=\"font-weight: 400;\">Gap and Typescript<\/span><\/a><span style=\"font-weight: 400;\"> when the React Native 0.71 version rolled out. It provides helpful benefits to React Native programs. It not only helps you create safer code, but it also coexists with vanilla JavaScript.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Mobile SDK includes a new template app to showcase TypeScript use. The updated template may be found in the ReactNativeTypeScriptTemplate directory of the SalesforceMobileSDK-Templates GitHub project.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">TypeScript apps&#8217; source code may be found in *.ts, *.tsx, or *.js files. In the new template app, for example, app.js is renamed app.tsx. A comparison of the old and new files highlights TypeScript&#8217;s unobtrusiveness.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Imports are the same as exports.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Changes to the code for new kinds are modest.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The following custom types are added to the original JavaScript code in app.tsx by the template:<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true\">interface Response {\r\n\r\n\u00a0\u00a0\u00a0\u00a0records: Record[]\r\n\r\n}\u00a0 \u00a0 \u00a0 \u00a0\r\n\r\ninterface Record {\r\n\r\n\u00a0\u00a0\u00a0\u00a0Id: String,\r\n\r\n\u00a0\u00a0\u00a0\u00a0Name: String\r\n\r\n}\u00a0\r\n\r\ninterface Props {\r\n\r\n}\u00a0\u00a0\r\n\r\ninterface State {\r\n\r\n\u00a0\u00a0\u00a0\u00a0data : Record[]\u00a0\r\n\r\n}<\/pre>\n<p>3. Utilize Mobile SDK Components in React Native Apps.<\/p>\n<p><span style=\"font-weight: 400;\">React Native applications use the same Mobile SDK libraries as native Mobile SDK apps. Mobile SDK provides JavaScript components, or bridges, for React Native that run your JavaScript code as native Mobile SDK instructions<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The following native bridges provide access to Mobile SDK capabilities in React Native:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">react.force.oauth.js<br \/>\n<\/span><span style=\"font-weight: 400;\">react.force.net.js<br \/>\n<\/span><span style=\"font-weight: 400;\">react.force.smartstore.js<br \/>\n<\/span><span style=\"font-weight: 400;\">react.force.mobilesync.js<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You need to add an import statement in the JS code in order to use these bridges.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Example:\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">import {oauth, net, smartstore, mobilesync} from &#8216;react-native-force&#8217;;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The \u2018react-native-force source\u2019 path is specified by the React Native Apps built with Forecreat in the \u2018package.json file\u2019.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&#8220;React-native-force&#8221;: &#8220;https:\/\/github.com\/forcedotcom\/SalesforceMobileSDK-ReactNative.git&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&#8220;Remember that you cannot use the force.js library in the React Native framework.&#8221;\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"4-Integrate-Mobile-SDK-Native-Modules-for-React-Native-Apps\"><\/span><span style=\"font-weight: 400;\">4. Integrate Mobile SDK Native Modules for React Native Apps.<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Mobile Software Development Kit includes components for React Native.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This react-native-force library is made up of four modules\/bridges that handle various aspects of the Mobile SDK.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As previously stated, these modules act as gateways to the native mobile SDK capabilities.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">OAuth<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Used for Salesforce Employee or Customer Authentication<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The OAuth bridge works similarly to the OAuth plugin for Cordova.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">import {oauth} from &#8216;react-native-force&#8217;;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Network<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Connects to the Salesforce NETwork and accesses data by delivering SQL statements.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Network bridge and force.js hybrid app library are quite similar.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">import {net} from &#8216;react-native-force&#8217;;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">SmartStore<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Used to store offline data safely with the use of encryption<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The SmartStore bridge is comparable to the Cordova SmartStore plugin. However, unlike the plugin, first parameters in React Native are not optional.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">import {smartstore} from &#8216;react-native-force&#8217;;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">MobileSync<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Used to maintain offline and loaded data in sync with Salesforce Cloud data.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The MobileSync bridge corresponds to the Cordova MobileSync plugin. However, unlike the plugin, first parameters in React Native are not optional.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">import {mobilesync} from &#8216;react-native-force&#8217;;<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"5-Create-a-Sample-App-using-React-Native-and-Mobile-SDK\"><\/span><span style=\"font-weight: 400;\">5. Create a Sample App using React Native and Mobile SDK.<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The sample code is the easiest approach to get started with React Native in Mobile SDK.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Mobile SDK includes four MobileSyncExplorer application implementations, including a React Native version.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Follow the instructions in the <\/span><a href=\"https:\/\/github.com\/forcedotcom\/SalesforceMobileSDK-Templates\/blob\/v9.0.0\/MobileSyncExplorerReactNative\/README.md\"><span style=\"font-weight: 400;\">MobileSyncExplorerReactNative README.md file <\/span><\/a><span style=\"font-weight: 400;\">to get started.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"6-Enable-Defer-Login-functionality\"><\/span><span style=\"font-weight: 400;\">6. Enable Defer Login functionality.<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Early versions of the React Native for Mobile SDK always display a Salesforce login page upon launch. However, certain apps may benefit from delaying login until a later time. You may postpone login to any logical location in your app starting with React Native for Mobile SDK 4.2.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Implementing deferred login is a two-step process:<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Step1-Disable-Login-at-Startup\"><\/span><span style=\"font-weight: 400;\">Step1: Disable Login at Startup<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">To disable authentication at startup, you use Mobile SDK native methods in your iOS or Android native container program.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">iOS (Objective-C):<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">To prevent the Salesforce login page from showing at startup, do the following:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Set shouldAuthenticate to false in the bootconfig.plist file of your project.<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true\">&lt;dict&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;key&gt;remoteAccessConsumerKey&lt;\/key&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;string&gt;3REW9Iu66....&lt;\/string&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;key&gt;oauthRedirectURI&lt;\/key&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;string&gt;testsfdc:\/\/\/mobilesdk\/detect\/oauth\/done&lt;\/string&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;key&gt;oauthScopes&lt;\/key&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;array&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;string&gt;web&lt;\/string&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;string&gt;api&lt;\/string&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;\/array&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;key&gt;shouldAuthenticate&lt;\/key&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;false\/&gt;\r\n\r\n&lt;\/dict&gt;<\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Android (Java):<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">In the beginning, the Salesforce login screen is displayed by default. To prevent this behavior, modify the shouldAuthenticate() function in your MainActivity class (or any class that subclasses SalesforceReactActivity) as follows:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">@Override\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">public boolean shouldAuthenticate() {\u00a0\u00a0\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0return false;\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">}<\/span><\/p>\n<h4><span class=\"ez-toc-section\" id=\"Step-2-Initiate-Authentication-in-React-JavaScript\"><\/span><span style=\"font-weight: 400;\">Step 2: Initiate Authentication in React (JavaScript)<\/span><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><span style=\"font-weight: 400;\">To start off the Authentication process, invoke the following oauth function.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">function authenticate(success, fail)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This function accepts two arguments:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">a callback function for success\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">a callback function for failure.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">If authentication fails, your callback is triggered. If authentication is successful, your success callback is called with the following keys:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">accessToken<\/span><\/p>\n<p><span style=\"font-weight: 400;\">refreshToken<\/span><\/p>\n<p><span style=\"font-weight: 400;\">clientId<\/span><\/p>\n<p><span style=\"font-weight: 400;\">userId<\/span><\/p>\n<p><span style=\"font-weight: 400;\">orgId<\/span><\/p>\n<p><span style=\"font-weight: 400;\">loginUrl<\/span><\/p>\n<p><span style=\"font-weight: 400;\">instanceUrl<\/span><\/p>\n<p><span style=\"font-weight: 400;\">userAgent<\/span><\/p>\n<p><span style=\"font-weight: 400;\">communityId<\/span><\/p>\n<p><span style=\"font-weight: 400;\">communityUrl<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"7-Upload-Binary-Content-smoothly-using-Mobile-SDK\"><\/span><span style=\"font-weight: 400;\">7. Upload Binary Content smoothly using Mobile SDK.<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Binary content may be uploaded to any force.com endpoint that supports the binary upload functionality.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In react.force.net.js, a new optional parameter known as \u2018fileParams\u2019 has been added to the sendRequest() function.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">function sendRequest(endPoint, path, successCB, errorCB, method, payload, headerParams, fileParams)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The format of the parameter should look like:\u00a0<\/span><\/p>\n<pre class=\"theme:github font-size:14 nums:false lang:default decode:true\">{\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;fileParamNameInPost&gt;: \/\/ value depends on the endpoint\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fileMimeType:&lt;someMimeType&gt;,\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fileUrl:&lt;fileUrl&gt;, \/\/ url to file to upload\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fileName:&lt;fileNameForPost&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n}\r\n\r\nLet\u2019s take an example of it:\u00a0\r\n\r\n{\r\n\r\n\u00a0\u00a0\u00a0\u00a0fileUpload:\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fileMimeType:'image\/jpeg',\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fileUrl:localPhotoUrl,\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fileName:'pic.jpg'\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">That\u2019s the whole process to React Native App Development with Salesforce Mobile SDK. For a more detailed version, check out the <\/span><a href=\"https:\/\/developer.salesforce.com\/docs\/atlas.en-us.noversion.mobile_sdk.meta\/mobile_sdk\/react_native_intro.htm\"><span style=\"font-weight: 400;\">Salesforce Mobile SDK development guide<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Choose-DianApps-as-your-Salesforce-Mobile-Development-Partner\"><\/span><span style=\"font-weight: 400;\">Choose DianApps as your Salesforce Mobile Development Partner<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">When it comes to mobile app development, coding requires essential skills and expertise to ensure seamless functionality and desired outcomes. If you possess such experience and aim for top-notch React Native app development services using Salesforce Mobile SDK, you&#8217;re on the right track. However, juggling the role of a developer while managing your business can be overwhelming and lead to missed opportunities where your involvement is crucial.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But worry not, DianApps, a leading <\/span><a href=\"https:\/\/dianapps.com\/salesforce-consulting-services\"><b>Salesforce consulting company<\/b><\/a><span style=\"font-weight: 400;\">, is here to assist you. We specialize in delivering exceptional React Native app development services using the Salesforce Mobile SDK. Our team comprises certified Salesforce developers who are well-prepared to handle your project efficiently.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">By partnering with DianApps, you can focus on your core business while we take care of the technical aspects, ensuring a trouble-free and successful React Native app development journey. As a renowned Salesforce development company, we also offer comprehensive post-deployment services to ensure your app&#8217;s sustained success. You can rely on us to keep your app running smoothly while staying updated with the <\/span><a href=\"https:\/\/dianapps.com\/blog\/top-android-development-trends-to-look-out-for-in-2023\/\"><span style=\"font-weight: 400;\">latest trends<\/span><\/a><span style=\"font-weight: 400;\"> and technologies.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Being a renowned Salesforce development company, we also take care of the app after deployment to make sure that your app sees continued success in the future.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Choose DianApps as your trusted Salesforce Development company<\/span> <span style=\"font-weight: 400;\">and propel your app to new heights of excellence.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Almost every business these days runs its operations through applications and websites. And we can\u2019t deny the fact that business requires a wide variety of mobile and web apps. As an instance, sales employees might need apps that help in keeping track records of their customers.\u00a0 For businesses that embrace the Salesforce ecosystem, the Salesforce [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":9346,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_applaud_exclude":false,"footnotes":""},"categories":[3],"tags":[56,296],"class_list":["post-9333","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-react-native-app-development","tag-salesforce-administrator"],"featured_image_src":{"landsacpe":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/sdk-blog-1-1140x445.jpg",1140,445,true],"list":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/sdk-blog-1-463x348.jpg",463,348,true],"medium":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/sdk-blog-1-300x169.jpg",300,169,true],"full":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/sdk-blog-1.jpg",1920,1080,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Native App Development with Salesforce Mobile SDK<\/title>\n<meta name=\"description\" content=\"Enhance Salesforce experience with React Native app development and seamlessly integrate Salesforce Mobile SDK for top-notch mobile solutions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dianapps.com\/blog\/react-native-app-development-with-salesforce-mobile-sdk\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native App Development with Salesforce Mobile SDK\" \/>\n<meta property=\"og:description\" content=\"Enhance Salesforce experience with React Native app development and seamlessly integrate Salesforce Mobile SDK for top-notch mobile solutions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dianapps.com\/blog\/react-native-app-development-with-salesforce-mobile-sdk\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation &amp; Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-29T07:21:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-29T08:41:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/sdk-blog-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Khushi Gupta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Khushi Gupta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Native App Development with Salesforce Mobile SDK","description":"Enhance Salesforce experience with React Native app development and seamlessly integrate Salesforce Mobile SDK for top-notch mobile solutions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dianapps.com\/blog\/react-native-app-development-with-salesforce-mobile-sdk\/","og_locale":"en_US","og_type":"article","og_title":"React Native App Development with Salesforce Mobile SDK","og_description":"Enhance Salesforce experience with React Native app development and seamlessly integrate Salesforce Mobile SDK for top-notch mobile solutions.","og_url":"https:\/\/dianapps.com\/blog\/react-native-app-development-with-salesforce-mobile-sdk\/","og_site_name":"Learn About Digital Transformation &amp; Development | DianApps Blog","article_published_time":"2024-05-29T07:21:29+00:00","article_modified_time":"2024-05-29T08:41:32+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2024\/05\/sdk-blog-1.jpg","type":"image\/jpeg"}],"author":"Khushi Gupta","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Khushi Gupta","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dianapps.com\/blog\/react-native-app-development-with-salesforce-mobile-sdk\/","url":"https:\/\/dianapps.com\/blog\/react-native-app-development-with-salesforce-mobile-sdk\/","name":"React Native App Development with Salesforce Mobile SDK","isPartOf":{"@id":"https:\/\/dianapps.com\/blog\/#website"},"datePublished":"2024-05-29T07:21:29+00:00","dateModified":"2024-05-29T08:41:32+00:00","author":{"@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/32ea190f39896e07d5668f0b76f4763a"},"description":"Enhance Salesforce experience with React Native app development and seamlessly integrate Salesforce Mobile SDK for top-notch mobile solutions.","breadcrumb":{"@id":"https:\/\/dianapps.com\/blog\/react-native-app-development-with-salesforce-mobile-sdk\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dianapps.com\/blog\/react-native-app-development-with-salesforce-mobile-sdk\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dianapps.com\/blog\/react-native-app-development-with-salesforce-mobile-sdk\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Native App Development with Salesforce Mobile SDK"}]},{"@type":"WebSite","@id":"https:\/\/dianapps.com\/blog\/#website","url":"https:\/\/dianapps.com\/blog\/","name":"Learn About Digital Transformation &amp; Development | DianApps Blog","description":"Dianapps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dianapps.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/32ea190f39896e07d5668f0b76f4763a","name":"Khushi Gupta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/1701261129967-96x96.jpeg","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/12\/1701261129967-96x96.jpeg","caption":"Khushi Gupta"},"description":"Khushi Gupta, a seasoned content writer at DianApps, seamlessly merges creativity with technical expertise to compose compelling blogs. Driven by a profound passion for technology, her articulate expressions effortlessly bridge the gap between complexity and accessibility, making intricate subjects approachable for diverse readers.","url":"https:\/\/dianapps.com\/blog\/author\/khushi\/"}]}},"_links":{"self":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/9333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/comments?post=9333"}],"version-history":[{"count":6,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/9333\/revisions"}],"predecessor-version":[{"id":9345,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/9333\/revisions\/9345"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media\/9346"}],"wp:attachment":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=9333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=9333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=9333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}