React Native Quickstart

This guide provides the fastest path to a working Bubbl integration. Bubbl uses a native bridge architecture, so both JavaScript and native layers must be wired.

1) Install dependencies

npm install @bubbl-tech/react-native-sdk
npm install react-native-get-location react-native-maps react-native-safe-area-context react-native-webview

2) Configure native bridge modules

Before JS code can call Bubbl APIs, configure the native bridge:

• Android: follow Android Setup and apply the package templates in templates/android.
• iOS: follow iOS Setup and add BubblModule.swift/.m from templates/ios.

More details are in the Installation Guide.

3) Boot Bubbl from React Native

Once native modules are linked, initialize the SDK in your root component (for example App.tsx):

import { PermissionsAndroid, Platform } from 'react-native';
import { BubblBridge } from '@bubbl-tech/react-native-sdk';

async function bootBubbl(apiKey: string, environment: 'STAGING' | 'PRODUCTION' | 'NIGHTLY') {
  await BubblBridge.boot(apiKey, environment, {
    segmentationTags: [],
    geoPollIntervalMs: 300000,
    defaultDistance: 25,
  });

  if (Platform.OS === 'android') {
    const perms = await BubblBridge.requiredPermissions();
    await PermissionsAndroid.requestMultiple(perms as any);
  } else {
    const granted = await BubblBridge.notificationGranted();
    if (!granted) {
      await BubblBridge.requestPushPermission();
    }
  }

  await BubblBridge.startLocationTracking();
  BubblBridge.startGeofenceUpdates();
}

4) Subscribe to data streams

Bubbl is data-driven. Subscribe to notifications and geofence streams to drive your UI.

const notifSub = BubblBridge.onNotification(payload => {
  console.log('bubbl_notification', payload);
});

const geoSub = BubblBridge.onGeofence(snapshot => {
  console.log('campaign count', snapshot.stats.campaignsTotal);
});

// notifSub.remove();
// geoSub.remove();