# Audio Messages Support
The Stream Chat React Native SDK has the support for recording and playing the audio. This can be sent as a message.
## 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.
- [`expo-av`](https://docs.expo.dev/versions/latest/sdk/av/) for Audio playback, recording and async audio messages support.
Please follow along the linked documentation of each optional dependencies so as to support them correctly in your application.
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
Recording voice messages is possible by enabling audio recording on the [`Channel`](/chat/docs/sdk/react-native/v5/core-components/channel#audiorecordingenabled/) or the [`MessageInput`](/chat/docs/sdk/react-native/v5/ui-components/message-input#audiorecordingenabled/) component.
```tsx
```
Once enabled and once the necessary packages are installed, the `MessageInput` UI will render a `StartRecordingAudioButton`.
On long pressing the `StartRecordingAudioButton`, the recording UI renders and the recording starts, showing the `AudioRecorder` UI and a `AudioRecordingLockIndicator` on top.
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 the mic is locked, the `AudioRecordingInProgress` component is rendered on top, and the `AudioRecorder` component now shows the stop recording and the send recording button.
When the recording is stopped, the `AudioRecordingPreview` component is rendered which allows you to preview the recording. It has play and pause button to control the preview. Moreover, the `AudioRecorder` component now renders delete recording and the confirm button to send the recording.
The audio attachment has different preview in the `MessageInput` and the `MessageList` component. The `MessageInput` renders `AudioAttachmentUploadPreview` and the `MessageList` renders the `AudioAttachment` component.
## Message Send Behaviour
The resulting recording is always uploaded on the recording completion. The recording is completed when user stops the recording and confirms the completion with a 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
```
And so the message is sent depending on asyncMessagesMultiSendEnabled value as follows:
| `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
We allow different types of customization with the behaviour of async audio messages.
### 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/v5/core-components/channel/) component.
| Component | Description |
| ---------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| [`AudioAttachmentUploadPreview`](/chat/docs/sdk/react-native/v5/core-components/channel#audioattachmentuploadpreview/) | Component prop used to customize the audio attachment upload preview in the `MessageInput`. |
| [`AudioRecorder`](/chat/docs/sdk/react-native/v5/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/v5/core-components/channel#audiorecordinginprogress/) | Component prop used to customize the audio recording UI when its in recording state. |
| [`AudioRecordingPreview`](/chat/docs/sdk/react-native/v5/core-components/channel#audiorecordingpreview/) | Component prop used to customize the audio recording preview UI. |
| [`AudioRecordingLockIndicator`](/chat/docs/sdk/react-native/v5/core-components/channel#audiorecordinglockindicator/) | Component prop used to customize the mic lock indicator on top of the `MessageInput`. |
| [`AudioRecordingWaveform`](/chat/docs/sdk/react-native/v5/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/v5/core-components/channel#startaudiorecordingbutton/) | Component prop used to customize the start audio recording button in the `MessageInput`. |
| [`AudioAttachment`](/chat/docs/sdk/react-native/v5/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/v5/core-components/channel#audioattachmentuploadpreview/) | Controls whether the async audio feature(sending voice recording) is enabled. |
| [`asyncMessagesMultiSendEnabled`](/chat/docs/sdk/react-native/v5/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/v5/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/v5/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/v5/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-07-10T16:05:04.355Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v5/guides/audio-messages-support/](https://getstream.io/chat/docs/sdk/react-native/v5/guides/audio-messages-support/).