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

React Native Reanimated Player

[![Reanimated v2 version](https://img.shields.io/github/package-json/v/alantoa/react-native-reanimated-player/master?label=Reanimated%20v2&style=flat-square)](https://www.npmjs.com/package/react-native-reanimated-player) [![npm](https://img.shields.io/npm/l/react-native-reanimated-player?style=flat-square)](https://www.npmjs.com/package/react-native-reanimated-player) [![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)](https://www.npmjs.com/package/react-native-reanimated-player) [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/)

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

## ⚠️ Expo This is the react-native-video version, If you use Expo, please check out [expo-reanimated-av-player](https://github.com/alantoa/expo-reanimated-av-player)! ## Installation First you have to follow installation instructions of: - [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/) - [react-native-gesture-handler v2 or v1](https://docs.swmansion.com/react-native-gesture-handler/) - [42-react-native-orientation-locker](https://github.com/huangnan78100/react-native-orientation-locker/) - [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) - [react-native-video](https://github.com/react-native-video/react-native-video) If `react-native-gesture-handler` version >= 2: ```sh yarn add react-native-reanimated-player@2 ``` else use v1: ```sh yarn add react-native-reanimated-player@1 ``` ## Example usage ```jsx 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 ( { 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 `` 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