vaxxis/react-native-progress-bar-animated

📊 Simple, customizable and animated progress bar for React Native

react-native-progress-bar-animated

📊 Simple, customizable and animated progress bar for React Native

Features

• Flexible style
• Plain simple and flexible API
• Listeners for actions

Demo

You can try on expo: https://expo.io/@rafaelmotta021/react-native-progress-bar-animated-demo

Setup

yarn add react-native-progress-bar-animated

or

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

Usage

import React from 'react';
import {
  View,
  StyleSheet,
  Dimensions,
  Button,
  Alert,
  Text,
} from 'react-native';

import ProgressBarAnimated from 'react-native-progress-bar-animated';

export default class App extends React.Component {

  state = {
    progress: 20,
    progressWithOnComplete: 0,
    progressCustomized: 0,
  }

  increase = (key, value) => {
    this.setState({
      [key]: this.state[key] + value,
    });
  }

  render() {
    const barWidth = Dimensions.get('screen').width - 30;
    const progressCustomStyles = {
      backgroundColor: 'red', 
      borderRadius: 0,
      borderColor: 'orange',
    };

    return (
      <View style={styles.container}>
        <View>
          <Text style={styles.label}>Bar with backgroundColorOnComplete prop</Text>
          <ProgressBarAnimated
            width={barWidth}
            value={this.state.progress}
            backgroundColorOnComplete="#6CC644"
          />
          <View style={styles.buttonContainer}>
            <View style={styles.buttonInner}>
              <Button
                title="Increase 20%"
                onPress={this.increase.bind(this, 'progress', 20)}
              />
            </View>
          </View>
        </View>
        <View style={styles.separator} />
        <View>
          <Text style={styles.label}>Bar with onComplete event</Text>
          <ProgressBarAnimated
            width={barWidth}
            value={this.state.progressWithOnComplete}
            onComplete={() => {
              Alert.alert('Hey!', 'onComplete event fired!');
            }}
          />
          <View style={styles.buttonContainer}>
            <View style={styles.buttonInner}>
              <Button
                title="Increase 50%"
                onPress={this.increase.bind(this, 'progressWithOnComplete', 50)}
              />
            </View>
          </View>
        </View>
        <View style={styles.separator} />
        <View>
          <Text style={styles.label}>Custom style with max value in 30%</Text>
          <ProgressBarAnimated
            {...progressCustomStyles}
            width={barWidth}
            maxValue={30}
            value={this.state.progressCustomized}
          />
          <View style={styles.buttonContainer}>
            <View style={styles.buttonInner}>
              <Button
                title="Increase 10%"
                onPress={this.increase.bind(this, 'progressCustomized', 10)}
              />
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFF',
    marginTop: 50,
    padding: 15,
  },
  buttonContainer: {
    marginTop: 15,
  },
  separator: {
    marginVertical: 30,
    borderWidth: 0.5,
    borderColor: '#DCDCDC',
  },
  label: {
    color: '#999',
    fontSize: 14,
    fontWeight: '500',
    marginBottom: 10,
  },
});

Available props

Name	Type	Default	Description
value	number	0	Progress value
maxValue	number	500	Max percentage bar can have
barEasing	string	'linear'	Easing animation type(bounce, cubic, ease, sin, linear, quad)
barAnimationDuration	number	[]	Duration in ms of bar width animation
backgroundAnimationDuration	number	null	Duration in ms of bar background color change
width	number	REQUIRED	Width of bar
height	number	15	Height of bar
backgroundColor	string	'#148cF0'	Color that will complete the bar
underlyingColor	string	'#148cF0'	Color that underlies the bar
backgroundColorOnComplete	string	null	Optional color that will overwrite background color when reach the max value prop
borderWidth	number	1	Style prop
borderColor	string	'#148cF0'	Style prop
borderRadius	number	6	Style prop
onComplete	function	null	Callback after bar reach the max value prop