Skip to main content
Version: v6

A <Video> Component for React Native

About

react-native-video is a React Native library that provides a Video component to render media content like videos and streams.

It allows you to stream video files (m3u, mpd, mp4, etc.) inside your React Native application.

  • ExoPlayer for Android
  • AVPlayer for iOS, tvOS, and visionOS
  • Windows UWP for Windows
  • HTML5 for Web
  • Trick mode support
  • Subtitles (embedded or side-loaded)
  • DRM support
  • Client-side ad insertion (via Google IMA)
  • PiP (Picture-in-Picture)
  • Embedded playback controls
  • And more

The goal of this package is to provide lightweight but full control over the player.

V6.0.0 Information

warning

Version 6: This documentation covers features available only in v6.0.0 and later. If you're unsure or need an older version, you can still use version 5.2.x.

Version 6.x requires react-native >= 0.68.2

warning

From 6.0.0-beta.8, it also requires iOS >= 13.0 (default in React Native 0.73).

For older versions of React Native, please use version 5.x.

Usage

// Load the module
import Video, { VideoRef } from 'react-native-video';

// Inside your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if needed.

const VideoPlayer = () => {
const videoRef = useRef<VideoRef>(null);
const background = require('./background.mp4');

return (
<Video
// Can be a URL or a local file.
source={background}
// Store reference
ref={videoRef}
// Callback when remote video is buffering
onBuffer={onBuffer}
// Callback when the video cannot be loaded
onError={onError}
style={styles.backgroundVideo}
/>
);
};

// Later in your styles...
var styles = StyleSheet.create({
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});
We are TheWidlarzGroupPremium support →