# Overview

Built on the Stream Chat API, the Stream Chat React Native SDK provides ready-made, customizable UI components for React Native CLI and Expo so you can ship chat fast with minimal setup.

## Start here

<Cards>
  <Card size="small" icon="rocket" title="React Native tutorial" description="Build a working chat app from an empty project." href="https://getstream.io/chat/sdk/react-native/tutorial/cli/" />
  <Card size="small" icon="layout" title="UI components" description="An overview of the ready-made chat components." href="https://getstream.io/chat/docs/sdk/react-native/ui-components/overview/" />
  <Card size="small" icon="code-s-slash" title="JavaScript client docs" description="The stream-chat client API, the source of truth for low-level behavior." href="https://getstream.io/chat/docs/javascript/" />
</Cards>

The libraries support:

- Rich media messages
- Reactions
- Threads and quoted replies
- Text input commands (ex: Giphy, emojis and @mentions for users, channels, roles, and groups)
- Image and file uploads
- Video playback
- Audio recording and voice messages
- Read state and typing indicators
- Channel and message lists
- Push notifications (APN or Firebase)
- Offline storage with SQLite
- Polls and voting
- Message reminders
- Draft messages
- AI-powered features
- and a lot more.

Our SDK fully supports the [React Native new architecture](https://reactnative.dev/architecture/landing-page) (Fabric and TurboModules). You can read more about it [here](https://getstream.io/chat/docs/sdk/react-native/guides/new-architecture).

## Build with Stream CLI and Agent Skills

The [Stream CLI](https://getstream.io/cli/docs/) and [Agent Skills](https://getstream.io/agent-skills/docs/) provide AI coding agents, such as Claude Code, Cursor, and Codex, with the tools and knowledge necessary to build apps with Stream.

Install the CLI and add the skills to your project:

```bash
curl -fsSL https://getstream.io/cli.sh | bash
getstream skills stream-react-native
```

Once installed, invoke it from your agent:

```text
/stream Add Stream Chat to my React Native app.
```

The `/stream` skill acts as a router, reading your request and dispatching it to the specialist skill. You can also invoke the `/stream-react-native` skill directly.

Stream Agent Skills can also be installed from [skills.sh](https://www.skills.sh/getstream/agent-skills/stream).

## What's new in v9

Version 9 is a ground-up redesign of the entire UI layer:

- **New design token system**: A modern, polished default theme built on design tokens.
- **Slot-based MessageComposer**: A composition architecture for the message input with middleware support and fine-grained customization.
- **Component overrides via `WithComponents`**: Component-type overrides move off `Channel` props and into the `WithComponents` provider.
- **React Native New Architecture only**: V9 requires React Native `0.76+` with the New Architecture enabled.
- **New base UI component library**: A brand-new set of base UI primitives and a centralized state store system.

If you're upgrading from v8, see the [migration guide](https://getstream.io/chat/docs/sdk/react-native/basics/upgrading-from-v8/) for details on breaking changes.

## Architecture

Stream Chat React Native SDK primarily uses the [Stream Chat client](https://github.com/GetStream/stream-chat-js) to connect to and communicate with the Stream API.

The full [JavaScript client docs](https://getstream.io/chat/docs/javascript/) should be referenced for detailed information on directly using the client.

<Admonition type="note">

Do not install the `stream-chat` dependency externally. The SDK includes it as a development dependency.

</Admonition>

The SDK ships as two packages:

- `stream-chat-react-native` for **React Native CLI** applications.
- `stream-chat-expo` for **Expo CLI** applications.

Use the package that matches your CLI. You can use the out-of-the-box UI or build your own by consuming the exposed state and reusing components as building blocks.

<Mermaid>

```text
flowchart LR
  app[Your app] --> ui[UI components]
  app -. custom UI .-> client
  ui --> client[stream-chat client]
  client <--> api[Stream API]
```

</Mermaid>

## Upgrading and versioning strategy

The Stream Chat React Native SDK adheres to the [semantic versioning](https://semver.org/) rules.

- Bug fixes and behavior improvements cause **patch** version bump.
- New features are shipped with an increased **minor** version.
- Incompatible changes in the API will cause a **major** version increase.

Minor versions can include visual changes (spacing, colors, sizing) as the default UI evolves. Pin an exact version if you need visual stability.

## Platform compatibilities

Supported platforms are **Android** and **iOS**. Web is not currently supported; use Stream's [React SDK](https://getstream.io/chat/docs/sdk/react/) for Web.

## Sample apps

Sample apps live in the [`examples`](https://github.com/GetStream/stream-chat-react-native/tree/develop/examples) directory of the main repository. Additional clones (e.g., Slack, iMessage) are in [our repository](https://github.com/GetStream/react-native-samples).

## What's next

<Cards>
  <Card size="small" icon="terminal-box" title="Installation" description="Add stream-chat-react-native or stream-chat-expo to your app." href="https://getstream.io/chat/docs/sdk/react-native/basics/installation/" />
  <Card size="small" icon="palette" title="Theming" description="Style the components with the design token based theme." href="https://getstream.io/chat/docs/sdk/react-native/customization/theming/" />
  <Card size="small" icon="brush" title="Custom components" description="Replace parts of the default UI with your own components." href="https://getstream.io/chat/docs/sdk/react-native/customization/custom-components/" />
</Cards>


---

This page was last updated at 2026-08-14T17:46:55.964Z.

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