React Native

@aw-chat/react-native renders the SDK with native components only — View, FlatList, TextInput, Modal, react-native-svg. No WebView.

Install

pnpm add @aw-chat/react-native react-native-svg lottie-react-native

• react-native-svg — peer (already present in Expo apps).
• lottie-react-native — peer for animated channel reactions.

Mount

import { AWChat } from "@aw-chat/react-native";

export function SupportScreen() {
  return (
    <AWChat
      userId={user.id}
      sessionToken={user.token}
      serverUrl="https://chat.example.com"
      telemetry={{
        appVersion: "6.1.4",
        hardwareId: "iPhone15,2",
        osVersion: "iOS 17.4",
        deviceLang: "ru",
      }}
      fcmToken={fcmToken}
      onPickFiles={pickFiles}
      theme="light"
      locale="ru"
      onSessionExpired={refreshToken}
    />
  );
}

Render inside a flex container (e.g. SafeAreaView with flex: 1).

Attachments (onPickFiles)

On native there is no hidden <input type="file">. The host must pass onPickFiles or the attach control stays hidden and uploads cannot start.

onPickFiles={async () => {
  const r = await ImagePicker.launchImageLibraryAsync({ allowsMultipleSelection: true });
  if (r.canceled) return [];
  return r.assets.map((a) => ({
    uri: a.uri,
    name: a.fileName ?? "upload",
    type: a.mimeType ?? "application/octet-stream",
    size: a.fileSize ?? 0,
  }));
}}

Return { uri, name, type, size }[]. See Props.

Navigation

The SDK owns internal navigation (hub → chat / ticket / complaint / channel). You do not wire a navigator for inner screens.

Back is handled inside the SDK:

• Android hardware / system gesture back pops overlays → inner screens → hub.
• iOS (and Android) left-edge swipe does the same.
• At the hub (or welcome gate), back fires onClose — pass it so the host can dismiss the Support screen instead of closing the whole app.

<Stack.Screen
  name="Support"
  options={{ gestureEnabled: false }} // disable host swipe-back while Support is open
/>

<AWChat onClose={() => navigation.goBack()} /* … */ />

AW Channel

Native feed parity with web: posts, rich text, media, reactions, views, comments, buttons. Data for posts/comments is Postgres via your backend — not Intercom (Data model).

Push (FCM)

Pass fcmToken to register. On logout, unmount the component (or call teardown from @aw-chat/core). Map push payloads to initialRoute + targetId when remounting.

Account switch

When the signed-in userId / sessionToken changes, remount <AWChat /> (or ensure props update so the live store re-initializes). Otherwise channel/comment caches from the previous user can linger for the session.

Offline

The SDK backs off polling on network failure and shows a session-expired panel on 401. A dedicated offline panel needs optional @react-native-community/netinfo.

Expo

Works with Expo (SDK 52+). examples/react-native is an Expo app with a react-native-web preview.