A Fabric view for iOS and Android that records audio, draws the waveform on the UI thread, previews and continues recordings, and hands you a file plus 64 bars ready for a chat bubble.
npm install react-native-waveform-recorderyarn add react-native-waveform-recordernpx expo install react-native-waveform-recorder
npx expo prebuildThen run npx pod-install for iOS and add a microphone usage description. See Installation for permissions, background recording and the Expo config plugin.
import { useRef } from 'react';
import { Button, View } from 'react-native';
import {
WaveformRecorderView,
type WaveformRecorderViewRef,
} from 'react-native-waveform-recorder';
export function VoiceNote() {
const ref = useRef<WaveformRecorderViewRef>(null);
return (
<View>
<WaveformRecorderView
ref={ref}
style={{ height: 56 }}
onComplete={(e) => console.log(e.uri, e.durationMs, e.samples)}
/>
<Button title="Record" onPress={() => ref.current?.start()} />
<Button title="Stop" onPress={() => ref.current?.stop()} />
</View>
);
}react-native-waveform-player draws the same kind of pill for playback. Pass onComplete.uri and onComplete.samples to it and the player skips decoding the file. See Export and the player.