Published on

How to use react-native-reanimated-player?

Authors

< ⚠️ Deving, This library is work in progress!

JSThread to JSThread, UIThread to UIThread.

React Native Awesome Video Player

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


Installation

First you have to follow installation instructions of:

yarn add react-native-reanimated-player

Example usage

import VideoPlayer from 'react-native-reanimated-player'

export const Example = () => {
  return (
    <VideoPlayer
      source={uri}
      headerTitle={'Title in full screen mode'}
      onTapBack={() => {
        Alert.alert('onTapBack')
      }}
      onTapMore={() => {
        Alert.alert('onTapMore')
      }}
      onToggleAutoPlay={(state: boolean) => {
        console.log(`onToggleAutoPlay state: ${state}`)
      }}
    />
  )
}

Features

  • 100% written in TypeScript.
  • 100% built upon react-native-reanimated and react-native-gusture-handle.
  • 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
  • ...and more

Configuration

...