|
| 1 | +# Klaviyo React Native SDK Example App |
| 2 | + |
| 3 | +This example app demonstrates the full API surface of the Klaviyo React Native SDK, including profile management, event tracking, in-app forms, geofencing, and push notifications. |
| 4 | + |
| 5 | +## Getting Started |
| 6 | + |
| 7 | +### 1. Configure Your API Key |
| 8 | + |
| 9 | +The app loads your Klaviyo public API key from a gitignored `.env` file via |
| 10 | +[`react-native-dotenv`](https://github.com/goatandsheep/react-native-dotenv). |
| 11 | + |
| 12 | +1. Copy the template: `cp .env.example .env` |
| 13 | +2. Edit `.env` and set `KLAVIYO_API_KEY=` to your actual public API key |
| 14 | +3. Restart Metro so the babel plugin picks up the new value |
| 15 | + |
| 16 | +Notes: |
| 17 | + |
| 18 | +- `.env` is gitignored — only `.env.example` is checked in. |
| 19 | +- Without a `.env` file the app still builds and runs; it shows a friendly warning |
| 20 | + banner and the non-push features (profile, events, in-app forms, geofencing) |
| 21 | + continue to work without a key. |
| 22 | + |
| 23 | +### 2. Install Dependencies |
| 24 | + |
| 25 | +```bash |
| 26 | +yarn install |
| 27 | +cd ios && pod install && cd .. |
| 28 | +``` |
| 29 | + |
| 30 | +### 3. Run the App |
| 31 | + |
| 32 | +```bash |
| 33 | +# Start Metro bundler |
| 34 | +yarn start |
| 35 | + |
| 36 | +# Run iOS |
| 37 | +yarn ios |
| 38 | + |
| 39 | +# Run Android |
| 40 | +yarn android |
| 41 | +``` |
| 42 | + |
| 43 | +## Push Notifications |
| 44 | + |
| 45 | +**Push is disabled by default.** The example app launches without any Firebase |
| 46 | +configuration — the rest of the demo (profile management, events, in-app forms, |
| 47 | +geofencing) still works, and the Push Notifications section just shows setup |
| 48 | +instructions until you wire Firebase up. |
| 49 | + |
| 50 | +Push notifications are handled via `@react-native-firebase/messaging` in the |
| 51 | +JavaScript layer. This is the recommended approach for React Native apps — the |
| 52 | +SDK is initialized from JS, and Firebase manages push tokens cross-platform. |
| 53 | + |
| 54 | +### Firebase Setup |
| 55 | + |
| 56 | +To enable push notifications, add your Firebase configuration files: |
| 57 | + |
| 58 | +**iOS:** |
| 59 | + |
| 60 | +1. Add `GoogleService-Info.plist` to `example/ios/KlaviyoReactNativeSdkExample/` |
| 61 | +2. Run `pod install` from the `example/ios/` directory |
| 62 | + |
| 63 | +**Android:** |
| 64 | + |
| 65 | +1. Replace `example/android/app/google-services.json.template` with a real |
| 66 | + `google-services.json` from your Firebase project. |
| 67 | + - The template is a placeholder structure checked into the repo so that the |
| 68 | + Android build succeeds without real Firebase config. It lets the app run |
| 69 | + (with push simply disabled) on a cold clone. Replace it with a real |
| 70 | + `google-services.json` to enable push on Android. |
| 71 | + - `google-services.json` itself is gitignored — only the template is checked in. |
| 72 | +2. Ensure `applicationId` in `build.gradle` matches your Firebase project. |
| 73 | + |
| 74 | +The app automatically detects Firebase and enables push features once the config |
| 75 | +files are in place. |
| 76 | + |
| 77 | +### Native Push (Alternative) |
| 78 | + |
| 79 | +For apps that prefer to handle push tokens natively (e.g., brownfield apps), the native code in `AppDelegate.mm` and `MainApplication.kt` contains commented-out reference implementations. See those files for details. |
| 80 | + |
| 81 | +Note: `Klaviyo.handlePush(intent)` in `MainActivity.kt` is always required on Android — push open tracking depends on native intent handling regardless of how tokens are managed. |
| 82 | + |
| 83 | +## Features Demonstrated |
| 84 | + |
| 85 | +- **Profile Management** — Set email, phone, external ID individually or together; reset profile |
| 86 | +- **Event Tracking** — Create test events and Viewed Product events |
| 87 | +- **In-App Forms** — Register/unregister with configurable session timeout |
| 88 | +- **Geofencing** — Location permission flow, register/unregister, list current geofences |
| 89 | +- **Push Notifications** — Firebase-based permission request, token display, badge count (iOS) |
| 90 | +- **Deep Linking** — Universal tracking link handling via `Linking` API |
0 commit comments