# Video and audio by Stream

> **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/).

Stream's [Video and Audio](https://getstream.io/video/) adds calls to a chat app: a user starts a video or audio call from a channel, and its members can join it. Chat and calls use separate SDKs, `stream-chat-react-native` (or `stream-chat-expo`) and `@stream-io/video-react-native-sdk`, each with its own client, and the same Stream app.

The [chat with video guide](https://getstream.io/video/docs/react-native/advanced/chat-with-video/) adds chat to a calling app, and calls to a chat app with ringing, step by step. It's part of the [Video and Audio documentation for React Native](https://getstream.io/video/docs/react-native/), which covers its own concepts (authentication, permissions, push notifications for incoming calls), its components, cookbook examples and tutorials.

## Using the guide with v10

The guide's chat code was written for an earlier `stream-chat-react-native`. With v10, change these parts:

- **The composer.** Where the guide renders `MessageInput`, render `MessageComposer`.
- **The chat client.** `useCreateChatClient` takes the token as `tokenOrProvider`, not `tokenProvider`: `useCreateChatClient({ apiKey, tokenOrProvider, userData })`, as in the [Quick start](https://getstream.io/chat/docs/sdk/react-native/v10/getting-started/quick-start/).
- **The attachment picker inset.** Where the guide calls `setTopInset(headerHeight)` from `useAttachmentPickerContext()`, pass the header height to `Channel` as `topInset` instead. [Keyboard and insets](https://getstream.io/chat/docs/sdk/react-native/v10/ui/layout/keyboard-and-insets/) explains the insets.
- **The unread count on the chat button.** The guide's `useUnreadCount` hook reads `client.activeChannels`, which `stream-chat` v10 doesn't have, and counts on its own from events. Get the channel with `client.channel("messaging", callId)`, and read the current user's `unread_messages` from the `read` field of `channel.state` with `useStateStore`, as the unread badge in [Reading state in components](https://getstream.io/chat/docs/sdk/react-native/v10/ui/reading-state-in-components/) does. The client keeps that count up to date while the channel is watched, so keep the guide's effect that watches the channel, and drop the event listeners.

The video parts of the guide don't change.

## Best practices

- Use the same API key for chat and video, and sign both user tokens with the same secret. One Stream app serves both.
- Create both clients for the same user, and disconnect both when the user signs out.
- Tie each call to its channel, for example by storing the channel's `cid` in the call's custom data, as the guide does, so the app can show the call in the right channel.
- Plan camera and microphone permissions, and what users see when they're denied, before building the call UI.
- Test calls together with chat push notifications and unread counts, since both change while a call rings.

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v10/features/integrations/video-and-audio-by-stream/](https://getstream.io/chat/docs/sdk/react-native/v10/features/integrations/video-and-audio-by-stream/).