End-to-end React Native integration

Prerequisites

Node.js 18+ and a React Native 0.76 or higher project (New Architecture)
Xcode 16.0 or later and CocoaPods, for the iOS build
Android Studio with Gradle 8.4+, for the Android build
A physical iOS device and a physical Android device or emulator with Google Play Services (push notifications do not work on the iOS Simulator)
A ZMP account with mobile app registration access
An Apple Developer account with push notification entitlements, and a Firebase project with Cloud Messaging enabled

Step 1: Register your app in ZMP

Follow the Mobile App Registration guide to register your app. Because a React Native app ships on two platforms, register each one separately:

iOS: register using your app's Bundle ID and upload your APNs .p8 certificate to obtain a clientSiteId / clientSecret pair for iOS.
Android: register using your app's Package Name (Application ID) and upload your Firebase Private Key JSON to obtain a clientSiteId / clientSecret pair for Android.

Step 2: Add the SDK

Install the package:

yarn add zetakit_reactnative

Install the native iOS dependencies:

cd ios && pod install && cd ..

For Android, open android/app/build.gradle and ensure minSdkVersion is 24 or higher.

For detailed installation instructions, see Installation.

Step 3: Initialize the SDK

Initialize the SDK once, as early as possible, typically inside a useEffect hook in your root component:

import React, { useEffect } from 'react';
import { Platform } from 'react-native';
import ZetaClient, { ZTRegion, ZTAppEnvironment, type ZTConfig } from 'zetakit_reactnative';

const App = () => {
  useEffect(() => {
    const config: ZTConfig = {
      clientSiteId: Platform.OS === 'ios' ? 'your-ios-site-id' : 'your-android-site-id',
      clientSecret: Platform.OS === 'ios' ? 'your-ios-secret' : 'your-android-secret', // load from secure storage
      region: ZTRegion.US,
      appGroupId: 'group.com.yourcompany.yourapp', // iOS only
      optIn: true,
      appEnvironment: ZTAppEnvironment.PRODUCTION,
    };

    ZetaClient.initialize(config, () => {
      console.log('Zeta SDK is ready');
    });
  }, []);

  return <YourAppRoot />;
};

export default App;

For full configuration options, see Getting Started.

Step 4: Identify a user

After the user logs in, set their identity:

ZetaClient.user.build((user) => {
  user.uid = 'user-123';
  user.email = { email: '[email protected]', additionalInfo: {} };
});

For the full identity API, see Contact Management.

Step 5: Send a custom event

Track a meaningful action in your app:

ZetaClient.events.send('product_viewed', {
  product_id: 'SKU-456',
  category: 'shoes',
});

Step 6: Set up push notifications (iOS)

Add the ZetaNotificationService pod to your Notification Service Extension target in your ios/Podfile, to enable delivery tracking and rich notifications:

target 'NotificationServiceExtension' do
  pod 'ZetaNotificationService'
end

Run pod install again after updating the Podfile. Once your native APNs registration is in place, forward the resulting device token to the SDK:

ZetaClient.user.updateDeviceToken(deviceTokenString);

For the complete native APNs setup, including AppDelegate token registration, see Push Notifications.

Step 7: Set up push notifications (Android)

Add the Firebase Messaging dependency to android/app/build.gradle and place your google-services.json in android/app/:

dependencies {
    implementation("com.google.firebase:firebase-messaging:24.1.0")
}

The SDK's built-in push service automatically captures and forwards the FCM device token — no manual updateDeviceToken call is required unless you implement a custom FirebaseMessagingService. For Android 13+, request the POST_NOTIFICATIONS permission at runtime.

For the complete native FCM setup, see Push Notifications.

Step 8: Verify in ZMP

Retrieve your device's BSIN:

import { Platform, NativeEventEmitter, DeviceEventEmitter } from 'react-native';
import ZetaClient, { ZetaCoreEvents } from 'zetakit_reactnative';

const eventEmitter = Platform.select({
  ios: new NativeEventEmitter(ZetaClient.bridge),
  android: DeviceEventEmitter,
});

eventEmitter?.addListener(ZetaCoreEvents.IdentityDelegate, (event) => {
  console.log('BSIN:', event.bsin);
});

ZetaClient.getCachedBSIN();

Open ZMP and navigate to your app's integration settings.
Use the Test Integration feature with your device's BSIN.
Send a test push notification.
Confirm the notification appears on your device.
Tap the notification and verify the message_clicked event in ZMP reporting.

Next steps

In-App Messaging -- add foreground messages.
App Inbox -- add a persistent message store.
Data & Privacy -- review privacy requirements before release.

On this page