# Resources

> **Info:** This is release candidate documentation for **Stream Chat React Native SDK v10**. For the latest stable version, see the [latest version (v9)](https://getstream.io/chat/docs/sdk/react-native/).

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

## [Stream Chat React Native GitHub](https://github.com/GetStream/stream-chat-react-native)

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](https://getstream.io/chat/demos/messaging/)

Demo apps built with Stream Chat.

## [React Native samples](https://github.com/GetStream/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](https://getstream.io/chat/sdk/react-native/tutorial/cli/) or with [Expo](https://getstream.io/chat/sdk/react-native/tutorial/expo/). They're written for v9. For v10, follow the [Quick start](https://getstream.io/chat/docs/sdk/react-native/v10/getting-started/quick-start/).

## [Stream JS Client](https://getstream.io/chat/docs/javascript/)

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](https://getstream.io/chat/docs/sdk/react-native/v10/state/state-and-entities/reactive-state/) section, and its changes from version 9 are in [stream-chat v9 to v10 breaking changes](https://github.com/GetStream/stream-chat-js/blob/release-v10/ai-docs/v10-breaking-changes.md). The client's source is on [GitHub](https://github.com/GetStream/stream-chat-js).

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

- [Query channels](https://getstream.io/chat/docs/javascript/query-channels/): the filters and sort fields a channel list can use.
- [Unread](https://getstream.io/chat/docs/javascript/unread/): how the server counts unread messages.
- [Permissions reference](https://getstream.io/chat/docs/javascript/permissions-reference/): the actions each role can be allowed.
- [Moderation](https://getstream.io/chat/docs/javascript/moderation/): the settings that keep a chat safe, such as who may post links, which file types are allowed, and slow mode.
- [Rate limits](https://getstream.io/chat/docs/javascript/rate-limits/): the API's request limits.
- [Best practices](https://getstream.io/chat/docs/javascript/best-practices/) and [livestream best practices](https://getstream.io/chat/docs/javascript/livestream-best-practices/).
- [Webhook events](https://getstream.io/chat/docs/node/webhook-events/): the events your server can receive.

## [Stream Chat API tutorial](https://getstream.io/chat/tour/)

An interactive tour of the Chat API.

## Going live checklist

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

### Tokens

[Development tokens](https://getstream.io/chat/docs/javascript/tokens-and-authentication/) 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](https://getstream.io/chat/docs/javascript/tokens-and-authentication/#token-providers) 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:

```ts
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](https://getstream.io/chat/docs/sdk/react-native/v10/state/offline-support/offline-support/#reset-the-database-on-sign-out). To keep the database encrypted on the device, see [Encrypting the offline database](https://getstream.io/chat/docs/sdk/react-native/v10/state/offline-support/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](https://getstream.io/chat/docs/sdk/react-native/v10/ui/reading-state-in-components/) and [Performance](https://getstream.io/chat/docs/sdk/react-native/v10/features/app-experience/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](https://getstream.io/chat/docs/sdk/react-native/v10/getting-started/installation/#optional-features) 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](https://getstream.io/chat/docs/sdk/react-native/v10/features/app-experience/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](https://reactnative.dev/architecture/landing-page): 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:

| Package                                 | Version    |
| --------------------------------------- | ---------- |
| `@op-engineering/op-sqlite`             | `>=14.0.0` |
| `@react-native-camera-roll/camera-roll` | `>=7.9.0`  |
| `@react-native-clipboard/clipboard`     | `>=1.16.0` |
| `@react-native-community/netinfo`       | `>=11.3.1` |
| `@react-native-documents/picker`        | `>=10.1.1` |
| `@shopify/flash-list`                   | `>=2.1.0`  |
| `@shopify/react-native-skia`            | `>=2.0.0`  |
| `react-native-audio-recorder-player`    | `>=3.6.13` |
| `react-native-blob-util`                | `>=0.22.0` |
| `react-native-gesture-handler`          | `>=2.18.0` |
| `react-native-haptic-feedback`          | `>=2.3.0`  |
| `react-native-image-picker`             | `>=7.1.2`  |
| `react-native-nitro-sound`              | `>=0.2.9`  |
| `react-native-reanimated`               | `>=3.16.0` |
| `react-native-safe-area-context`        | `>=5.4.1`  |
| `react-native-share`                    | `>=11.0.0` |
| `react-native-svg`                      | `>=15.8.0` |
| `react-native-teleport`                 | `>=0.5.4`  |
| `react-native-video`                    | `>=6.18.0` |
| `victory-native`                        | `>=41.0.0` |

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](https://react.dev/learn/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:

```bash title="Terminal"
yarn add -D babel-plugin-react-compiler
```

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

```js title="babel.config.js"
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](https://docs.expo.dev/guides/react-compiler/) describes:

```json title="app.json"
{
  "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](https://reactnative.dev/docs/getting-started), on reactnative.dev.
- [Passing data deeply with context](https://react.dev/learn/passing-data-deeply-with-context): how the context the SDK's components share works.

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v10/resources/](https://getstream.io/chat/docs/sdk/react-native/v10/resources/).