9.5 KiB
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-videothat is currently in active development. You can expect breaking changes and missing features. We are working on the documentation and examplesIf 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
- 📖 Documentation - In progress 🏗️, will be available soon
- 📦 Example: Basic Usage
- 📦 Example: Free DRM Stream
- 📦 Example: Offline SDK integration
🚀 Quick Start
Requirements
- React Native 0.75 or higher
react-native-nitro-modules(>=0.24.0) - Please see nitro requirements
Install
react-native-video requires react-native-nitro-modules (>=0.24.0) 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.
diff --git a/node_modules/react-native-nitro-modules/cpp/core/HybridFunction.hpp b/node_modules/react-native-nitro-modules/cpp/core/HybridFunction.hpp
index aefd987..c2e06fb 100644
--- a/node_modules/react-native-nitro-modules/cpp/core/HybridFunction.hpp
+++ b/node_modules/react-native-nitro-modules/cpp/core/HybridFunction.hpp
@@ -23,6 +23,10 @@ struct JSIConverter;
#include <string>
#include <type_traits>
+#ifdef ANDROID
+#include <fbjni/fbjni.h>
+#endif
+
namespace margelo::nitro {
using namespace facebook;
@@ -118,6 +122,10 @@ public:
std::string funcName = getHybridFuncFullName<THybrid>(kind, name, hybridInstance.get());
std::string message = exception.what();
throw jsi::JSError(runtime, funcName + ": " + message);
+ } catch (const jni::JniException& exception) {
+ std::string funcName = getHybridFuncFullName<THybrid>(kind, name, hybridInstance.get());
+ std::string message = exception.what();
+ throw jsi::JSError(runtime, funcName + ": " + message);
#pragma clang diagnostic pop
#endif
} catch (...) {
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
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
- 🐦 X / Twitter - follow product & release updates
- 💬 Discord - talk to the community and us
- 💼 LinkedIn - see TWG flexing
📰 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 »