Skip to main content
Version: v5

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.


To support audio playing and recording, install the following package:


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 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 or the MessageInput component.

<Channel audioRecordingEnabled />

Once enabled and once the necessary packages are installed, the MessageInput UI will render a StartRecordingAudioButton.

Start Recording

On long pressing the StartRecordingAudioButton, the recording UI renders and the recording starts, showing the AudioRecorder UI and a AudioRecordingLockIndicator on top.

Audio Recorder

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.

Audio Recording in Progress

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.

Audio Recording Preview

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.

<Channel asyncMessagesMultiSendEnabled audioRecordingEnabled />

And so the message is sent depending on asyncMessagesMultiSendEnabled value as follows:

asyncMessagesMultiSendEnabled valueImpact
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
trueupon 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.


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 component.

AudioAttachmentUploadPreviewComponent prop used to customize the audio attachment upload preview in the MessageInput.
AudioRecorderComponent prop used to customize the audio recording controls and UI that replaces the MessageInput.
AudioRecordingInProgressComponent prop used to customize the audio recording UI when its in recording state.
AudioRecordingPreviewComponent prop used to customize the audio recording preview UI.
AudioRecordingLockIndicatorComponent prop used to customize the mic lock indicator on top of the MessageInput.
AudioRecordingWaveformComponent prop used to customize the audio recording waveform component that is shown in the AudioRecordingInProgress component.
StartRecordingAudioButtonComponent prop used to customize the start audio recording button in the MessageInput.
AudioAttachmentComponent prop used to customize the audio attachment in the MessageList.

Function customization

audioRecordingEnabledControls whether the async audio feature(sending voice recording) is enabled.
asyncMessagesMultiSendEnabledWhen 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.
asyncMessagesLockDistanceControls 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.
asyncMessagesMinimumPressDurationControls 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.
asyncMessagesSlideToCancelDistanceControls how many pixels to the leading side the user has to scroll in order to cancel the recording of a voice message.

Did you find this page helpful?