Skip to content
Native Animation
Waveform Voice Message animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add waveform-voice-message

Waveform Voice Message

A simulated voice-note player with scrubbing and speed controls, with configurable duration, gradient colors, fonts, and avatar initials.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this animation

Related guides

A simulated voice-note player with scrubbing and speed controls, with configurable duration, gradient colors, fonts, and avatar initials.

Why this one

Most voice-message examples are a row of static bars around a play button. This version treats the waveform as the control: every message owns one continuous progress value, the current bar fills precisely, nearby bars lift with the voice envelope, and a scrub cursor exposes an exact time bubble. Playback speed changes through a compact vertical roller, completion clears the waveform with a soft sweep, and the component remains useful without audio or app-specific state.

How it works

  1. A deterministic seeded envelope creates 42 realistic bars with phrase-level pauses and syllable variation.
  2. One Reanimated shared value drives played color, partial cursor position, remaining time, scrubbing, and completion.
  3. A UI-thread frame callback advances the simulation at 1×, 1.5×, or 2× without React updates per frame.
  4. A pan-or-tap gesture seeks directly; releasing always resumes playback from the chosen position.
  5. Nearby bars derive a restrained 15% lift and voice pulse from their distance to the cursor.
  6. Reduced Motion removes pulsing and travel while preserving every state and interaction.

Install

npx expo install expo-linear-gradient @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets

Icons: Lucide (ISC).

Usage

import { WaveformVoiceMessage } from './waveform-voice-message';

export function Message() {
  return <WaveformVoiceMessage duration={42} avatarInitials="MC" />;
}
<WaveformVoiceMessage
  duration={18}
  gradientColors={['#6D5BFF', '#8B5CF6']}
  playedWaveColor="#FFFFFF"
  idleWaveColor="rgba(255,255,255,0.34)"
  onComplete={() => markAsListened()}
/>

Props

PropTypeDefaultDescription
durationnumber42Simulated message length in seconds.
gradientColorsreadonly [string, string]['#1C1C22', '#1C1C22']Surface gradient.
controlColorstring'#F4F4F8'Playback-control surface.
iconColorstring'#17171D'Play and pause icon color.
idleWaveColorstringrgba(255,255,255,0.25)Unplayed bars.
playedWaveColorstring'#FFFFFF'Played bars and scrub cursor.
textColorstring'#FFFFFF'Time, speed, and avatar text.
avatarInitialsstring—Optional trailing avatar initials.
avatarColorstring'#383843'Avatar surface.
showUnreadDotbooleantrueShows a blue dot until playback starts.
fontFamilystringSystemInterface font.
monoFontFamilystringSystemTimer font.
onPlay() => void—Called when playback begins.
onPause() => void—Called when playback pauses.
onComplete() => void—Called at the end of playback.
accessibilityLabelstring'Voice message'Screen-reader description.
styleStyleProp<ViewStyle>—Outer container style.
testIDstring—Test identifier.

The forwarded ref exposes play(), pause(), seekTo(position), cycleSpeed(), and reset().

Compatibility

  • Expo SDK 58, React Native 0.88.0, Reanimated 4.7.1, Skia 2.14.0.
  • iOS: supported.
  • Android: supported.
  • Web: supported.
  • Works in Expo Go with the SDK-bundled native modules.

Accessibility

The play control exposes Play, Pause, and Skip forward 5 seconds actions. The waveform supports both pan and tap seeking, controls meet a 44-point hit target, and screen readers receive the remaining time. Reduced Motion removes waveform pulsing, animated seeking travel, and spring feedback while retaining readable state changes.

More animations