Mobile SDK Sample App Using React Native

The best way to get up-to-speed on React Native in Mobile SDK is to study the sample code.

Mobile SDK provides four implementations of the MobileSyncExplorer application, including a React Native version. To use MobileSyncExplorerReactNative, follow the instructions in the MobileSyncExplorerReactNative README.md file.

Here are a few notes about the MobileSyncExplorerReactNative files.

Table 1. Key Folder and Files
Path Description
README.md Instructions to get started
installandroid.js Use this script to install the Android sample. See README.md for details.
installios.js Use this script to install the iOS sample. See README.md for details.
ios The iOS application
android The Android application
js The JavaScript source files for the application
index.js App start page
Table 2. React Components
File Component Description
js/events.js Event model
js/App.js MobileSyncExplorerReactNative Root component (the entire application) (iOS and Android)
js/SearchScreen.js SearchScreen Search screen (iOS and Android)
jsContactScreen.js ContactScreen Used for viewing and editing a single contact (iOS and Android)
js/ContactCell.js ContactCell A single row in the list of results in the search screen (iOS and Android)
js/ContactBadge.js ContactBadge Colored circle with initials used in the search results screen (iOS and Android)
js/Field.js Field A field name and value used in the contact screen (iOS and Android)
js/StoreMgr.js StoreMgr Interacts with SmartStore and the server (via Mobile Sync).
js/NavImgButton.js NavImgButton Navigation Bar button
Table 3. Platform-Specific Native Projects
File Description
android/ Android native project
ios/ iOS native project

Most components are shared between iOS and Android. However, some components are platform-specific.

Note