FabricVideoPlayer

A React Native Fabric video player component built with ExoPlayer for Android, providing smooth video playback with real-time progress updates.

Features

• Fabric Architecture: Built for React Native's new architecture
• ExoPlayer Integration: Uses Android's ExoPlayer for robust video playback
• Real-time Progress: Continuous playback status updates (position, duration, playing state)
• Reanimated Support: Designed to work with react-native-reanimated for smooth UI animations

Setup

Prerequisites

• React Native 0.71+ with New Architecture enabled
• Android development environment

Installation

1. Install dependencies:

   yarn install

2. iOS Setup:

   cd ios && bundle install
   bundle exec pod install

3. Build and run:

   # Android
   yarn android
   
   # iOS
   yarn ios

CustomVideoPlayer API

Props

Prop	Type	Required	Description
videoURL	string	No	URL of the video to play
onPlaybackStatusUpdate	function	No	Callback for playback status updates
style	ViewStyle	No	Style object for the video player

Events

onPlaybackStatusUpdate

Called every second during video playback with current status information.

Event Data:

{
  nativeEvent: {
    isPlaying: boolean; // Whether video is currently playing
    currentTime: number; // Current playback position in milliseconds
    duration: number; // Total video duration in milliseconds
  }
}

Example Usage

import CustomVideoPlayer from './specs/VideoPlayerNativeComponent';
import { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';
import Animated from 'react-native-reanimated';

function VideoScreen() {
  const progress = useSharedValue(0);
  const duration = useSharedValue(0);

  const progressStyle = useAnimatedStyle(() => {
    const progressPercent =
      duration.value > 0 ? (progress.value / duration.value) * 100 : 0;
    return {
      width: `${progressPercent}%`,
    };
  });

  return (
    <View>
      <CustomVideoPlayer
        style={{ width: '100%', height: 250 }}
        videoURL="https://example.com/video.mp4"
        onPlaybackStatusUpdate={event => {
          progress.value = event.nativeEvent.currentTime;
          duration.value = event.nativeEvent.duration;
        }}
      />

      {/* Progress bar */}
      <View style={styles.progressContainer}>
        <Animated.View style={[styles.progressBar, progressStyle]} />
      </View>
    </View>
  );
}

Performance

The component is optimized for performance:

• UI Thread Updates: When used with react-native-reanimated shared values, progress updates happen on the UI thread
• Efficient Updates: Position updates are throttled to 1-second intervals
• Automatic Cleanup: Stops position tracking when video is paused or component unmounts

Technical Details

• Android Implementation: Uses ExoPlayer with custom view extending PlayerView
• Event System: Uses React Native's Fabric event system for efficient native-to-JS communication
• Threading: Position updates run on Android's main thread, events dispatch to JS thread