A dedicated progress slider for video players in React-native.

• superior performance thanks to Reanimated library
• clean and simple implementation that makes it easy to extend
• integrated buffer indicator for online streams
• fully written in Typescript
• easiest way to use
• RTL support

This module uses react-native-reanimated and react-native-gesture-handler as peer dependencies. make sure You have installed them correctly. You may also install react-native-video. Check out these links to proceed their installation process:

• reanimated installation
• gesture-handler installation
• video installation

Once you are done with above, add the main package with one of below commands:

npm i rn-video-slider

yarn add rn-video-slider

That will be it.

import {Dimensions} from "react-native";
import Slider, {ISlider} from "rn-video-slider";

const ControlSet = () => {

  const sliderRef = React.createRef<ISlider>();
  //call below function in video progress callback
  //sliderRef.current?.setProgress(0.5);

  const _onSlide = (value: number) => {
    //seek your video with value
  };
  
  //this simply means 80% of screen's width
  const sliderWdith = Dimensions.get('window').width * 0.8;

  return (
    <Slider
      ref={sliderRef}
      width={sliderWdith}
      onSlide={_onSlide}
    />
  )
}

Here is the list of properties that you can set or override.

Note: Root view has a default padding equal to 10. Override it in root style if you need to.

Here is the list of callbacks to use.

Here is the list of methods that can be called via reference.

Note: progress values are a float from 0 to 1

• write necessary tests
• add expansion feature
• more and better demo gifs
• write a better example
• fix delay between thumb and track while sliding fast
• implement tap to seek feature
• replace the deprecated useAnimatedGestureHandler with newer API
• add style prop for root view

If you have any idea to improve or fix something, open an issue and state it in details. You will always be welcomed.

• react-native-reanimated: 2.x, 3.x
• react-native-gesture-handler: 2.x

The idea behind this is from react-native-reanimated-slider. Since the mentioned module is written with Reanimated v1 API, and hasn't been updated for a long period, I decided to remake it.

MIT License