2.2.5 • Published 1 year ago

42-react-native-reanimated-player v2.2.5

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Reanimated v2 version npm npm runs with expo

⚠️ 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@2

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: