▶️ Watch example video

⚠️ 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:

- react-native-reanimated
- react-native-gesture-handler v2 or v1
- 42-react-native-orientation-locker
- react-native-safe-area-context
- 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 (
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 ` 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