JSPM

  • Created
  • Published
  • Downloads 284784
  • Score
    100M100P100Q161235F
  • License MIT

<Video /> Component for React Native

Package Exports

  • react-native-video
  • react-native-video/app.plugin.js
  • react-native-video/package.json

Readme

React Native Video Component

The most battle-tested open-source video player component for React Native with support for DRM, offline playback, HLS/DASH streaming, and more.

[!IMPORTANT] This is a new version (v7) of react-native-video that is currently in active development. You can expect breaking changes and missing features.

If you have any questions, please contact us at hi@thewidlarzgroup.com.

πŸ” Features

Feature Status
πŸ“± Plays all video formats natively supported by iOS/Android βœ… Available & Production Ready by August
▢️ Local and remote playback βœ… Available & Production Ready by August
πŸ” Streaming: HLS β€’ DASH β€’ SmoothStreaming βœ… Available & Production Ready by August
🧩 Expo plugin support βœ… Available & Production Ready by August
πŸ“΄ Offline playback, video download, support for side-tracks and side-captions (via optional SDK) βœ… Available & Production Ready by August
πŸ“± Picture in Picture βœ… Available & Production Ready by August
🎚️ Fine-grained control over tracks, buffering & events πŸ—οΈ In Development
🧠 Advanced control over playback and buffering πŸ“ TODO
πŸ” DRM: Widevine & FairPlay (See free DRM stream example) πŸ“ TODO
🌐 Basic Web Support πŸ“ TODO
πŸ“Ί TV Support πŸ“ TODO
πŸ₯½ VisionOS Support πŸ“ TODO

✨ Project Status

Version State Architecture
v5 and lower ❌ End-of-life Commercial Support Available Old Architecture
v6 πŸ›  Maintained (community + TWG) Old + New (Interop Layer)
v7 πŸš€ Active Development Old + New (Full Support)

react-native-video v7 introduces full support for the new React Native architecture, unlocking better performance, improved consistency, and modern native modules.


πŸ“š Documentation & Examples

πŸš€ Quick Start

Requirements

  • React Native 0.75 or higher
  • react-native-nitro-modules (>=0.27.2) - Please see nitro requirements

Install

react-native-video requires react-native-nitro-modules (>=0.27.2) in your project.

npm install react-native-nitro-modules

Then install react-native-video

# Install the alpha version of react-native-video v7
npm install react-native-video@next

# Install pods
cd ios && pod install
For react-native < 0.80 `react-native` < 0.80 have bug that prevents to properly handle errors by nitro modules on Android. We highly recommend to apply bellow patch for `react-native-nitro-modules` to fix this issue. You can apply it using `patch-package`.

Without this patch you won't be able "recognize" errors, all will be thrown as unknown errors.

see installation guide

Usage

import { useVideoPlayer, VideoView } from 'react-native-video';

export default () => (
  const player = useVideoPlayer(
    'https://www.w3schools.com/html/mov_bbb.mp4',
    (_player) => {
      _player.play();
    }
  );

  <VideoView
    player={player}
    style={{ width: '100%', aspectRatio: 16 / 9 }}
    controls
  />
);

🧩 Plugins

Offline SDK Preview

1 Β· πŸ“₯ Offline SDK

Enable offline streaming with full control over downloads, license lifecycle, secure storage, and media access.

  • Track selection (bitrate, audio, subtitles)
  • Pause / resume & background queueing
  • Expiration & auto-cleanup
  • Built for Android & iOS
  • β†’ Read the SDK Docs

2 Β· πŸ§ͺ Architecture

Write your own plugins to extend library logic, attach analytics or add custom workflows - without forking the core SDK.
β†’ Plugin documentation


πŸ’Ό TWG Services & Products

Offering Description
Professional Support Packages Priority bug-fixes, guaranteed SLAs, roadmap influence
Issue Booster Fast-track urgent fixes with a pay‑per‑issue model
Offline Video SDK Plug‑and‑play secure download solution for iOS & Android
Integration Support Hands‑on help integrating video, DRM & offline into your app
Free DRM Token Generator Generate Widevine / FairPlay tokens for testing
Ready Boilerplates Ready-to-use apps with offline HLS/DASH DRM, video frame scrubbing, TikTok-style video feed, background uploads, Skia-based frame processor (R&D phase), and more
React Native Video Upgrade Guide Common upgrade pitfalls & how to solve them

See how TWG helped Learnn ship a world‑class player in record time - case study.

Contact us at hi@thewidlarzgroup.com

🌍 Social

πŸ“° Community & Media

  • πŸ—½ React Summit US – How TWG helped Learnn boost video performance on React Native.
    Watch the talk Β»

  • 🧨 v7 deep dive – Why we’re building v7 with Nitro Modules Watch on X Β»

  • πŸ› οΈ Well-maintained open-source library - What does it truly mean? - Bart's talk for React Native Warsaw Watch here Β»

  • πŸ“Ί β€œOver the Top” Panel - Building Streaming Apps for Mobile, Web, and Smart TVs - Bart giving his insights on the industry Watch here Β»