Build Voice Messaging in React Native with Reusable Gists

Overview

Voice messaging is now a staple in chat experiences. Users expect to record, send, and play audio with ease — and developers deserve tools that don't fight back. That’s why I broke down a fully functional voice messaging system into simple, focused gists that you can plug into any React Native project.

No full-blown package. No bloated dependencies. Just modular code that works.

🔧 What the Feature Does
This voice message system includes:

Tap-to-record with visual timer
Cancel or send recording
Upload logic using your own backend (ZEGOCLOUD in my case)
Full-featured playback
Play/pause
Seek
Speed toggle (1x, 1.5x, 2x)
Auto-stop/reset

🔗 Gist-Based Breakdown

1. MicButton.js A recording button with timer display. Users can cancel, send, or re-record. Handles UI state + timer logic.

Starts recording on press-in
Tracks elapsed time
Sends file or cancels on tap
Reusable as a controlled component with props for recorder logic

Gits Link for MicButton 🔗

1. VoiceMessagePlayer.js An audio player with scrubber, speed control, and clean UI. Manages playback for local or remote audio files.

Fetches file path
Handles permission (Android/iOS)
Manages current playing state globally
Speeds: 1x, 1.5x, 2x
Seeks to any point in the track

Gist Link for VoiceMessagePlayer 🔗

1. Recorder Functions Async functions to:

Start recording (with platform-specific formats)
Stop recording and send it to your backend
Cancel and clean up listeners

Integrate these into your parent component and pass to MicButton.

Gist Link For Recorder Functions 🔗

1. sendVoiceMessage() — Gist Link Customizable logic to send the audio message over any provider (ZEGOCLOUD in this case).

Strips file:// prefix
Formats duration, file name, type
Builds a push config and sends the message

Example Workflow

<MicButton 
  startRecording={startRecording} 
  onStopRecord={onStopRecord} 
  recorderInstance={audioRecorderPlayer} 
/>

{message.type === 13 && (
  <VoiceMessagePlayer item={message} isSender={true} />
)}

This lets you drop recording and playback directly into any chat UI.

Why Gists, Not a Package?
🛠️ Devs can tweak each part without digging into node_modules
⚡ Faster adoption
📦 Packages are overkill when you just need a few focused files

If you’re building chat, customer support, or community apps — this will save you days. Take the gists, plug them in, and ship voice features users love.

Built for developers. Shared with developers.