Example app
Build, run, and navigate the example app included with the React Native SDK
The Exponea React Native SDK includes an example application you can use as a reference implementation. You can build and run the app, test Engagement features, and compare the code and behavior of your implementation with the expected behavior and code in the example app.
Prerequisites
You must have the following software installed to be able to build and run the example app:
- Node
- Yarn
- React Native CLI
- Watchman
- Git
- Android Studio with a virtual or physical device set up to run the app on Android
- Xcode and CocoaPods with a virtual or physical device set up to run the app on iOS
Follow React Native's Get started guide if you are new to React Native.
Build and run the example app
- Clone the exponea-react-native-sdk repository on GitHub:
git clone https://github.com/exponea/exponea-react-native-sdk.git
- Enter the
exponea-react-native-sdk
directory:cd exponea-react-native-sdk
- Run the following commands to do a clean build of the SDK:
./cleanCache.sh yarn yarn run build rm -rdf node_modules
- Enter the
example
directory containing the example app:cd example
- Run yarn to resolve dependencies:
yarn
- To run the app on iOS:
- Run CocoaPods in the
ios
directory to install dependencies:cd ios pod install cd ..
- Run the app:
react-native run-ios
- Run CocoaPods in the
- To run the app on Android:
- Connect a virtual or physical Android device.
- Run the app:
Alternatively, use
react-native run-android --mode=GmsDebug
--mode=HmsDebug
for Huawei devices without GooglePlay services but with HMS Core. For React Native version <0.73, use--variant
instead of--mode
, see #2026.
To enable push notifications in the example app, you must also configure the Apple Push Notification Service integration (for iOS) or the Firebase integration or Huawei integration (for Android) in the Exponea web app.
Navigate the example app
When you run the app in the simulator, you'll see the AuthScreen. Enter your project token, API token, and API base URL. Then click Start
to initialize the SDK.
The app provides several screens, accessible using the bottom navigation, to test the different SDK features:
-
The Tracking screen enables you to test tracking of different events and properties, as well as open the app inbox. The
Identify customer
andTrack event
buttons open modals to enter test data.TrackingScreen.tsx
IdentifyCustomerModal.tsx
TrackEventModal.tsx
-
The Fetching screen enables you to fetch consents, recommendations, and segments.
-
The Flushing screen lets you trigger a manual data flush as well as anonymize the customer data. The
Anonymize
button opens a modal to optionally enter new project configuration parameters. -
The Config screen enables you to configure default properties to track with any event. The
Default properties
button opens a modal that lists the current default properties and enables you to enter new ones. -
The In-App Content Blocks screens displays in-app content blocks. Use placeholder IDs
example_top
,ph_x_example_iOS
, andexample_list
in your in-app content block settings.
Try out the different features in the app, then find the customer profile in the Engagement web app (under Data & Assets
> Customers
) to see the properties and events tracked by the SDK.
Until you use Identify customer
in the app, the customer is tracked anonymously using a cookie soft ID. You can look up the cookie value in the logs and find the corresponding profile in the Engagement web app.
Once you use Identify customer
in the app to set the registered
hard ID (use an email address as value), the customer is identified and can be found in Engagement web app by their email address.
Refer to Customer identification for more information on soft IDs and hard IDs.
Troubleshooting
If you encounter any issues running the example app, the following may help:
- Run
rm -rf node_modules
in the root folder before runningyarn
in theexample
folder. - If you see errors building for iOS, run
rm -rf Pods
, thenpod install
in theexample/ios
folder.
Updated 26 days ago