React Native push - ClarioDesk

Push is a separate package (@clariodesk/react-native-push), so Firebase’s native code never autolinks into a host that doesn’t want it. Your app owns the messaging plugin; the SDK receives tokens through a PushTokenProvider seam.

Install

npm install @clariodesk/react-native-push \
  @react-native-firebase/app @react-native-firebase/messaging

Wire the token provider

import { ClarioDesk } from '@clariodesk/react-native';
import { FirebaseTokenProvider } from '@clariodesk/react-native-push';

await ClarioDesk.init({
  apiKey: 'pk_live_…',
  pushTokenProvider: new FirebaseTokenProvider(),
});

Route messages in your background handler

In your shared background/foreground handler, hand ClarioDesk messages back to the SDK so they don’t collide with your app’s own notifications:

import messaging from '@react-native-firebase/messaging';
import { ClarioDesk } from '@clariodesk/react-native';

messaging().setBackgroundMessageHandler(async (msg) => {
  if (ClarioDesk.isClarioMessage(msg.data ?? {})) return; // ours, the SDK handles it
  /* your app's own handling */
});

Registering the background handler in index.js at startup is the #1 push setup-failure cause. It must run at app entry, not inside a component, or background messages are silently dropped.

Route notification taps

0.3.0+ payloads contain an opaque delivery handle, never a ticket id. Resolve it through the signed SDK and route the authorized result:

const target = await ClarioDesk.resolvePushTarget(data);
if (target?.kind === 'ticket') {
  navigation.navigate('SupportTicket', { ticketId: target.ticketId });
} else if (target?.kind === 'inbox') {
  navigation.navigate('SupportInbox');
}

Do not read data.ticketId or payload.ticketId. The private target comes only from resolvePushTarget after device, identity, app, customer, and ticket authorization are rechecked. Wire both background and killed-app opens:

// Background → tap.
messaging().onNotificationOpenedApp(async (message) => {
  await routeClarioPush(message.data ?? {});
});

// Killed → tap. Run after ClarioDesk.init and navigationRef.isReady().
const initial = await messaging().getInitialNotification();
if (initial) await routeClarioPush(initial.data ?? {});

For prebuilt UI, import and call openFromPush(data) from @clariodesk/react-native/ui; it resolves and opens the exact destination.

Custom-screen attention

The prebuilt inbox/thread tracks focus automatically. For custom navigation, mark only the route the user can actually see:

import { useIsFocused } from '@react-navigation/native';
import { useVisibleSupportSurface } from '@clariodesk/react-native/hooks';

function SupportThread({ ticketId }: { ticketId: string }) {
  useVisibleSupportSurface({ kind: 'ticket', ticketId }, useIsFocused());
  // …
}

Use { kind: 'inbox' } on the support inbox. Imperative/custom routers may call ClarioDesk.setVisibleSupportSurface(...) on focus and ClarioDesk.clearVisibleSupportSurface() on blur. The SDK clears remotely on background and restores on resume only while the same route remains focused.

Preferences

const prefs = await ClarioDesk.getNotificationPreferences();
await ClarioDesk.setNotificationPreferences({ ...prefs, agentReplies: true });

Remote push is not available in Expo Go. Use a dev build / EAS for push. The attention-aware backend never uses app-wide presence to suppress push. Only a focused inbox/matching ticket plus an acknowledgement of that rendered delivery suppresses its banner. Everywhere else alerts immediately; a stale lease can delay fallback by at most two seconds. See the push concept page.

​Install

​Wire the token provider

​Route messages in your background handler

​Route notification taps

​Custom-screen attention

​Preferences

Install

Wire the token provider

Route messages in your background handler

Route notification taps

Custom-screen attention

Preferences