React Native Library

Sound,
visualised
beautifully.

Record, play, and visualise audio in your React Native app with a library built for real products — not demos.

Live preview

Recording 00:00

Playback

0:00 1.0×

✦Audio Recording ✦Waveform Visualisation ✦Seek Controls ✦Speed Adjustment ✦TypeScript Native ✦60fps Smooth ✦Fully Customisable ✦MIT Licensed ✦Audio Recording ✦Waveform Visualisation ✦Seek Controls ✦Speed Adjustment ✦TypeScript Native ✦60fps Smooth ✦Fully Customisable ✦MIT Licensed

What's inside

Built for
real apps.

Every feature was designed around production requirements — not toy demos. Customisable to your brand, optimised for every device.

🎙️

Audio Recording

High-quality recording with live waveform feedback. See your sound as you speak.

▶️

Playback Engine

Full playback with seek scrubbing, speed control (0.5× → 2×), and smooth progress animation.

📊

Waveform Rendering

Customise candle width, spacing, colour gradients, and played/unplayed split state.

⚡

High Performance

Runs on a native thread. Optimised for smooth 60fps on both iOS and Android.

🎨

Fully Customisable

Every visual property is a prop. Plug into any design system without fighting the defaults.

💪

TypeScript First

Complete type definitions included. Autocomplete, strict types, no guesswork.

Get started

One command away.

Drop it into your existing project in seconds. No native configuration required for Expo managed workflow.

$ npm install @bhojaniasgar/react-native-audio-waveform

$ yarn add @bhojaniasgar/react-native-audio-waveform

App.tsx

import { useAudioRecorder, Waveform } from

  '@bhojaniasgar/react-native-audio-waveform';

function VoiceNote() {

  const { startRecording, stopRecording } =

    useAudioRecorder();

  return (

    <Waveform

      path={audioPath}

      candleSpace={2}

      candleWidth={4}

      waveColor="#ff4d00"

      playedWaveColor="#0038ff"

    />

  );

}

export default VoiceNote;

Sound,visualisedbeautifully.

Built forreal apps.