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:

Custom Video Control For React Native

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

Add Comment