# react-native-multiple-video-player

> Polished, lightweight React Native video player with multi-video queue. Supports New Architecture (Fabric + TurboModules, RN ≥0.76).

Latest version **2.0.0** (published 2026-03-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-multiple-video-player
pnpm add react-native-multiple-video-player
yarn add react-native-multiple-video-player
bun add react-native-multiple-video-player
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-03-28 |
| First published | 2020-06-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 77.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | anmolgupta0206, anmol0206gupta |
| Keywords | react-native, video, player, multiple, queue, playlist, new-architecture, fabric, turbomodules |

## Links

- npm: https://www.npmjs.com/package/react-native-multiple-video-player
- npm.io page: https://npm.io/package/react-native-multiple-video-player

## Alternatives

- [cron](https://npm.io/package/cron.md) — 4.9M weekly downloads
- [@vercel/queue](https://npm.io/package/@vercel/queue.md) — 731.6K weekly downloads
- [create-sonicjs](https://npm.io/package/create-sonicjs.md) — 1.6K weekly downloads
- [@exellix/jobs-api](https://npm.io/package/@exellix/jobs-api.md) — 941 weekly downloads
- [@forwardimpact/libskill](https://npm.io/package/@forwardimpact/libskill.md) — 575 weekly downloads

## Recent versions

- 2.0.0 (latest) — 2026-03-28
- 1.1.0 — 2020-06-27

## README

# 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`](https://github.com/TheWidlarzGroup/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

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

Peer dependencies (install in your app):

```bash
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](https://github.com/TheWidlarzGroup/react-native-video) for native linking or autolinking.

---

## Quick start

```jsx
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. |

```ts
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

```jsx
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`](./package.json) entry (`src/index.js`) exports the default `VideoPlayer` plus optional building blocks if you need them:

```js
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`](./src/index.d.ts) (see the `types` field in `package.json`).

---

## License

MIT

---
_Source: https://npm.io/package/react-native-multiple-video-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._