2.2.5 • Published 2 years ago
42-react-native-reanimated-player v2.2.5
⚠️ 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:
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
andreact-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: