Skip to content

repodio/react-native-scrubber

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

98 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native Scrubber

A video/audio scrubber for react native.

Todo

  • Animate scrubber
  • Handle buffered value
  • Implement scrubbing
  • Scrubbing callbacks
  • Custom scrubbing thresholds and rates

Install

npm install react-native-scrubber 
or 
yarn add react-native-scrubber

import Scrubber from 'react-native-scrubber'

If you are using Expo, you are done.

If you don't use Expo, install and link react-native-gesture-handler.

Props

Name Type Description
value Number The current value of the video/audio.
bufferedValue Number The current buffered value of the video/audio.
totalDuration Number The total duration of the video/audio (Needed to calculated animations within the scrubber). Note If you supply a totalDuration of 0 the starting and ending number will display both as --:-- since we require the totalDuration to display those numbers.
onSlidingStart Function Optional callback that is called when the user starts scrubbing.
onSlide Function Optional callback that is called while the user is scrubbing. The callback takes the current scrubbing position in seconds as its first argument.
onSlidingComplete Function Callback that is called when the user releases the slider, regardless if the value has changed. The callback takes the current scrubbing position in seconds as its first argument.
trackBackgroundColor String Hex color representing the color of the background (Unfilled) track
trackColor String Hex color representing the color of the foregroud (Filled) track.
bufferedTrackColor String Hex color representing the color of the buffered track which sits inbetween the background track and the progress track.
scrubbedColor String Hex color represending the color of the foregroud (Filled) track and the dot when the scrubber is active. Also changes the color of the starting number.
displayedValueStyle Object This stlye is applied to both the displayed values
displayValues Boolean Defaults to true, if set false will hide the numbers under the scrub bar.

Example

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import Scrubber from 'react-native-scrubber'

class Example extends Component {
state = {
    scrubberValue: 0,
  }

  componentDidMount() {
    this.valueChangeInterval = setInterval(() => {
      this.setState({ 
        scrubberValue: this.state.scrubberValue + 1,
      })
    }, 200);
  }

  componentWillUnmount() {
    clearInterval(this.valueChangeInterval);
  }

  valueChange = value => {
    this.setState({ scrubberValue: value })
  }

  render() {
    return (
      <View>
        <Scrubber 
          value={this.state.scrubberValue}
          onSlidingComplete={this.valueChange}
          totalDuration={7000}
          trackColor='#666'
          scrubbedColor='#8d309b'
        />
      </View>
    );
  }
}

export default Example

FAQ

What is a scrubber?

A Scrubber is a component used for audio or video to choose where in the media the user wants to navigate to.

Why can't I just use a slider?

I tried implementing a slider in my app at first and the problem with a slider is new values will be constantly coming in due to the audio or video playing, and a slider will jerk around while the user is scrubbing. Also a user can't fine tune the exact value on large values. Also also the React Native Slider has a limiting styling and no nice animations.