`JSThread` to `JSThread`, `UIThread` to `UIThread`.

React Native Reanimated Expo Player

100% written in Typescript video player component, interaction is like Youtube player.

Player basic usage

▶️ Custom usage for example

basic usage Custom usage

▶️ Watch example video

Installation

First you have to follow installation instructions of:

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:

Name Type Description Required Default Value
theme object The slider theme color { // Color to fill the progress in the seekbar minimumTrackTintColor: string, // Color to fill the background in the seekbar maximumTrackTintColor: string, // Color to fill the cache in the seekbar cacheTrackTintColor: string, // Color to fill the bubble backgroundColor disableMinTrackTintColor: string, // Disabled color to fill the progress in the seekbar bubbleBackgroundColor: string }
showOnStart boolean control view init show false
onEnterFullscreen function on enter fullscreen callback undefined
onExitFullscreen function on exit fullscreen callback undefined
controlTimeout nubmer How long to hide the control view after showing 2000
videoDefaultHeight number video default height screenWidth * (9 / 16)
headerBarTitle string header bar title on fullscreen mode undefined
onTapBack function tap header bar Icon-‘Back’ callback undefined
navigation any navigation undefined
autoPlay boolean auto play false
onToggleAutoPlay function on toggle auto play undefined
onTapMore function tap headerbar Icon-‘More’ callback undefined
doubleTapInterval number double tap interval undefined
paused boolean video paused undefined
onPausedChange boolean on change video paused undefined
onTapPause function on tap video paused undefined
sliderProps object react-native-awesome-slider props undefined
videoHeight Animated.SharedValue video height width * (9 / 16);
customAnimationStyle Animated Viewstyle video height width * (9 / 16);
onCustomPanGesture PanGesture custom pan gesture width * (9 / 16);
isFullScreen Animated ShareValue fullScreen status undefined
disableControl boolean control view status undefined
renderBackIcon JSX custom back icon undefined
renderFullScreenBackIcon JSX custom full’s fullscreen icon undefined
renderMore JSX custom more icon undefined
renderFullScreen JSX custom fullscreen icon undefined

GitHub

View Github