React Native Quickstart

This page adds Bubbl to a React Native app.

Requirements

• React Native 0.76 or newer.
• Android API 27+.
• iOS 15+.
• Node and npm supported by your React Native project.
• Firebase configured if you want push notifications.

Install

npm install @bubblsdk/react-native-sdk@4.0.2

For iOS, install pods:

cd ios
pod install
cd ..

Boot the SDK

import { Bubbl } from '@bubblsdk/react-native-sdk';

export async function bootBubbl() {
  const result = await Bubbl.boot({
    apiKey: '<YOUR_BUBBL_API_KEY>',
    environment: 'production',
    enablePushHandling: true,
    enableLocationTracking: false,
  });

  console.log('Bubbl ready', result.ready);
}

Use production for the live Bubbl environment.

Android setup

Set your Android minimum SDK to 27 or newer. Configure Firebase in the Android app if you want push notifications.

On Android 13+, request notification permission before expecting visible notifications.

For Firebase push:

npm install @react-native-firebase/app @react-native-firebase/messaging

If your app uses Firebase Messaging and Bubbl SDK together, add the default notification channel metadata to android/app/src/main/AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <application>
        <meta-data
            android:name="com.google.firebase.messaging.default_notification_channel_id"
            android:value="bubbl_notifications"
            tools:replace="android:value" />
    </application>
</manifest>

iOS setup

Set your iOS deployment target to 15 or newer. Configure Push Notifications, Background Modes, APNs, and Firebase if you want push notifications.

Forward launch options and notification delegate events from your app setup if your app needs background notification handling.

Firebase token forwarding

Import Firebase Messaging:

import messaging, {
  type FirebaseMessagingTypes,
} from '@react-native-firebase/messaging';

Forward an FCM or APNs token after your app receives it:

const token = await messaging().getToken();
await Bubbl.registerPushToken(token);

Forward Firebase data payloads:

messaging().onMessage(async (remoteMessage: FirebaseMessagingTypes.RemoteMessage) => {
  const data = Object.fromEntries(
    Object.entries(remoteMessage.data ?? {}).map(([key, value]) => [
      key,
      String(value),
    ]),
  );
  await Bubbl.handleFirebasePayload(data);
});

First verification

const diagnostics = await Bubbl.diagnostics();
console.log('Bubbl diagnostics', diagnostics);

Expected signs of a healthy setup:

• sdkVersion is 4.0.2.
• booted is true after boot.
• platform is react-native.

Note about SDK events

Use the event APIs documented for your installed SDK package. If Bubbl support gives you a pre-release event replay instruction, confirm the package version before relying on it in your live app.