Audio recorder

The audio recorder is the part of MessageComposer that records voice messages. The record button, AudioRecordingButton, replaces the send button while the composer is empty, and the recorder parts take the input's place while a recording runs. All of them appear only when audioRecordingEnabled is set on the Channel or Thread. Voice recordings and audio playback explains how a recording is made and sent.

import type { Channel as StreamChannel } from "stream-chat";
import {
  Channel,
  MessageComposer,
  MessageList,
} from "stream-chat-react-native";

export const ChannelScreen = ({ channel }: { channel: StreamChannel }) => (
  <Channel audioRecordingEnabled channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
);

Best practices

• Turn recording on for each Channel and Thread that should have it. A thread screen needs audioRecordingEnabled on its Thread too.
• Install an audio package and allow uploads in the channel. The record button checks neither; see Turning it on or off.
• Set the gesture distances and the press duration on Channel or Thread. The record button reads them from MessageInputContext, and the same props on MessageComposer don't reach it.
• Replace the parts through their override keys. A part of your own reads the recorder from audioRecorderManager in useMessageInputContext(), and calls the context's recording functions.
• Keep the default record button unless you replace the whole gesture. Its press, slide-to-cancel and slide-to-lock gestures drive the other parts.

UI customization

What the composer shows during a recording:

1. Holding the button. AudioRecorder replaces the input with a red microphone, the elapsed time and "Slide to Cancel", which fades as the user slides to the left. AudioRecordingLockIndicator shows an open lock and an arrow above the button. The previews above the input and the attach button are hidden.
2. Locked. AudioRecordingInProgress shows the time and the waveform above the input, and AudioRecorder shows three buttons: delete, stop and send. The lock indicator shows a closed lock, then disappears after two seconds.
3. Stopped. AudioRecordingPreview plays the recording, with a play button, the time and a waveform the user can drag to seek. AudioRecorder shows delete and send.

The delete button publishes a "Voice message deleted" notification. The send button calls uploadVoiceRecording(audioRecordingSendOnComplete), which adds it to the composer or sends it at once.

AudioRecordingButton props

AudioRecordingButton reads its props from MessageInputContext and the recorder's state. Pass one to override it.

A press shorter than asyncMessagesMinimumPressDuration publishes "Hold to record. Release to save." A longer press pauses the audio that is playing and starts recording. When the microphone permission is denied, it publishes a notification with a button that opens the settings. While the user holds it, the button tracks the finger:

• Releasing it after sliding to the left by more than half of asyncMessagesSlideToCancelDistance deletes the recording.
• Releasing it after sliding up by more than half of asyncMessagesLockDistance locks the recording.
• Releasing it otherwise completes the recording with uploadVoiceRecording(audioRecordingSendOnComplete), or deletes it when it's shorter than 300 milliseconds.

AudioRecorder props

AudioRecorder reads its props from MessageInputContext and the recorder's state. MessageComposer passes it slideToCancelStyle.

AudioRecordingLockIndicator props

MessageComposer renders AudioRecordingLockIndicator while a recording runs, with these props.

AudioRecordingInProgress props

AudioRecordingInProgress reads its props from MessageInputContext and the recorder's state. It renders AudioRecordingWaveform with maxDataPointsDrawn and waveformData.

AudioRecordingWaveform props

AudioRecordingPreview takes no props. It reads the recording, its duration and its waveform from the recorder, and plays it through the audio player pool of the Channel or Thread.

The recorder

audioRecorderManager in useMessageInputContext() is the recorder of the Channel or Thread. Its state store holds:

The functions that act on it, startVoiceRecording(), stopVoiceRecording(), deleteVoiceRecording() and uploadVoiceRecording(sendOnComplete), are on MessageInputContext.

MessageComposer also provides MicPositionContext, which useMicPositionContext() reads. It holds micPositionX and micPositionY, Reanimated shared values with how far the finger has moved from the record button, in points. The record button writes them, and the composer animates "Slide to Cancel" and the lock indicator from them. A replacement for one of those parts can read them too.

Configuration on Channel and Thread

audioRecordingSendOnComplete sends the recording before its upload has finished, so it needs messageComposer.attachments.pendingUploadsEnabled, which is off by default and which Chat turns on with enableOfflineSupport. The recording format comes from the audio package; to change it, pass overrideAudioRecordingConfiguration to registerNativeHandlers(), as Entry points and native handlers shows.

Examples

Show fewer waveform bars

The default AudioRecordingInProgress takes maxDataPointsDrawn. Register a component that renders it with the prop:

import type { AudioRecordingInProgressProps } from "stream-chat-react-native";
import { AudioRecordingInProgress } from "stream-chat-react-native";
import type { ComponentOverrides } from "stream-chat-react-native";

const ShortWaveformInProgress = (props: AudioRecordingInProgressProps) => (
  <AudioRecordingInProgress {...props} maxDataPointsDrawn={30} />
);

// Pass to `WithComponents`, declared once at module scope.
export const recorderOverrides: ComponentOverrides = {
  AudioRecordingInProgress: ShortWaveformInProgress,
};

Show that a recording runs

Parts under the Channel or Thread subscribe to the recorder's store. This badge shows while the user records:

import { Text } from "react-native";
import {
  useMessageInputContext,
  useStateStore,
} from "stream-chat-react-native";

const recordingSelector = ({
  duration,
  status,
}: {
  duration: number;
  status: string;
}) => ({
  seconds: Math.floor(duration / 1000),
  isRecording: status === "recording",
});

export const RecordingBadge = () => {
  const { audioRecorderManager } = useMessageInputContext();
  const { isRecording, seconds } = useStateStore(
    audioRecorderManager.state,
    recordingSelector,
  );

  if (!isRecording) return null;

  return <Text>Recording {seconds}s</Text>;
};

The recorder replaces AudioRecorder with a recorder of its own.

Hooks

See useMessageInputContext and useAudioRecorder.