Skip to content

Commit 7743ad0

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 d820799 commit 7743ad0

2 files changed

Lines changed: 104 additions & 8 deletions

File tree

README.md

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -115,14 +115,20 @@ 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.example` 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+
See [`example/README.md`](./example/README.md) for the full walkthrough.
125+
- If you prefer to initialize natively instead, commented reference implementations live in
126+
[`MainApplication.kt`](./example/android/app/src/main/java/com/klaviyoreactnativesdkexample/MainApplication.kt)
127+
and [`AppDelegate.mm`](./example/ios/KlaviyoReactNativeSdkExample/AppDelegate.mm).
128+
- Push notifications are disabled by default. To enable them, add your Firebase config files as described
129+
in [`example/README.md`](./example/README.md#firebase-setup). Without those files the app runs fine —
130+
the push section is simply disabled and the rest of the demo works as usual.
131+
- From the project's root directory, use the following commands to start a metro server and run the example app.
126132
- `yarn example start` - to start the metro server
127133
- `yarn example android` - to run the example app on an Android emulator or device
128134
- `yarn example ios` - to run the example app on an iOS simulator

example/README.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
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

Comments
 (0)