Skip to content
This repository has been archived by the owner on Nov 27, 2023. It is now read-only.

▶️ An excellent video player controller that offers animation, performance, interactivity, and customization.

License

Notifications You must be signed in to change notification settings

alantoa/react-native-reanimated-player

Repository files navigation

React Native Reanimated Player

Reanimated v2 version npm npm runs with expo

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

⚠️ Expo

This is the react-native-video version, If you use Expo, please check out expo-reanimated-av-player!

Installation

First you have to follow installation instructions of:

If react-native-gesture-handler version >= 2:

yarn add react-native-reanimated-player

else use v1:

yarn add react-native-reanimated-player@1

Example usage

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

  return (
    <VideoPlayer
      source={uri}
      headerTitle={'Title in full screen mode'}
      onTapBack={() => {
        Alert.alert('onTapBack');
      }}
      onTapMore={() => {
        Alert.alert('onTapMore');
      }}
      onPausedChange={state => {
        Alert.alert(`onPausedChange: ${state}`);
        setPaused(state);
      }}
      videoHeight={videoHeight}
      paused={paused}
      isFullScreen={isFullScreen}
    />
  );
};

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

TODO list

  • Add more custom props
  • Add Previous & Next button
  • Rewrite the gesture section with react-native-gusture-handle V2
  • Add expo-av support
  • ...and more

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
children JSX child components to be rendered under video player controls undefined
onPostProgress function callback function that is called every progressUpdateInterval milliseconds with info about which position the media is currently playing undefined
onPostSeek function callback function that is called when a seek completes undefined