React Native Video Player

Common errors

• Invariant Violation: requireNativeComponent: 'RCTVideo' was not found in the UIManager.

  cause The native module for react-native-video is not correctly linked or found by React Native.
  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.

• TypeError: null is not an object (evaluating 'videoRef.current.play')

  cause The `videoRef.current` is null, meaning the ref has not yet been attached to the `Video` component, or the component has unmounted.
  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.

Warnings

• breaking 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install react-native-video npm
• yarn add react-native-video yarn
• pnpm add react-native-video pnpm

Imports

• Video
  wrong:

  import { Video } from 'react-native-video';

  correct:

  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.

Quickstart

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;