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