@theladbiblegroup/react-native-scrubber

A video/audio scrubber for react native.

Showing:

Popularity

Downloads/wk

49

GitHub Stars

52

Maintenance

Last Commit

1yr ago

Contributors

6

Package

Dependencies

0

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

NameTypeDescription
valueNumberThe current value of the video/audio.
bufferedValueNumberThe current buffered value of the video/audio.
totalDurationNumberThe 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.
onSlidingStartFunctionOptional callback that is called when the user starts scrubbing.
onSlideFunctionOptional callback that is called while the user is scrubbing. The callback takes the current scrubbing position in seconds as its first argument.
onSlidingCompleteFunctionCallback 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.
trackBackgroundColorStringHex color representing the color of the background (Unfilled) track
trackColorStringHex color representing the color of the foregroud (Filled) track.
bufferedTrackColorStringHex color representing the color of the buffered track which sits inbetween the background track and the progress track.
scrubbedColorStringHex 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.
displayedValueStyleObjectThis stlye is applied to both the displayed values
displayValuesBooleanDefaults 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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100