Installation

First you have to follow installation instructions of:

• react-native-reanimated v2
• react-native-gesture-handler v2
• expo-screen-orientation
• react-native-safe-area-context
• expo-av
• lottie-react-native no support web
  • react-native-web-lottie

yarn add expo-reanimated-av-player

Example usage

import VideoPlayer from 'expo-reanimated-av-player';
import { useSharedValue } from 'react-native-reanimated';
export const Example = () => {
  const videoHeight = useSharedValue(0);
  const isFullScreen = useSharedValue(false);

  return (
    <VideoPlayer
      source={videoInfo.source}
      headerBarTitle={`fullscreen title`}
      onToggleAutoPlay={(state: boolean) => {
        console.log(`onToggleAutoPlay state: ${state}`);
      }}
      videoDefaultHeight={VIDEO_DEFAULT_HEIGHT}
      videoHeight={videoHeight}
      resizeMode="cover"
      isFullScreen={isFullScreen}
      onTapBack={() => {
        console.log('onTapBack');
      }}
      onTapMore={() => {
        console.log('onTapMore');
      }}
    />
  );
};

Features

• 100% written in TypeScript.
• 100% built upon react-native-reanimated and react-native-gusture-handler.
• Support gestures switch full screen.
• Support double tap seek to back or ahead.
• ...

Configuration

The <VideoPlayer/> component has the following configuration properties: