Resources

Resources for building with the Stream Chat React Native SDK, beyond these docs.

Stream Chat React Native GitHub

The SDK's source, its issues and its releases. While v10 is a release candidate, its source is on the V10 branch. The examples/ folder holds runnable apps:

• SampleApp, a full-featured messaging app built with React Native CLI and React Navigation.
• ExpoMessaging, a messaging app built with Expo and Expo Router.
• ExpoChatGPTSample, a ChatGPT-style assistant built with Expo and stream-chat-expo/ai-components: streamed Markdown answers, an "AI is thinking" indicator, and a composer with speech-to-text.

The apps are workspaces of the repository. Run yarn install once at the repository root, then start an app with yarn workspace sampleapp ios, yarn workspace ExpoMessaging ios or yarn workspace expochatgptsample ios (or android).

Stream Chat demos

Demo apps built with Stream Chat.

React Native samples

Clones of Slack, WhatsApp and iMessage, and a live location sample. They're built with version 5 of the SDK, so their code doesn't match the v10 API.

React Native tutorials

Guided builds of a chat app, step by step, with React Native CLI or with Expo. They're written for v9. For v10, follow the Quick start.

Stream JS Client

The docs of stream-chat, the JavaScript client the SDK builds on, and of the Chat API it calls. They describe stream-chat 9, so some of their samples differ from version 10. The state layer of stream-chat 10, which v10 of the SDK uses, is in this site's State section, and its changes from version 9 are in stream-chat v9 to v10 breaking changes. The client's source is on GitHub.

These pages of the API docs come up often when building with the SDK:

• Query channels: the filters and sort fields a channel list can use.
• Unread: how the server counts unread messages.
• Permissions reference: the actions each role can be allowed.
• Moderation: the settings that keep a chat safe, such as who may post links, which file types are allowed, and slow mode.
• Rate limits: the API's request limits.
• Best practices and livestream best practices.
• Webhook events: the events your server can receive.

Stream Chat API tutorial

An interactive tour of the Chat API.

Going live checklist

Check these before you release an app built with the SDK.

Tokens

Development tokens turn off authentication, so use them only while developing. In production, have your server issue a token for each user, and give useCreateChatClient a token provider as tokenOrProvider, so the client gets a new token when one expires. Memoize the provider or declare it outside the component: the hook creates a new client when tokenOrProvider changes.

Secrets

Never put your app's API secret in the app. Anyone with the app can read it from the bundle and act as your server, including deleting data. Only the API key belongs in the app.

Signing out

With offline support, the local database belongs to the user who was connected. When the user signs out, clear the database, then disconnect, and wait for both before another user signs in:

import type { StreamChat } from "stream-chat";

export const signOut = async (client: StreamChat) => {
  await client.offlineDb?.resetDB();
  await client.disconnectUser();
};

With useCreateChatClient, unmount the component that calls the hook after client.offlineDb.resetDB() resolves: the hook disconnects the user when it unmounts. See Offline support. To keep the database encrypted on the device, see Encrypting the offline database.

Custom components

A custom component renders once for each message, or each channel in a list, so its re-renders add up. Read state with useStateStore and selectors defined at module scope, select only the fields the component shows, and wrap presentational components in React.memo. See Reading state in components and Performance.

Platforms

• Add the iOS usage descriptions and the Android permissions for each feature you ship, such as the camera, the photo library and the microphone. Installation lists them.
• Test push notifications on both platforms, with the app in the background and closed. Chat closes the WebSocket while the app is in the background. For apps created before 2022-01-18, the server sends push notifications only while the user has no open socket; newer apps get them whether the user is online or not. See Push notifications.
• Test a release build. Problems such as missing native modules or Babel plugins that conflict can appear only there.

New Architecture

The SDK needs the New Architecture: React Native 0.79 or later with the New Architecture turned on, and for Expo apps, Expo SDK 53 or later. The old architecture isn't supported: react-native-teleport, which OverlayProvider uses for the message menu, is a Fabric component.

With React Native CLI, use at least these versions of the packages you install:

With Expo, install each package with npx expo install, which picks the version that matches your Expo SDK.

React Compiler

The SDK works with React Compiler, which memoizes your components at build time. The SampleApp and ExpoMessaging example apps are built with it.

In a React Native CLI app, install the Babel plugin:

yarn add -D babel-plugin-react-compiler

Then add it to babel.config.js as the first plugin. The Reanimated plugin stays last:

module.exports = {
  presets: [
    // your presets
  ],
  plugins: [
    "babel-plugin-react-compiler", // must run first
    // your other plugins
    "react-native-worklets/plugin",
  ],
};

In an Expo app, turn on experiments.reactCompiler in app.json, as React Compiler in Expo describes:

{
  "expo": {
    "experiments": {
      "reactCompiler": true
    }
  }
}

Test a release build after you turn it on, and profile the message list screens to check what it changes.

React and React Native documentation

• React Native, on reactnative.dev.
• Passing data deeply with context: how the context the SDK's components share works.