React Native

The same conversations, team and AI agent as your BigRadar web widget, reachable from your own mobile app — no separate API key pair, just the workspace ID you already use for the web install.

Install the package
Terminal
bash
npm install @bigradar/bigradar-react-native # or yarn add @bigradar/bigradar-react-native # also needed, if you don't already have it: npx expo install @react-native-async-storage/async-storage
Get your Workspace App ID
In the BigRadar dashboard, go to Settings → Web Messenger → Install setup. Copy the Workspace App ID shown there — it's the same ID the web install uses.
Initialize and mount the messenger
App.tsx
tsx
import { useEffect } from 'react'; import { BigRadar, BigRadarMessenger } from '@bigradar/bigradar-react-native'; function App() { useEffect(() => { BigRadar.initialize({ workspaceId: 'YOUR_WORKSPACE_ID' }); BigRadar.loginUnidentifiedUser(); }, []); return ( <> {/* ... your app ... */} <BigRadarMessenger /> </> ); }
Mount <BigRadarMessenger /> once, near the root of your app — like a toast provider. It renders nothing until you call BigRadar.present(), typically from your own "Help" or "Support" button.

Expo setup

Optional, but keeps the workspace ID in one place instead of duplicating it in app.json and your BigRadar.initialize() call:

app.json

json

{
  "expo": {
    "plugins": [
      ["@bigradar/bigradar-react-native", { "workspaceId": "YOUR_WORKSPACE_ID" }]
    ]
  }
}

Then read it back with expo-constants: Constants.expoConfig?.extra?.bigradar?.workspaceId. There's no native code for the plugin to configure — the SDK is pure JS, nothing to link.

Identifying a logged-in user

TypeScript

tsx

BigRadar.loginUser({
  id: user.id,
  name: user.name,
  email: user.email,
  attributes: { plan: 'growth' }, // any extra custom fields
});

// on sign-out:
BigRadar.logout();

Launch button & unread badge

There's no floating chat bubble injected over your UI the way the web widget adds one to a page. On mobile you trigger the messenger from your own entry point, and decide for yourself whether to show the unread count:

TypeScript

tsx

function SupportButton() {
  const [unread, setUnread] = useState(0);

  useEffect(() => {
    BigRadar.getUnreadConversationCount().then(setUnread);
    return BigRadar.addEventListener('unreadCountDidChange', setUnread);
  }, []);

  return (
    <TouchableOpacity onPress={() => BigRadar.present()}>
      <Text>Help</Text>
      {unread > 0 && <Badge>{unread}</Badge>}
    </TouchableOpacity>
  );
}

present() resets the count to 0 the moment the chat opens.

Push notifications

A visitor gets pushed a notification when an agent, bot, or your AI agent replies while the app is backgrounded, and tapping it deep-links straight into that conversation:

TypeScript

tsx

// Register once notification permission is granted:
const { data: token } = await Notifications.getExpoPushTokenAsync();
BigRadar.registerPushToken(token, Platform.OS === 'ios' ? 'ios' : 'android');

// Deep-link into the right conversation on tap:
Notifications.addNotificationResponseReceivedListener((response) => {
  const data = response.notification.request.content.data;
  BigRadar.handleNotificationTap(data);
});