react-native-video provides a `<Video />` component for React Native applications, enabling the playback of local and remote video files across iOS, Android, and other supported platforms. The current stable version is 6.19.1, with a highly active development branch (v7.0.0-beta.x) frequently releasing new features and bug fixes, indicating a rapid release cadence for upcoming major versions. It differentiates itself by offering comprehensive control over video playback, including features like subtitles, picture-in-picture (PIP), hardware acceleration, and support for various media formats and streaming protocols. It aims to provide a native video player experience with a declarative React Native API, often requiring native module linking and configuration. Development for v7 focuses on stabilization and new features, potentially introducing significant architectural changes.
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
The primary video component is a default export. Named imports like `{ Video }` will fail.
import Video from 'react-native-video';
This is a TypeScript type for ref management, typically used with `useRef` or `createRef`.
import type { VideoRef } from 'react-native-video';
This TypeScript interface defines the props accepted by the `<Video />` component.
import type { VideoProperties } from 'react-native-video';
This quickstart demonstrates basic video playback using the `Video` component, including remote URL sourcing, controls, and error/progress handling. It also shows how to use a `ref` for imperative control.
import React, { useRef } from 'react';
import { SafeAreaView, StyleSheet, Button } from 'react-native';
import Video from 'react-native-video';
const App = () => {
const videoRef = useRef<Video>(null);
const handlePlayPause = () => {
// In a real app, you'd manage internal state for play/pause
// and call methods on videoRef.current like .play() or .pause()
console.log('Play/Pause toggled');
};
return (
<SafeAreaView style={styles.container}>
<Video
ref={videoRef}
source={{ uri: 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4' }}
style={styles.backgroundVideo}
controls={true}
paused={false} // Set to true to initially pause
resizeMode="contain"
onBuffer={(buffer) => console.log('Buffering:', buffer)}
onError={(error) => console.error('Video error:', error)}
onProgress={(progress) => console.log('Progress:', progress.currentTime)}
/>
<Button title="Toggle Play/Pause" onPress={handlePlayPause} />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000',
},
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
width: '100%',
height: 250, // Adjust height as needed
},
});
export default App;
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.