Back to packageRELEASE DETAILS

2.2.2

npm

42-react-native-reanimated-player

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

Published24 Nov 2022

Direct dependencies31

Transitive dependenciesNot calculated

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.

Declared dependencies 39

Native requirements

31 direct targetsNot calculated transitive count

Package / target	Requirement	Relationship
@gorhom/portal Environment { "local_name": "@gorhom/portal", "alias": false, "peer_metadata": null }	`^1.0.12`	runtime
lodash.padstart Environment { "local_name": "lodash.padstart", "alias": false, "peer_metadata": null }	`^4.6.1`	runtime
@babel/core Environment { "local_name": "@babel/core", "alias": false, "peer_metadata": null }	`^7.12.9`	development
@babel/runtime Environment { "local_name": "@babel/runtime", "alias": false, "peer_metadata": null }	`^7.12.5`	development
@react-native-community/eslint-config Environment { "local_name": "@react-native-community/eslint-config", "alias": false, "peer_metadata": null }	`^2.0.0`	development
@react-navigation/core Environment { "local_name": "@react-navigation/core", "alias": false, "peer_metadata": null }	`*`	development
@release-it/conventional-changelog Environment { "local_name": "@release-it/conventional-changelog", "alias": false, "peer_metadata": null }	`^2.0.0`	development
@types/jest Environment { "local_name": "@types/jest", "alias": false, "peer_metadata": null }	`^26.0.23`	development
@types/react Environment { "local_name": "@types/react", "alias": false, "peer_metadata": null }	`17.0.2`	development
@types/react-native Environment { "local_name": "@types/react-native", "alias": false, "peer_metadata": null }	`^0.66.4`	development
@types/react-native-video Environment { "local_name": "@types/react-native-video", "alias": false, "peer_metadata": null }	`^5.0.10`	development
@types/react-test-renderer Environment { "local_name": "@types/react-test-renderer", "alias": false, "peer_metadata": null }	`^17.0.1`	development
@typescript-eslint/eslint-plugin Environment { "local_name": "@typescript-eslint/eslint-plugin", "alias": false, "peer_metadata": null }	`^5.7.0`	development
@typescript-eslint/parser Environment { "local_name": "@typescript-eslint/parser", "alias": false, "peer_metadata": null }	`^5.7.0`	development
babel-jest Environment { "local_name": "babel-jest", "alias": false, "peer_metadata": null }	`^26.6.3`	development
eslint Environment { "local_name": "eslint", "alias": false, "peer_metadata": null }	`^7.14.0`	development
jest Environment { "local_name": "jest", "alias": false, "peer_metadata": null }	`^26.6.3`	development
lottie-react-native Environment { "local_name": "lottie-react-native", "alias": false, "peer_metadata": null }	`^5.0.1`	development
metro-react-native-babel-preset Environment { "local_name": "metro-react-native-babel-preset", "alias": false, "peer_metadata": null }	`^0.66.2`	development
react-native Environment { "local_name": "react-native", "alias": false, "peer_metadata": null }	`0.66.4`	development
react-native-awesome-slider Environment { "local_name": "react-native-awesome-slider", "alias": false, "peer_metadata": null }	`^2.0.4`	development
react-native-builder-bob Environment { "local_name": "react-native-builder-bob", "alias": false, "peer_metadata": null }	`^0.18.2`	development
react-native-gesture-handler Environment { "local_name": "react-native-gesture-handler", "alias": false, "peer_metadata": null }	`^2.3.2`	development
42-react-native-orientation-locker Environment { "local_name": "42-react-native-orientation-locker", "alias": false, "peer_metadata": null }	`*`	development
react-native-reanimated Environment { "local_name": "react-native-reanimated", "alias": false, "peer_metadata": null }	`2.1.0`	development
react-native-safe-area-context Environment { "local_name": "react-native-safe-area-context", "alias": false, "peer_metadata": null }	`^4.2.2`	development
react-native-video Environment { "local_name": "react-native-video", "alias": false, "peer_metadata": null }	`^5.2.0`	development
react-test-renderer Environment { "local_name": "react-test-renderer", "alias": false, "peer_metadata": null }	`17.0.2`	development
release-it Environment { "local_name": "release-it", "alias": false, "peer_metadata": null }	`*`	development
typescript Environment { "local_name": "typescript", "alias": false, "peer_metadata": null }	`^4.4.4`	development
@react-navigation/core Environment { "local_name": "@react-navigation/core", "alias": false, "peer_metadata": null }	`*`	peer
lottie-react-native Environment { "local_name": "lottie-react-native", "alias": false, "peer_metadata": null }	`>=4.0.0`	peer
react Environment { "local_name": "react", "alias": false, "peer_metadata": null }	`*`	peer
react-native Environment { "local_name": "react-native", "alias": false, "peer_metadata": null }	`*`	peer
react-native-awesome-slider Environment { "local_name": "react-native-awesome-slider", "alias": false, "peer_metadata": null }	`>=2.0.0`	peer
react-native-gesture-handler Environment { "local_name": "react-native-gesture-handler", "alias": false, "peer_metadata": null }	`>=2.0.0`	peer
42-react-native-orientation-locker Environment { "local_name": "42-react-native-orientation-locker", "alias": false, "peer_metadata": null }	`*`	peer
react-native-reanimated Environment { "local_name": "react-native-reanimated", "alias": false, "peer_metadata": null }	`>=2.0.0`	peer
react-native-safe-area-context Environment { "local_name": "react-native-safe-area-context", "alias": false, "peer_metadata": null }	`*`	peer

