<PlayerWaveform>

Wraps <Waveform> with a UI-thread-animated progress fill. Drive it with a progress value (0–1) or a positionMs + durationMs pair plus isPlaying.

Quick example

import { PlayerWaveform } from 'react-native-waveforms';
 
<PlayerWaveform
  samples={amplitudes}
  width={320}
  height={80}
  color="#cbd5e1"
  progressColor="#2563eb"
  isPlaying
  positionMs={currentMs}
  durationMs={totalMs}
/>

When isPlaying is true, the progress animates smoothly toward the end on the UI thread, so dropped JS frames don’t stutter the bar. While paused (or controlling progress directly), pass progress={0..1} to scrub.

Scrubbing (tap + drag to seek)

Pass an onSeek callback to make the waveform interactive. Users can tap anywhere — or press and drag — to scrub; the played fill follows the finger live, and onSeek fires once on release with the new progress in [0, 1]. While isPlaying is true, playback resumes from the new position automatically.

const [progress, setProgress] = useState(0);
 
<PlayerWaveform
  samples={amplitudes}
  width={320}
  height={80}
  color="#cbd5e1"
  progressColor="#2563eb"
  isPlaying={isPlaying}
  positionMs={positionMs}
  durationMs={durationMs}
  onSeek={(p) => {
    setProgress(p);
    audio.seekTo(p * durationMs);
  }}
/>

To also light up the bar under the finger (matching the <Waveform> hover effect), pass activeColor (and optionally activeScale / activePushRange). These props pass straight through from the underlying <Waveform> and only render once onSeek enables the touch overlay.

Gradient progress

progressColor accepts a WaveformColor, so the played-portion can be a gradient.

<PlayerWaveform
  samples={amplitudes}
  width={320}
  height={80}
  color="#e2e8f0"
  progressColor={{ type: 'linear', from: '#22c55e', to: '#0ea5e9' }}
  isPlaying
  positionMs={0}
  durationMs={4000}
/>

Props

Inherits every <Waveform> prop (samples, width, height, color, renderer, gap, rounded, baseline, strokeWidth, fillOpacity, gradient/active props), plus:

Playground