Custom Video Control For React Native

Controls elements and utilities for React Native video players.

Components Included:

• VideoControls
• ControlSlider
• ControlThumb
• ControlVideoState
• ControlFullScreen
• ControlTouchable

Hooks Included:

• useControlSlider
• useControlsVideoState
• useControlFullScreen
• useControlThumb
• useLayout
• useTapGesture / useLongPressGesture
• useTimeFromThumb
• useControlsVisibility
• usePinchGesture

Installation:

# Yarn
$ yarn add @premieroctet/react-native-video-controls

# NPM
$ npm i @premieroctet/react-native-video-controls

Basic usage:

<VideoControls
  componentsProps={componentProps}
  components={components}
  onFastForward={onFastForward}
  onFastRewind={onFastRewind}
  videoElement={
    <Video
      source={{
        uri: '/path/to/video.mp4',
      }}
      useNativeControls={false}
      onLoad={onLoad}
      onPlaybackStatusUpdate={onPlaybackStatusUpdate}
      shouldPlay
      rotation={isFullScreen ? 90 : 0}
      style={[
        { width: '100%' },
        isFullScreen
          ? {
              height: '100%',
            }
          : { aspectRatio: 16 / 9 },
      ]}
      ref={videoRef}
      pointerEvents="none"
    />
  }
/>

Preview:

Download Details:

Author: premieroctet

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/premieroctet/react-native-video-controls

License: MIT