Distribution files

1 collected

Distribution 1

Source distribution

Source file

Checksums from source

{
  "integrity": "sha512-YMadKeVRe8KJ/pdmKdMvSSSSTqmv/msloX41pBYuqwbuNEOvx2Fbt9ko2OVvhXLcS9Tb2Hek7ajrebnZY684Hg==",
  "shasum": "07fc5426415d93c8aec7baeb13d3d531c10e8926",
  "tarball": "https://registry.npmjs.org/42-react-native-reanimated-player/-/42-react-native-reanimated-player-2.2.2.tgz",
  "fileCount": 87,
  "unpackedSize": 427621,
  "signatures": [
    {
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
      "sig": "MEUCIQCXaaxcLm1IPG9u5DkAbD8JXBjD/gvOl01+2g5epSBmRQIgIkQyPi+OQwiUkr5t6whsK9W6woKl9HDC45WAC7AvakM="
    }
  ],
  "npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf10EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVkQ//SDn8EvG9dQ/PIIadX+P9YRZ8RNCWlJgKlYXFKHIxmSjNjJgG\r\nVMbnblywaqoUG9xNIz1Ph7rfy+vLblAQ17HJWAUHAjprcw1cQ//n3xDF3lbb\r\nU+U1yghxlRkzPLOFBVexTlpy8bw7wLHB+BxIq82EBE93krtt9j5X8pL8RwDK\r\nhTfEEAc0OgrcpQgQC0GocKV/fjKr4lBsGRxmsp5Ovqda8ugu1KTnX+Fn31Zc\r\ndPnnrc0DDjZxAuC1IUGNQQri9SbqClfLpkTSQkffzw4vEfgwY6psz2NoJ1eo\r\neVMJqKDF9rUgliNL9+QHviY5Nl16Zq/9RoPnLs8bMRT0NFSz9dVjseAT7miZ\r\n+Roo1nV88abP/3Wf6wfDcHiKNrbjyrdq0JKj/hsiULcb1jxfcmzBvXtOcbKh\r\nJZzW3fNz0UgPjwh0TtK14w4QYshhFa0KW08ssX9zI3I4+bDd0jbN1AZBTMyV\r\nkQP5IEj2BKt1Wf+QC2S4sBug7AIacfCpUDKnzABazUuJ7dJKBqSu34TcleZ2\r\nFnKkzedkpSFI2+KptPHB9T3QsS3/J94pK5m8Duooo+sazXXjvsSCedacDCRI\r\n0ghYpot3bboZhYAqrRFnLJJ5Zg9SArL1Xe+eMnqzyM2VOPCOKTnn8XqeIGWE\r\naAXEFNLPTIrg22F7ItIZT10mHczvcSt8bqQ=\r\n=Jww9\r\n-----END PGP SIGNATURE-----\r\n"
}

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_version:6aa90ef4c62259d2f4ac6a207b02f18e75c1085cb1fa1ed55b2be239a99c5ca4

Other collected versions

2.2.516 Jan 2.2.425 Nov 2.2.325 Nov 2.2.122 Nov View all collected versions →