# Audio Messages Support
The Stream Chat React Native SDK supports recording and playing audio, which can be sent as messages.
## Best Practices
- Verify platform permissions and dependency setup before enabling audio UI.
- Enable `audioRecordingEnabled` only where users can send messages.
- Use `asyncMessagesMultiSendEnabled` when you need text + audio in one send.
- Keep custom audio components lightweight to avoid UI stalls while recording.
- Test cancellation, lock, and backgrounding flows on both iOS and Android.
## Installation
To support audio playing and recording, install the following package:
- [`react-native-video`](https://github.com/react-native-video/react-native-video) for Audio playback support.
- [`react-native-audio-recorder-player`](https://github.com/hyochan/react-native-audio-recorder-player) for Audio recording and preview.
- [`react-native-blob-util`](https://github.com/RonRadtke/react-native-blob-util) to access the cache directory while audio recording.
For Expo, both `expo-av` and `expo-audio` are supported.
- [`expo-av`](https://docs.expo.dev/versions/latest/sdk/av/) for Audio playback, recording and async audio messages support.
- [`expo-audio`](https://docs.expo.dev/versions/latest/sdk/audio/) for Audio playback, recording and async audio messages support.
`expo-audio` is supported from version `7.2.0` of `stream-chat-expo`.
Even though both libraries are supported and adapted to a singular API, different supported `Expo` versions do not work interoperably with each of the libraries.
More specifically, if you're using Expo `51.x.x` or `52.x.x` please make sure to keep using `expo-av` as `expo-audio` is unstable and will likely not work properly in those versions.
Conversely, if you're using Expo `>=53.0.0`, please make sure to use `expo-audio` as support for `expo-av` has stopped completely in favor of the new library. While it is already not supported, Expo `54` is not going to contain `expo-av` at all in Expo Go, meaning the sooner you get to go to Expo `53` and use the new library, the better.
Follow each dependency's setup docs to integrate correctly.
Also, make sure that the `minSdkVersion` is >=24, for [`react-native-audio-recorder-player`](https://github.com/hyochan/react-native-audio-recorder-player) to work and the `kotlinVersion` should be `1.6.10`.
## Enable async Audio
Enable audio recording via [`Channel`](/chat/docs/sdk/react-native/v8/core-components/channel#audiorecordingenabled/) or [`MessageInput`](/chat/docs/sdk/react-native/v8/ui-components/message-input#audiorecordingenabled/).
```tsx
```
Once enabled and dependencies are installed, `MessageInput` renders a `StartRecordingAudioButton`.
On long press, recording starts, showing `AudioRecorder` and `AudioRecordingLockIndicator`.
You can slide the `StartRecordingAudioButton` to the top or to the left.
- On sliding the button to the left, the recording is stopped and deleted and the `MessageInput` state is reset.
- On sliding the button to the top, the mic is locked and you don't have to press the button anymore.
When locked, `AudioRecordingInProgress` appears and `AudioRecorder` shows stop/send controls.
After stopping, `AudioRecordingPreview` lets you play/pause. `AudioRecorder` shows delete and send controls.
`MessageInput` uses `AudioAttachmentUploadPreview`, while `MessageList` uses `AudioAttachment`.
## Message Send Behaviour
Recordings upload after completion, which happens when the user stops and confirms with the send button.
The behavior, when a message with the given recording attachment is sent, however, can be controlled through the asyncMessagesMultiSendEnabled configuration prop on `Channel` or `MessageInput`.
```tsx
```
Behavior depends on `asyncMessagesMultiSendEnabled`:
| `asyncMessagesMultiSendEnabled` value | Impact |
| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `false` (default behavior) | immediately after a successful upload at one step on completion. In that case as a single attachment (voice recording only), no-text message is submitted |
| `true` | upon clicking the `SendMessage` button if `asyncMessagesMultiSendEnabled` is enabled |
Enabling `asyncMessagesMultiSendEnabled` would allow users to record multiple voice messages or accompany the voice recording with text or other types of attachments.
## Customization
You can customize async audio behavior and UI.
### UI Customization
The components of the async audio can be customized by passing your custom component to the props in the table in the [`Channel`](/chat/docs/sdk/react-native/v8/core-components/channel/) component.
| Component | Description |
| ---------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| [`AudioAttachmentUploadPreview`](/chat/docs/sdk/react-native/v8/core-components/channel#audioattachmentuploadpreview/) | Component prop used to customize the audio attachment upload preview in the `MessageInput`. |
| [`AudioRecorder`](/chat/docs/sdk/react-native/v8/core-components/channel#audiorecorder/) | Component prop used to customize the audio recording controls and UI that replaces the `MessageInput`. |
| [`AudioRecordingInProgress`](/chat/docs/sdk/react-native/v8/core-components/channel#audiorecordinginprogress/) | Component prop used to customize the audio recording UI when its in recording state. |
| [`AudioRecordingPreview`](/chat/docs/sdk/react-native/v8/core-components/channel#audiorecordingpreview/) | Component prop used to customize the audio recording preview UI. |
| [`AudioRecordingLockIndicator`](/chat/docs/sdk/react-native/v8/core-components/channel#audiorecordinglockindicator/) | Component prop used to customize the mic lock indicator on top of the `MessageInput`. |
| [`AudioRecordingWaveform`](/chat/docs/sdk/react-native/v8/core-components/channel#audiorecorindwaveform/) | Component prop used to customize the audio recording waveform component that is shown in the `AudioRecordingInProgress` component. |
| [`StartRecordingAudioButton`](/chat/docs/sdk/react-native/v8/core-components/channel#startaudiorecordingbutton/) | Component prop used to customize the start audio recording button in the `MessageInput`. |
| [`AudioAttachment`](/chat/docs/sdk/react-native/v8/core-components/channel#audioattachment/) | Component prop used to customize the audio attachment in the `MessageList`. |
### Function customization
| Component | Description |
| --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`audioRecordingEnabled`](/chat/docs/sdk/react-native/v8/core-components/channel#audioattachmentuploadpreview/) | Controls whether the async audio feature(sending voice recording) is enabled. |
| [`asyncMessagesMultiSendEnabled`](/chat/docs/sdk/react-native/v8/core-components/channel#audiorecorder/) | When it’s enabled, recorded messages won’t be sent immediately. Instead they will “stack up” in the composer allowing the user to send multiple voice recording as part of the same message. |
| [`asyncMessagesLockDistance`](/chat/docs/sdk/react-native/v8/core-components/channel#audiorecordinginprogress/) | Controls how many pixels to the top side the user has to scroll in order to lock the recording view and allow the user to lift their finger from the screen without stopping the recording. |
| [`asyncMessagesMinimumPressDuration`](/chat/docs/sdk/react-native/v8/core-components/channel#audiorecordingpreview/) | Controls the minimum duration that the user has to press on the record button in the composer, in order to start recording a new voice message. |
| [`asyncMessagesSlideToCancelDistance`](/chat/docs/sdk/react-native/v8/core-components/channel#audiorecordinglockindicator/) | Controls how many pixels to the leading side the user has to scroll in order to cancel the recording of a voice message. |
---
This page was last updated at 2026-04-21T07:55:41.502Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/guides/audio-messages-support/](https://getstream.io/chat/docs/sdk/react-native/v8/guides/audio-messages-support/).