A <Video /> element for react-native
npm install @sgrsoft/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.
- ๐ฑ Plays all video formats natively supported by iOS/Android
- โถ๏ธ Local and remote playback
- ๐ Streaming: HLS โข DASH โข SmoothStreaming
- ๐ DRM: Widevine & FairPlay (See free DRM stream example)
- ๐ด Offline playback, video download, support for side-tracks and side-captions (via optional SDK)
- ๐๏ธ Fine-grained control over tracks, buffering & events
- ๐งฉ Expo plugin support
- ๐ Basic Web Support
- ๐ฑ Picture in Picture
- ๐บ TV Support
| 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
- ๐ฆ Example: Free DRM Stream
- ๐ฆ Example: Offline SDK integration
bash
Install dependencies
yarn add react-native-videoInstall pods
cd ios && pod install
`$3
`tsx
import Video from 'react-native-video';export default () => (
source={{ uri: 'https://www.w3schools.com/html/mov_bbb.mp4' }}
style={{ width: '100%', aspectRatio: 16 / 9 }}
controls
/>
);
`---
๐งฉ Plugins
$3
#### Need Offline Video Playback in React Native?
If you're building a video-first app and need to download HLS streams for offline playback, you're in the right place.
#### ๐ Check Offline Video SDK for React Native
This SDK supports:
- ๐ Offline HLS playback
- ๐ง Multi-language audio track downloads
- ๐ฌ Subtitles support
- ๐ DRM license handling
- ๐ Analytics & state tracking
---
#### ๐ How to get access?
- Get a free trial (no credit card required)
- Use our starter project to see it in action
- Integrates with both
v6 and v7` versions๐ Start Free Trial on the SDK Platform โ
---
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
- ๐ฆ X / Twitter - follow product & release updates
- ๐ฌ Discord - talk to the community and us
- ๐ผ LinkedIn - see TWG flexing
- ๐ฝ 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 ยป