[![React Native Video Component](./docs/static/banners/rnv-banner.png)](https://sdk.thewidlarzgroup.com/?utm_source=rnv&utm_medium=readme&utm_id=banner) 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](mailto:hi@thewidlarzgroup.com). ## ๐Ÿ” Features | 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](https://docs.thewidlarzgroup.com/offline-video-sdk?utm_source=rnv&utm_medium=readme&utm_id=features-text)) | โœ… 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](https://www.thewidlarzgroup.com/services/free-drm-token-generator-for-video?utm_source=rnv&utm_medium=readme&utm_id=free-drm)) | โœ… Available | | ๐ŸŒ Basic Web Support | โœ… Available | | ๐Ÿ“บ TV Support | ๐Ÿ“ [TODO](https://github.com/TheWidlarzGroup/react-native-video/issues/4607) | | ๐Ÿฅฝ VisionOS Support | ๐Ÿ“ [TODO](https://github.com/TheWidlarzGroup/react-native-video/issues/4608) | ## โœจ Project Status | Version | State | Architecture | |---------|-------|--------------| | **v5 and lower** | โŒ End-of-life [Commercial Support Available](https://www.thewidlarzgroup.com/blog/react-native-video-upgrade-challenges-custom-maintenance-support#how-we-can-help?utm_source=rnv&utm_medium=readme&utm_id=upgradev5) | 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](https://docs.thewidlarzgroup.com/react-native-video/docs/v7/intro) - ๐Ÿ“ฆ [Example: Basic Usage](https://github.com/TheWidlarzGroup/react-native-video/tree/v7/example) - ๐Ÿ“ฆ [Example: Free DRM Stream](https://www.thewidlarzgroup.com/services/free-drm-token-generator-for-video?utm_source=rnv&utm_medium=readme&utm_id=free-drm) ## ๐Ÿš€ Quick Start ### Requirements - React Native 0.75 or higher - `react-native-nitro-modules` (>=0.31.10) - Please see [nitro requirements](https://nitro.margelo.com/docs/minimum-requirements) ### Install `react-native-video` requires `react-native-nitro-modules` (>=0.31.10) in your project. ```bash npm install react-native-nitro-modules ``` Then install `react-native-video` ```bash # Install the beta version of react-native-video v7 npm install react-native-video@beta # 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](https://docs.thewidlarzgroup.com/react-native-video/docs/v7/installation#patch-for-react-native--080)
### Usage ```tsx import { useVideoPlayer, VideoView } from 'react-native-video'; export default () => ( const player = useVideoPlayer( 'https://www.w3schools.com/html/mov_bbb.mp4', (_player) => { _player.play(); } ); ); ``` --- ## :inbox_tray: We're building a Pro Player! Offline SDK Preview We see the need for a more feature-rich video player. There is a gap between open source and commercial players, and we want to fill that gap with plugins. **Are you using a commercial player just for 1-2 features?** Maybe you are paying for a license just to get **Caching**, **Ads**, or **Analytics**? Let us know. We want to identify these missing pieces and build them, so you can switch back to open source. **This is what we have already. Check out!** * [Offline Video](https://sdk.thewidlarzgroup.com/offline-video): Logic for downloading streams (HLS/DASH) and standard video files to enable offline playback. * [Background Uploader](https://sdk.thewidlarzgroup.com/background-uploader): Handles uploads even if the app is minimized (not strictly a player plugin, but super useful). * [Chapter Markers](https://sdk.thewidlarzgroup.com/chapters): Visual markers on the timeline to navigate content.

[-> Tell us what to build next โ†](https://sdk.thewidlarzgroup.com/ask-for-plugin) or reach out to us sdk@thewidlarzgroup.com
--- ## ๐Ÿ’ผ TWG Services & Products | Offering | Description | |----------|-------------| | [**Professional Support Packages**](https://sdk.thewidlarzgroup.com/issue-booster?utm_source=rnv&utm_medium=readme&utm_campaign=professional-support-packages&contact=true) | Priority bug-fixes, guaranteed SLAs, [roadmap influence](https://github.com/orgs/TheWidlarzGroup/projects/6) | | [**Issue Booster**](https://sdk.thewidlarzgroup.com/issue-booster?utm_source=rnv&utm_medium=readme) | Fast-track urgent fixes with a payโ€‘perโ€‘issue model | | [**Offline Video SDK**](https://sdk.thewidlarzgroup.com/offline-video?utm_source=rnv&utm_medium=readme&utm_campaign=downloading&utm_id=offline-video-sdk-link) | Plugโ€‘andโ€‘play secure download solution for iOS & Android | | [**Integration Support**](https://sdk.thewidlarzgroup.com/?utm_source=rnv&utm_medium=readme&utm_campaign=integration-support&contact=true) | Handsโ€‘on help integrating video, DRM & offline into your app | | [**Free DRM Token Generator**](https://www.thewidlarzgroup.com/services/free-drm-token-generator-for-video?utm_source=rnv&utm_medium=readme&utm_id=free-drm) | Generate Widevine / FairPlay tokens for testing | | [**Ready Boilerplates**](https://sdk.thewidlarzgroup.com/showcases?utm_source=rnv&utm_medium=readme) | 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**](https://sdk.thewidlarzgroup.com/v7-migration?utm_source=rnv&utm_medium=readme&utm_id=upgrade-blog&utm_campaign=v7) | Common upgrade pitfalls & how to solve them | *See how [TWG](https://sdk.thewidlarzgroup.com/?utm_source=rnv&utm_medium=readme&utm_id=services-text) helped **Learnn** ship a worldโ€‘class player in record time - [case study](https://gitnation.com/contents/a-4-year-retrospective-lessons-learned-from-building-a-video-player-from-scratch-with-react-native).* Contact us at [hi@thewidlarzgroup.com](mailto:hi@thewidlarzgroup.com) ## ๐ŸŒ Social - ๐Ÿฆ **X / Twitter** - [follow product & release updates](https://x.com/TheWidlarzGroup) - ๐Ÿ’ฌ **Discord** - [talk to the community and us](https://discord.gg/9WPq6Yx) - ๐Ÿ’ผ **LinkedIn** - [see TWG flexing](https://linkedin.com/company/the-widlarz-group) ## ๐Ÿ“ฐ Community & Media - ๐Ÿ—ฝ **React Summit US** โ€“ How TWG helped Learnn boost video performance on React Native. [Watch the talk ยป](https://gitnation.com/contents/a-4-year-retrospective-lessons-learned-from-building-a-video-player-from-scratch-with-react-native) - ๐Ÿงจ **v7 deep dive** โ€“ Why weโ€™re building v7 with Nitro Modules [Watch on X ยป](https://x.com/krzysztof_moch/status/1854162551946478051) - ๐Ÿ› ๏ธ **Well-maintained open-source library** - What does it truly mean? - Bart's talk for React Native Warsaw [Watch here ยป](https://www.youtube.com/watch?v=RAQQwGCQNqY) - ๐Ÿ“บ **โ€œOver the Topโ€ Panel** - Building Streaming Apps for Mobile, Web, and Smart TVs - Bart giving his insights on the industry [Watch here ยป](https://youtu.be/j2b_bG-32JI)