Step 1. Add the JitPack repository to your build file
Add it in your root settings.gradle at the end of repositories:
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
mavenCentral()
maven { url 'https://jitpack.io' }
}
}
Add it in your settings.gradle.kts at the end of repositories:
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
mavenCentral()
maven { url = uri("https://jitpack.io") }
}
}
Add to pom.xml
<repositories>
<repository>
<id>jitpack.io</id>
<url>https://jitpack.io</url>
</repository>
</repositories>
Add it in your build.sbt at the end of resolvers:
resolvers += "jitpack" at "https://jitpack.io"
Add it in your project.clj at the end of repositories:
:repositories [["jitpack" "https://jitpack.io"]]
Step 2. Add the dependency
dependencies {
implementation 'com.github.react-native-community:react-native-video:'
}
dependencies {
implementation("com.github.react-native-community:react-native-video:")
}
<dependency>
<groupId>com.github.react-native-community</groupId>
<artifactId>react-native-video</artifactId>
<version></version>
</dependency>
libraryDependencies += "com.github.react-native-community" % "react-native-video" % ""
:dependencies [[com.github.react-native-community/react-native-video ""]]
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.If you have any questions, please contact us at hi@thewidlarzgroup.com.
| Feature | Status | |---------|--------| | 📱 Plays all video formats natively supported by iOS/Android | ✅ Available | | ▶️ Local and remote playback | ✅ Available | | 🔁 Streaming: HLS • DASH • SmoothStreaming | ✅ Available | | 🧩 Expo plugin support | ✅ Available | | 📴 Offline playback, video download, support for side-tracks and side-captions (via optional SDK) | ✅ Available | | 📱 Picture in Picture | ✅ Available | | 🎚️ Fine-grained control over tracks, buffering & events | 🏗️ In Development | | 🧠 Advanced control over playback and buffering | ✅ Available | | 🔐 DRM: Widevine & FairPlay (See free DRM stream example) | ✅ Available | | 🌐 Basic Web Support | 📝 TODO | | 📺 TV Support | 📝 TODO | | 🥽 VisionOS Support | 📝 TODO |
| 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.
react-native-nitro-modules (>=0.31.10) - Please see nitro requirementsreact-native-video requires react-native-nitro-modules (>=0.31.10) in your project.
npm install react-native-nitro-modules
Then install react-native-video
# Install the beta version of react-native-video v7
npm install react-native-video@beta
# Install pods
cd ios && pod install
<details>
<summary>For react-native < 0.80</summary>
`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.
</details>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
/>
);
Enable offline streaming with full control over downloads, license lifecycle, secure storage, and media access.
Write your own plugins to extend library logic, attach analytics or add custom workflows - without forking the core SDK.
→ Plugin documentation
| 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
🗽 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 »