Skip to main content
@clariodesk/react-native mirrors the Flutter SDK 1:1: device-is-identity auth, live updates over Centrifugo/SSE, presence, read receipts, typing, push, attachments, and CSAT. Two integration modes, one install — headless methods, or the prebuilt @clariodesk/react-native/ui chat.

​
Install

npm install @clariodesk/react-native
# secure RNG — required; import once at app entry (see below)
npm install react-native-get-random-values
Then pick the secure-storage peer for your stack: 
npx expo install expo-secure-store   # Expo
npm install react-native-keychain    # bare RN
See installation for the Expo config plugin, attachment pickers, and the full peer-dependency matrix.

​
Headless quick start

// At the very top of index.js — before anything else:
import 'react-native-get-random-values';

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

// 1. Once at app start. First launch generates the device key + registers;
//    later launches reuse it. Realtime defaults to Centrifugo, falls back to SSE.
await ClarioDesk.init({ apiKey: 'pk_live_…' });

// 2. After your own auth knows the user (metadata only — the device key is the
//    real identity, so this grants no access).
await ClarioDesk.identify({ externalId: user.id, email: user.email });

// 3. Writes are imperative + optimistic.
const { ticket } = await ClarioDesk.createTicket({ subject: '', body: 'Upload is broken' });
await ClarioDesk.sendMessage(ticket.id, 'Still happening on 1.4.2');

// 4. Reads are live. subscribe* returns an unsubscribe function.
const off = ClarioDesk.subscribeMessages(ticket.id, (messages) => render(messages));

// 5. On sign-out / user switch.
await ClarioDesk.reset();

​
React hooks

Idiomatic state binding (not UI) lives in a separate entry so the core has no React dependency: 
import {
  useTickets, useMessages, useTyping, useAgentPresence,
  useConnection, useSync, usePushOpened,
} from '@clariodesk/react-native/hooks';

const { tickets, loading } = useTickets();
const { messages } = useMessages(ticketId);
const supportTyping = useTyping(ticketId);
const agentOnline = useAgentPresence();
const conn = useConnection(); // 'connecting' | 'connected' | 'reconnecting' | 'disconnected' | 'fatal'
A message with pending: true is optimistic (“sending…”); failed: true means the send was rejected — render tap-to-retry with ClarioDesk.retryMessage(m). An offline send stays pending and auto-flushes on reconnect (durable outbox).

Installation & Expo

Config plugin, dev build vs Expo Go, attachment pickers.

Prebuilt UI

Drop-in themeable chat — @clariodesk/react-native/ui.