React Native Animated Progress Bar

README.md

Usage

<ProgressBar
  progress={0.1}
  ref={ref => {
    this.progressBar = ref;
  }}
/>

// Add 0.2 value in current value of progress
onUpdate() {
  this.progressBar.update(this.progressBar.value() + 0.2);
}

Properties

Prop	Description	Default
width	Progress Width.	Screen Width
progress	The progress value for the progress bar. Ranges from 0..1.	None
easingDuration	The time taken to complete the animation in milliseconds.	500
easing	Function from Easing.	Easing.inOut(Easing.ease)
fillStyle	The style for the progress bar fill.	None
style	The style for the progress bar's background.	None

Component methods

Method	Description
update(progress)	The recommended way to update the progress of the progress bar is to use the progress property. If you prefer, you can use this update method to update the progress directly. To access this method, set the ref property on the <ProgressBar> and call this.progressBar.update(0.3)
value()	This will return current value of progress. To access this method, set the ref property on the <ProgressBar> and call this.progressBar.value()

Progress Bar.js

import PropTypes from 'prop-types';
import React from 'react';
import {
  View,
  Easing,
  Animated,
  StyleSheet,
  Dimensions,
  ViewPropTypes,
} from 'react-native';

const styles = StyleSheet.create({
  background: {
    height: 5,
    overflow: 'hidden',
    backgroundColor: '#bbbbbb',
  },
  fill: {
    height: 5,
    backgroundColor: '#3b5998',
  },
});

interface ProgressBarProps {
  width: number;
  easing: Function;
  style: object;
  progress: number;
  fillStyle: any;
  easingDuration: number;
}

class ProgressBar extends React.PureComponent<ProgressBarProps> {
  state = {
    progress: new Animated.Value(this.props.progress),
  };

  update = progress => {
    Animated.timing(this.state.progress, {
      easing: this.props.easing,
      duration: this.props.easingDuration,
      toValue: progress > 1 ? 1 : progress,
      useNativeDriver: false,
    }).start();
  };

  value = () => this.state.progress._value;

  render() {
    const fillWidth = this.state.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [
        0 * (this.props.style.width || this.props.width),
        1 * (this.props.style.width || this.props.width),
      ],
    });

    return (
      <View style={[styles.background, this.props.style]}>
        <Animated.View
          style={[styles.fill, this.props.fillStyle, {width: fillWidth}]}
        />
      </View>
    );
  }
}

ProgressBar.defaultProps = {
  progress: 0,
  style: styles,
  easingDuration: 500,
  fillStyle: undefined,
  easing: Easing.inOut(Easing.ease),
  width: Dimensions.get('window').width,
};

export default ProgressBar;