1.0.3 • Published 8 years ago

react-native-progress-bar-modest v1.0.3

Weekly downloads
23
License
-
Repository
github
Last release
8 years ago

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

npm.io

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

PropDescriptionDefault
valueCurrent progress value. Ranges from 0..100.0
showValueShows numeric progress value if set to true.true
borderRadiusBorder radius of progress bar.0
reachedBarColorColor of the left side of progress bar. Must be a valid React Native color string.#5E8CAD
reachedBarHeightHeight of the left side of progress bar.2
unreachedBarColorColor of the right side of progress bar. Must be a valid React Native color string.#CFCFCF
unreachedBarHeightHeight of the right side of progress bar.1

Component methods

MethodDescription
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)