Docs

React Native Quickstart

Install CircleBox RN bridge and optional cloud uploader from release tarballs.

Install (Release .tgz)

CircleBox RN packages are installable today from release assets.

1) Download release assets (v0.3.1)

  • circlebox-react-native-0.3.1.tgz
  • circlebox-cloud-react-native-0.3.1.tgz (optional cloud uploader)

2) Install from app root

text
npm install ./circlebox-react-native-0.3.1.tgz
npm install ./circlebox-cloud-react-native-0.3.1.tgz

3) iOS native install

text
cd ios
pod install --repo-update
cd ..

4) Expo prebuild only

For Expo prebuild apps, add plugin:

text
{
  "expo": {
    "plugins": ["circlebox-react-native"]
  }
}

Then run:

text
npx expo prebuild --clean

Core Setup

Initialize once at app bootstrap.

Bare React Native (index.ts / index.js)

text
import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
import { CircleBox } from "circlebox-react-native";

async function bootstrap() {
  await CircleBox.start({
    bufferCapacity: 200,
    installReactNativeErrorHooks: true,
  });
  AppRegistry.registerComponent(appName, () => App);
}

void bootstrap();

Expo (App.tsx)

text
import { useEffect } from "react";
import { CircleBox } from "circlebox-react-native";

export default function App() {
  useEffect(() => {
    void CircleBox.start({
      bufferCapacity: 200,
      installReactNativeErrorHooks: true,
    });
  }, []);

  return null;
}

Then use APIs anywhere in your app:

text
import { CircleBox } from "circlebox-react-native";

await CircleBox.breadcrumb("checkout_started", { flow: "standard" });

Pending Crash Export

text
if (await CircleBox.hasPendingCrashReport()) {
  const files = await CircleBox.exportLogs(["json", "csv", "json_gzip", "summary"]);
  console.log(files);
}

Optional Cloud Upload

text
import * as CircleBoxCloud from "circlebox-cloud-react-native";

await CircleBoxCloud.start({
  endpoint: "https://circlebox.seunjeremiah.workers.dev",
  ingestKey: "paste_ingest_key_from_control_plane",
  flushIntervalSec: 15,
  immediateFlushOnHighSignal: true,
});

Android cloud mode permissions:

text
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Key rules:

  • ingestKey must be cb_live_*
  • usageBeaconKey must be cb_usage_* when usage beacon is enabled
PreviousFlutter Quickstart NextCloud Quickstart