Example App — React Native SDK
The bundled example app demonstrates initialize, identify, track, device registration, and in-app sync using the native bridge.
Prerequisites
- Installation toolchain (Expo dev client or bare RN)
- Your CDP API key
Step 1 — Clone and install
git clone https://github.com/opencdp/opencdp-react-native-sdk.git
cd opencdp-react-native-sdk/example
npm install
Step 2 — Prebuild (Expo)
npx expo prebuild
npx expo run:ios
# or
npx expo run:android
Step 3 — Configure on device
On the Config screen, enter:
| Field | Value |
|---|---|
| CDP API Key | YOUR_CDP_API_KEY |
| Gateway endpoint | YOUR_DATA_GATEWAY_URL (from workspace Settings) |
| Person ID | user_123 (any non-email test ID) |
Tap Initialize & Identify.
Step 4 — Exercise the home screen
Screen tabs switch the logical screen for page rules (home, cart, profile, inbox).
| Control | Action |
|---|---|
| Screen tabs | Updates current screen for in-app targeting |
| Track event | Sends a test track() call |
| Track screen view | Sends a screen view |
| Register device token | Registers the token in the text field (use a real FCM/APNs token for push) |
| Sync in-app | Fetches in-app messages and routes by render_type |
| Clear identity | Logs out and returns to config |
Render types
render_type | Example component |
|---|---|
modal | InAppModal full-screen overlay |
banner | InAppBanner top strip |
inline | InAppInlineCard in scroll list |
inbox_card | Same inline card (use Inbox tab) |
Listener + manual sync both route through the same switch (renderType) handler.
Step 5 — Test push (optional)
- Register a real FCM or APNs token (step 4).
- Note the person ID from the config screen.
- In the OpenCDP dashboard, use Test push notification → Test by User ID with that person ID.
Verify it worked
- Status text shows
OKafter each action - With
debug: true, native logs show successful API calls - In-app sync returns a count or displays a message