react-native-multiple-video-player

react-native-multiple-video-player v2.0.0

A polished, lightweight React Native video player with a multi-video queue, modern animated controls, speed picker, playlist drawer, and TypeScript definitions — all with zero extra native dependencies beyond react-native-video.

Requirements: React 18+, React Native 0.76+ (New Architecture–friendly: Fabric-compatible Pressable, Animated with useNativeDriver: true throughout), and react-native-video 6+.

---

What's new in v2

Feature	v1	v2
Animated controls overlay
Animated seekbar thumb
Buffer fill on seekbar
Playback speed picker		0.5× – 2×
Visual playlist drawer		FlatList
Mute toggle
Imperative ref API
TypeScript types		src/index.d.ts
Retry on error		tap to retry
Always-visible progress strip
Accessibility labels
react-native-orientation dep	required	removed

---

Installation

npm install react-native-multiple-video-player
# or
yarn add react-native-multiple-video-player

Peer dependencies (install in your app):

npm install react-native-video

Versions expected by this package: react >=18, react-native >=0.76, react-native-video >=6. Follow the react-native-video setup guide for native linking or autolinking.

---

Quick start

import React from 'react';
import VideoPlayer from 'react-native-multiple-video-player';

const DATA = [
  { uri: 'https://example.com/video1.mp4', title: 'Episode 1' },
  { uri: 'https://example.com/video2.mp4', title: 'Episode 2' },
];

export default function App() {
  return (
    <VideoPlayer
      data={DATA}
      autoPlay
      autoPlayNextVideo
      loop="none"
      onBack={() => console.log('back pressed')}
      onEnd={() => console.log('all done')}
    />
  );
}

---

Props

Required

Prop	Type	Description
data	VideoItem[]	Array of video items. Each must have at minimum a uri string.

interface VideoItem {
  uri: string;
  title?: string; // shown in the top bar when set
}

Optional

Prop	Type	Default	Description
defaultVideoIndex	number	0	Which video to start on
autoPlay	boolean	true	Auto-play on mount
autoPlayNextVideo	boolean	true	Advance to next video on end
loop	'none' | 'one' | 'all'	'none'	Loop behaviour
rate	number	1	Initial playback rate
resizeMode	'contain' | 'cover' | 'stretch' | 'none'	'contain'	Passed through to react-native-video
controlTimeout	number	3000	ms before controls auto-hide
showBottomBar	boolean	true	Show seek bar, time row, and speed control
style	ViewStyle	—	Override container style

Callbacks

Prop	Signature	When fired
onBack	() => void	Back button pressed
onPlay	() => void	Video starts playing
onPause	() => void	Video paused
onEnd	() => void	Current item or queue finished (depends on loop / autoPlayNextVideo)
onLoad	(data) => void	Video loaded and ready (react-native-video load payload)
onLoadStart	() => void	Load started for the current source
onError	(err) => void	Playback error

---

Imperative ref API

import React, { useRef } from 'react';
import { Button } from 'react-native';
import VideoPlayer from 'react-native-multiple-video-player';

export default function App() {
  const playerRef = useRef(null);

  return (
    <>
      <VideoPlayer ref={playerRef} data={DATA} />
      <Button title="Next" onPress={() => playerRef.current?.next()} />
      <Button title="Seek 30s" onPress={() => playerRef.current?.seek(30)} />
    </>
  );
}

Method	Description
play()	Start playback
pause()	Pause playback
seek(seconds)	Seek to position in seconds
next()	Jump to next video
previous()	Jump to previous video

---

Additional exports

The package main entry (src/index.js) exports the default VideoPlayer plus optional building blocks if you need them:

import VideoPlayer, {
  SeekBar,
  PlaylistMenu,
  SpeedMenu,
} from 'react-native-multiple-video-player';

LOOP_MODES, SPEED_OPTIONS, COLORS, and helpers like formatTime / clamp / getProgress live under src/constants.js and src/utils.js for internal use; they are not re-exported from the package root. Use string literals for loop ('none' | 'one' | 'all') at the call site.

TypeScript: types are declared in src/index.d.ts (see the types field in package.json).

---

License

MIT