@premieroctet/react-native-video-controls

react-native-video-controls

Controls elements and utilities for react-native video players (react-native-video, expo-av, etc.).

video-controls-demo.webm

Installation

NPM

npm install @premieroctet/react-native-video-controls

Yarn

yarn add @premieroctet/react-native-video-controls

Additionally, you need to install react-native-gesture-handler (at least v2) and react-native-reanimated (at least v2).

No other dependency is required, which makes the lib fully compatible with Expo.

Usage

A complete example app with a basic usage is available in the example folder.

<VideoControls
  componentsProps={componentProps}
  components={components}
  onFastForward={onFastForward}
  onFastRewind={onFastRewind}
  videoElement={
    <Video
      source={{
        uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.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"
    />
  }
/>

API

See API for the list of available components and hooks.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Inspired from react-native-video-controls