{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-native-video"],"cli":null},"imports":["import Video from 'react-native-video';","import type { VideoRef } from 'react-native-video';","import type { VideoProperties } from 'react-native-video';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}