React Native Usage Examples

This guide provides real-world implementation patterns for the Bubbl SDK within your React Native application.

SDK Boot and Permission Flow

The initialization of Bubbl should happen early, typically in your root component. This example demonstrates a "linear success" path for both Android and iOS.

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

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

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

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

Refreshing Campaigns and geofences

You can manually trigger a refresh of campaigns based on specific coordinates or the current location.

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

async function forceRefreshAt(lat: number, lng: number) {
  BubblBridge.refreshGeofence(lat, lng);
  await BubblBridge.forceRefreshCampaigns();

  const count = await BubblBridge.getCampaignCount();
  const hasCampaigns = await BubblBridge.hasCampaigns();

  console.log({ hasCampaigns, count });
}

User Identity and Segmentation

Set a unique identifier for the user and apply segmentation tags for targeted campaigns.

async function pushSegments() {
  const ok = await BubblBridge.updateSegments(['vip', 'early_access']);
  if (!ok) {
    throw new Error('Segment update failed');
  }
}

Fetch/refresh config data

Fetch cached configuration metadata or refresh the legal privacy text.

async function loadConfig() {
  const cfg = await BubblBridge.getCurrentConfiguration();
  const cachedPrivacy = await BubblBridge.getPrivacyText();
  const refreshedPrivacy = await BubblBridge.refreshPrivacyText();

  return { cfg, cachedPrivacy, refreshedPrivacy };
}

Handling Notifications and Surveys

Subscribe to incoming payloads and report interactions back to the SDK.

const notifSub = BubblBridge.onNotification(payload => {
  // show your custom modal
  console.log('notification payload', payload);
});

async function trackDelivered(notificationId: string, locationId: string) {
  await BubblBridge.trackSurveyEvent(notificationId, locationId, 'notification_delivered');
}

async function onSurveyModalOpen(notificationId: string, locationId: string) {
  await BubblBridge.trackSurveyEvent(notificationId, locationId, 'notification_delivered');
  await BubblBridge.trackSurveyEvent(notificationId, locationId, 'cta_engagement');
}

async function submitSurvey(notificationId: string, locationId: string) {
  const submitted = await BubblBridge.submitSurveyResponse(notificationId, locationId, [
    {
      question_id: 100,
      type: 'RATING',
      value: '5',
    },
    {
      question_id: 101,
      type: 'MULTIPLE_CHOICE',
      value: 'YES',
      choice: [{ choice_id: 1 }, { choice_id: 3 }],
    },
  ]);

  if (submitted) {
    // Match native behavior: close survey modal after a successful submit.
    closeModal();
  }
}

// cleanup
notifSub.remove();

Optional: stream logs to RN UI

Stream native SDK logs directly into your JavaScript console or UI for debugging.

const logSub = BubblBridge.onDeviceLog(snapshot => {
  console.log('device log lines', snapshot.lines);
});

await BubblBridge.startDeviceLogStream({
  intervalMs: 2500,
  maxLines: 80,
});

// later
BubblBridge.stopDeviceLogStream();
logSub.remove();