PACKAGE EXPLORERView in registry

42-react-native-reanimated-player

npm

A react-native video player that interacts like Youtube player, built upon Reanimted v2 & react-native-gesture-handle

Versions collected5

Direct dependencies31From release 2.2.5

Last observed20 Oct, 19:59 UTC

README

Current package documentation

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

React Native Reanimated Player

100% written in Typescript video player component, interaction is like Youtube player.

Player basic usage	▶️ Custom usage for example

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

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:

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

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Versions 5

Collected releases

Version	Published	Direct dependencies
2.2.5Registry latest	16 Jan 2023	31
2.2.4	25 Nov 2022	31
2.2.3	25 Nov 2022	31
2.2.2	24 Nov 2022	31
2.2.1	22 Nov 2022	31

Package advisories

No matching advisories collected

This describes our collected data; it is not a security assessment.

Repository

PENDING

xz870603611/42-react-native-reanimated-player

Shared repository data · GitHub

License detected in repository: Not collected

Metadata history

Meaningful changes

Current collected state Current

Observed since 20 Oct, 19:59 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package:9568cd9df2c70efaac45ac54f1b1963c7ac3236e376efe762918fe3808dac026