react-native-reanimated-player
Version:
A react-native video player that interacts like Youtube player, built upon Reanimted v2 & react-native-gesture-handle
327 lines (305 loc) • 8.73 kB
Markdown
<div align="center">
<blockquote><i>`JSThread` to `JSThread`, `UIThread` to `UIThread`.</i></blockquote>
<h1 align="center">React Native Reanimated Player</h1>
[](https://www.npmjs.com/package/react-native-reanimated-player) [](https://www.npmjs.com/package/react-native-reanimated-player) [](https://www.npmjs.com/package/react-native-reanimated-player) [](https://expo.io/)
<h3 align="center">100% written in Typescript video player component, interaction is like Youtube player.</h3>
</div>
<div align="center">
<table style='width:100%;'>
<tr>
<td><h4 align='center'>Basic</h4></td>
<td><h4 align='center'><a href="https://github.com/alantoa/react-native-reanimated-player/tree/main/example" >YouTube Player(advanced)</a></h4></td>
</tr>
<tr>
<td><img width="260" height="480" src="./assets/example.gif" alt="basic usage"></td>
<td><img width="221" height="480" src="./assets/example2.gif" alt="Custom usage"></td>
</tr>
</table>
</div>
<h4 align='center'><a href="https://twitter.com/alan_toa/status/1507732889181786118" >▶️ Watch example video</a></h4>
## ⚠️ 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/)
- [react-native-orientation-locker](https://github.com/wonday/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)
- [react-native-lottie](https://github.com/lottie-react-native/lottie-react-native)
If `react-native-gesture-handler` version >= 2:
```sh
yarn add react-native-reanimated-player
```
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 (
<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:
<table>
<tr>
<td>Name</td>
<td>Type</td>
<td>Description</td>
<td>Required</td>
<td>Default Value</td>
</tr>
<tr>
<td>theme</td>
<td>object</td>
<td>The slider theme color</td>
<td>❌</td>
<td>
{
// 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
}
</td>
</tr>
<tr>
<td>showOnStart</td>
<td>boolean</td>
<td>control view init show</td>
<td>❌</td>
<td>false</td>
</tr>
<tr>
<td>onEnterFullscreen</td>
<td>function</td>
<td>on enter fullscreen callback</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>onExitFullscreen</td>
<td>function</td>
<td>on exit fullscreen callback</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>controlTimeout</td>
<td>nubmer</td>
<td>How long to hide the control view after showing</td>
<td>❌</td>
<td>2000</td>
</tr>
<tr>
<td>videoDefaultHeight</td>
<td>number</td>
<td>video default height</td>
<td>❌</td>
<td>screenWidth * (9 / 16)</td>
</tr>
<tr>
<td>headerBarTitle</td>
<td>string</td>
<td>header bar title on fullscreen mode</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>onTapBack</td>
<td>function</td>
<td>tap header bar Icon-'Back' callback</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>navigation</td>
<td>any</td>
<td>navigation</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>autoPlay</td>
<td>boolean</td>
<td>auto play</td>
<td>❌</td>
<td>false</td>
</tr>
<tr>
<td>onToggleAutoPlay</td>
<td>function</td>
<td>on toggle auto play</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>onTapMore</td>
<td>function</td>
<td>tap headerbar Icon-'More' callback</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>doubleTapInterval</td>
<td>number</td>
<td>double tap interval</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>paused</td>
<td>boolean</td>
<td>video paused</td>
<td>✅</td>
<td>undefined</td>
</tr>
<tr>
<td>onPausedChange</td>
<td>boolean</td>
<td>on change video paused</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>onTapPause</td>
<td>function</td>
<td>on tap video paused</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>sliderProps</td>
<td>object</td>
<td><a href="https://github.com/alantoa/react-native-awesome-slider/" >react-native-awesome-slider</a> props</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>videoHeight</td>
<td>Animated.SharedValue</td>
<td>video height</td>
<td>✅</td>
<td> width * (9 / 16);</td>
</tr>
<tr>
<td>customAnimationStyle</td>
<td>Animated Viewstyle</td>
<td>video height</td>
<td>❌</td>
<td>width * (9 / 16);</td>
</tr>
<tr>
<td>onCustomPanGesture</td>
<td>PanGesture</td>
<td>custom pan gesture</td>
<td>❌</td>
<td>width * (9 / 16);</td>
</tr>
<tr>
<td>isFullScreen</td>
<td>Animated ShareValue</td>
<td>fullScreen status</td>
<td>✅</td>
<td>undefined</td>
</tr>
<tr>
<td>disableControl</td>
<td>boolean</td>
<td>control view status</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>renderBackIcon</td>
<td>JSX</td>
<td>custom back icon</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>renderFullScreenBackIcon</td>
<td>JSX</td>
<td>custom full's fullscreen icon</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>renderMore</td>
<td>JSX</td>
<td>custom more icon</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>renderFullScreen</td>
<td>JSX</td>
<td>custom fullscreen icon</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>children</td>
<td>JSX</td>
<td>child components to be rendered under video player controls</td>
<td>❌</td>
<td>undefined</td>
</tr>
<tr>
<td>onPostProgress</td>
<td>function</td>
<td>callback function that is called every progressUpdateInterval milliseconds with info about which position the media is currently playing</td>
<td>❌</td>
<td>undefined
</tr>
<tr>
<td>onPostSeek</td>
<td>function</td>
<td>callback function that is called when a seek completes</td>
<td>❌</td>
<td>undefined
</tr>
</table>