{"id":15204,"library":"react-native-video","title":"React Native Video Player","description":"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.","status":"active","version":"6.19.1","language":"javascript","source_language":"en","source_url":"https://github.com/TheWidlarzGroup/react-native-video","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-native-video","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-video","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-video","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React Native component usage.","package":"react","optional":false},{"reason":"Core dependency for React Native application development.","package":"react-native","optional":false}],"imports":[{"note":"The primary video component is a default export. Named imports like `{ Video }` will fail.","wrong":"import { Video } from 'react-native-video';","symbol":"Video","correct":"import Video from 'react-native-video';"},{"note":"This is a TypeScript type for ref management, typically used with `useRef` or `createRef`.","symbol":"VideoRef","correct":"import type { VideoRef } from 'react-native-video';"},{"note":"This TypeScript interface defines the props accepted by the `<Video />` component.","symbol":"VideoProperties","correct":"import type { VideoProperties } from 'react-native-video';"}],"quickstart":{"code":"import React, { useRef } from 'react';\nimport { SafeAreaView, StyleSheet, Button } from 'react-native';\nimport Video from 'react-native-video';\n\nconst App = () => {\n  const videoRef = useRef<Video>(null);\n\n  const handlePlayPause = () => {\n    // In a real app, you'd manage internal state for play/pause\n    // and call methods on videoRef.current like .play() or .pause()\n    console.log('Play/Pause toggled');\n  };\n\n  return (\n    <SafeAreaView style={styles.container}>\n      <Video\n        ref={videoRef}\n        source={{ uri: 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4' }}\n        style={styles.backgroundVideo}\n        controls={true}\n        paused={false} // Set to true to initially pause\n        resizeMode=\"contain\"\n        onBuffer={(buffer) => console.log('Buffering:', buffer)}\n        onError={(error) => console.error('Video error:', error)}\n        onProgress={(progress) => console.log('Progress:', progress.currentTime)}\n      />\n      <Button title=\"Toggle Play/Pause\" onPress={handlePlayPause} />\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#000',\n  },\n  backgroundVideo: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    bottom: 0,\n    right: 0,\n    width: '100%',\n    height: 250, // Adjust height as needed\n  },\n});\n\nexport default App;\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Review 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.","message":"Version 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.","severity":"breaking","affected_versions":">=7.0.0-beta.1"},{"fix":"Consult 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.","message":"Manual 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.","severity":"gotcha","affected_versions":"<6.x, >=6.x if auto-linking fails"},{"fix":"Verify 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.","message":"Playback 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.","severity":"gotcha","affected_versions":">=6.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Run `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.","cause":"The native module for react-native-video is not correctly linked or found by React Native.","error":"Invariant Violation: requireNativeComponent: 'RCTVideo' was not found in the UIManager."},{"fix":"Ensure 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.","cause":"The `videoRef.current` is null, meaning the ref has not yet been attached to the `Video` component, or the component has unmounted.","error":"TypeError: null is not an object (evaluating 'videoRef.current.play')"}],"ecosystem":"npm"}