Skip to content

Commit 38cf2b3

Browse files
evan-masseauclaude
andcommitted
docs(example): update READMEs for JS-first init and Firebase push setup
Root README: rewrite the example-app section to reflect the JS-first initialization flow (API key via .env, Firebase push optional) instead of the removed initializeKlaviyoFromNative toggle. example/README.md: new standalone setup guide covering .env configuration, iOS Firebase setup (GoogleService-Info.plist + pod install), Android Firebase setup (google-services.json vs the shipped .template), and the push-disabled path (app runs cleanly without Firebase configured). Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
1 parent a3d7d0a commit 38cf2b3

2 files changed

Lines changed: 111 additions & 8 deletions

File tree

README.md

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -115,14 +115,22 @@ To run the example app:
115115
- Run `yarn install --immutable` from the root directory
116116
- Navigate to the `example` directory and run `bundle install`
117117
- Navigate to the `example/ios` directory and run `bundle exec pod install`
118-
- Android configuration:
119-
- To initialize Klaviyo from the native layer, open `example/android/gradle.properties` and follow the
120-
instructions to set your `publicApiKey` and verify `initializeKlaviyoFromNative` is enabled.
121-
- If you wish to run the Android example app with push/firebase, you'll need to copy a `google-services.json`
122-
file into `example/android/app/src` and update the `applicationId` in `app/build.gradle` to match your application ID.
123-
Then, open `example/android/gradle.properties` and follow the instructions to enable `useNativeFirebase`.
124-
This is disabled by default because the app will crash on launch without a `google-services.json` file.
125-
- From the project's root directory, use the following commands start a metro server and run the example app.
118+
- Configure your public API key:
119+
- The example app initializes the SDK from JavaScript/TypeScript via an `.env` file
120+
(loaded with [`react-native-dotenv`](https://github.com/goatandsheep/react-native-dotenv)).
121+
Copy `example/.env.template` to `example/.env` and set your `KLAVIYO_API_KEY`.
122+
`.env` is gitignored. If you skip this step the app still runs and shows a friendly
123+
warning banner — non-push features work without an API key.
124+
If Metro was already running when you set up `.env`, restart it with
125+
`yarn start --reset-cache` so `react-native-dotenv` picks up the new value.
126+
See [`example/README.md`](./example/README.md) for the full walkthrough.
127+
- If you prefer to initialize natively instead, commented reference implementations live in
128+
[`MainApplication.kt`](./example/android/app/src/main/java/com/klaviyoreactnativesdkexample/MainApplication.kt)
129+
and [`AppDelegate.mm`](./example/ios/KlaviyoReactNativeSdkExample/AppDelegate.mm).
130+
- Push notifications are disabled by default. To enable them, add your Firebase config files as described
131+
in [`example/README.md`](./example/README.md#firebase-setup). Without those files the app runs fine —
132+
the push section is simply disabled and the rest of the demo works as usual.
133+
- From the project's root directory, use the following commands to start a metro server and run the example app.
126134
- `yarn example start` - to start the metro server
127135
- `yarn example android` - to run the example app on an Android emulator or device
128136
- `yarn example ios` - to run the example app on an iOS simulator

example/README.md

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
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.template .env`
13+
2. Edit `.env` and set `KLAVIYO_API_KEY=` to your actual public API key
14+
3. Restart Metro with `yarn start --reset-cache` so the babel plugin picks up the new value
15+
16+
> **If you hit "Klaviyo API key not configured" after setting up `.env`:** Metro inlines
17+
> `.env` values at bundle time via `react-native-dotenv`. If Metro was already running when
18+
> you created or edited `.env`, it will serve a cached bundle with `KLAVIYO_API_KEY` still
19+
> undefined. Stop Metro and restart it with `yarn start --reset-cache` (from `example/`).
20+
21+
Notes:
22+
23+
- `.env` is gitignored — only `.env.template` is checked in.
24+
- Without a `.env` file the app still builds and runs; it shows a friendly warning
25+
banner and the non-push features (profile, events, in-app forms, geofencing)
26+
continue to work without a key.
27+
28+
### 2. Install Dependencies
29+
30+
```bash
31+
yarn install
32+
cd ios && pod install && cd ..
33+
```
34+
35+
### 3. Run the App
36+
37+
```bash
38+
# Start Metro bundler
39+
yarn start
40+
41+
# Run iOS
42+
yarn ios
43+
44+
# Run Android
45+
yarn android
46+
```
47+
48+
## Push Notifications
49+
50+
**Push is disabled by default.** The example app launches without any Firebase
51+
configuration — the rest of the demo (profile management, events, in-app forms,
52+
geofencing) still works, and the Push Notifications section just shows setup
53+
instructions until you wire Firebase up.
54+
55+
Push notifications are handled via `@react-native-firebase/messaging` in the
56+
JavaScript layer. This is the recommended approach for React Native apps — the
57+
SDK is initialized from JS, and Firebase manages push tokens cross-platform.
58+
59+
### Firebase Setup
60+
61+
To enable push notifications, add your Firebase configuration files:
62+
63+
**iOS:**
64+
65+
1. Add `GoogleService-Info.plist` to `example/ios/KlaviyoReactNativeSdkExample/`
66+
2. Run `pod install` from the `example/ios/` directory
67+
68+
**Android:**
69+
70+
1. Replace `example/android/app/google-services.json.template` with a real
71+
`google-services.json` from your Firebase project.
72+
- The template is a placeholder structure checked into the repo so that the
73+
Android build succeeds without real Firebase config. It lets the app run
74+
(with push simply disabled) on a cold clone. Replace it with a real
75+
`google-services.json` to enable push on Android.
76+
- `google-services.json` itself is gitignored — only the template is checked in.
77+
2. Ensure `applicationId` in `build.gradle` matches your Firebase project.
78+
79+
The app automatically detects Firebase and enables push features once the config
80+
files are in place.
81+
82+
### Native Push (Alternative)
83+
84+
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.
85+
86+
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.
87+
88+
## Features Demonstrated
89+
90+
- **Profile Management** — Set email, phone, external ID individually or together; reset profile
91+
- **Event Tracking** — Create test events and Viewed Product events
92+
- **In-App Forms** — Register/unregister with configurable session timeout
93+
- **Geofencing** — Location permission flow, register/unregister, list current geofences
94+
- **Push Notifications** — Firebase-based permission request, token display, badge count (iOS)
95+
- **Deep Linking** — Universal tracking link handling via `Linking` API

0 commit comments

Comments
 (0)