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 them: npx expo install @react-native-async-storage/async-storage npx expo install react-native-svg react-native-safe-area-context # or, in a bare React Native app: npm install @react-native-async-storage/async-storage npm install react-native-svg react-native-safe-area-context
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

The quickest option is BigRadar's own floating chat bubble — the same mark as the web widget's launcher, bottom-right by default. It takes your workspace colour and shows the unread count by itself:

App.tsx

tsx

import {
  BigRadarLauncher,
  BigRadarMessenger,
} from '@bigradar/bigradar-react-native';

<BigRadarMessenger />
<BigRadarLauncher />

If it lands under a tab bar, move it with bottomOffset and rightOffset(20 each by default). Prefer your own "Help" button? Leave the bubble out, open the messenger with present(), and show the unread count yourself:

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.

In-app reply toast

A reply can arrive while the visitor is on another screen of your app — the app is open, so no push goes out. Mount <BigRadarInAppNotification /> once next to the messenger and it shows a toast for that reply: it hides after 5 seconds, and tapping it opens the conversation.

App.tsx

tsx

import {
  BigRadarInAppNotification,
  BigRadarMessenger,
} from '@bigradar/bigradar-react-native';

<BigRadarMessenger />
<BigRadarInAppNotification />

Pass topOffset if it lands under your status bar or header.

Push notifications

A visitor gets pushed a notification when an agent 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);
});

Read receipts & missed replies

Nothing to set up. In the inbox your team sees Deliveredunder a reply once it reaches the visitor's phone, and Seen once they open the chat on it — the same as for web visitors.

A reply the visitor still hasn't seen after 30 seconds is emailed to them, if they have an email address — passed to loginUser(), or typed into the chat. Replies close together go out in one email, at most one every 5 minutes per conversation. Both need SDK 1.2.2 or newer.