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.
Video
✓ import Video from 'react-native-video';
✗ import { Video } from 'react-native-video';
The primary video component is a default export. Named imports like `{ Video }` will fail.
VideoRef
✓ import type { VideoRef } from 'react-native-video';
This is a TypeScript type for ref management, typically used with `useRef` or `createRef`.
VideoProperties
✓ import type { VideoProperties } from 'react-native-video';
This TypeScript interface defines the props accepted by the `<Video />` component.
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;
Debug
Known issues
breakingVersion 7.0.0 (currently in beta) introduces significant breaking changes. Features like DAI support (feat!: add DAI support) were introduced in v6.19.0 as breaking changes for that specific feature, but the full v7 release will have broader API overhauls.fixReview the v7 changelog and migration guide carefully upon its stable release. Expect prop name changes, method signature alterations, and potentially new integration steps for native modules.
affects: >=7.0.0-beta.1
gotchaManual linking of native modules may be required for older React Native versions or certain build environments, particularly on iOS and Android. Auto-linking may not always be sufficient or correctly configured, leading to runtime errors.fixConsult the `react-native-video` documentation for manual linking instructions specific to iOS (Podfile) and Android (settings.gradle, build.gradle). Ensure your target SDK versions meet the library's requirements.
affects: <6.x, >=6.x if auto-linking fails
gotchaPlayback issues, such as black screens, crashes, or incorrect audio focus, are often platform-specific (iOS vs. Android) and can be sensitive to device models, OS versions, and specific video codecs/formats.fixVerify the video source URL is accessible and the format is supported. Check device logs for native errors. Ensure proper `resizeMode` and `style` props are applied. Refer to the GitHub issues for known platform-specific bugs and workarounds, as many fixes are continuously being applied in beta versions.
affects: >=6.0.0
Errors
Common errors & fixes
Invariant Violation: requireNativeComponent: 'RCTVideo' was not found in the UIManager.
The native module for react-native-video is not correctly linked or found by React Native.
fixRun `npx react-native link react-native-video` (for older RN versions) or ensure auto-linking is working. For iOS, run `pod install` in your `ios/` directory. For Android, ensure `new VideoPackage()` is added to `MainApplication.java` if using a manual setup, or verify `settings.gradle` and `build.gradle` are correctly configured for auto-linking.
TypeError: null is not an object (evaluating 'videoRef.current.play')
The `videoRef.current` is null, meaning the ref has not yet been attached to the `Video` component, or the component has unmounted.
fixEnsure you are using `useRef` correctly and accessing `videoRef.current` only after the component has rendered. Add null checks (e.g., `if (videoRef.current) { videoRef.current.play(); }`) before attempting to call methods on the ref. Audit
Dependencies
reactrequiredPeer dependency for React Native component usage.
react-nativerequiredCore dependency for React Native application development.