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.
| 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 |
| 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 |
| File | Description |
|---|---|
android/ | Android native project |
ios/ | iOS native project |
Most components are shared between iOS and Android. However, some components are platform-specific.