react-native-progress-bar-modest

Simple, animated progress bar for React Native. Inspired by this native Android component: https://android-arsenal.com/details/1/790

Installation

npm install --save react-native-progress-bar-modest

Example usage

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View
} from 'react-native';
import ProgressBar from 'react-native-progress-bar-modest';

export default class ProgressBarMinimal extends Component {
  constructor(props) {
    super(props);

    this.state = {
      val: 0,
    };

    const _self = this;

    setInterval(() => {
      _self.setState({
        val: Math.floor(Math.random() * 100)
      });
    }, 1000);
  }

  render() {
    return (
      <View style={styles.container}>
        <ProgressBar reachedBarColor='#5E8AAD' value={this.state.val} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 30,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('ProgressBarMinimal', () => ProgressBarMinimal);

Properties

Prop	Description	Default
value	Current progress value. Ranges from 0..100.	0
showValue	Shows numeric progress value if set to true.	true
borderRadius	Border radius of progress bar.	0
reachedBarColor	Color of the left side of progress bar. Must be a valid React Native color string.	#5E8CAD
reachedBarHeight	Height of the left side of progress bar.	2
unreachedBarColor	Color of the right side of progress bar. Must be a valid React Native color string.	#CFCFCF
unreachedBarHeight	Height of the right side of progress bar.	1

Component methods

Method	Description
setValue(value)	The recommended way to update the progress of the progress bar is to use the value property. If you prefer, you can use this setValue method to update the progress directly. To access this method, set the ref property on the <ProgressBar> and call this.refs.progressBarName.setValue(50)