react-native-progress-bar

Easy and customizable progress bar for react native projects.

Setup

yarn add @kimche/react-native-progress-bar

Usage

import React from "react";
import { StyleSheet, View, Button } from "react-native";
import ProgressBar from "@kimche/react-native-progress-bar";

export default class App extends React.Component {
  state = {
    progress: 50
  };
  onPressButton = () => {
    const { progress } = this.state;
    this.setState({ progress: progress + 10 });
  };

  render() {
    const { progress } = this.state;
    return (
      <View style={styles.container}>
        <ProgressBar
          hasAutoProgress={true}
          max={100}
          progress={progress}
          width={200}
          height={20}
          fontSize={15}
          title="example 1: "
          onCompleteColor="green"
        />

        <ProgressBar
          max={120}
          progress={progress}
          width={150}
          height={20}
          fontSize={12}
          progressColor="red"
          title="example 2: "
          style={{ marginTop: "10%" }}
        />

        <Button
          onPress={this.onPressButton}
          title="More!"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

Available props

| Name | Type | Default | Description | | --------------- | ------ | --------- | ----------------------------------------------------- | | progress | number | REQUIRED | Progress value | | max | number | REQUIRED | Max progress | | progressColor | string | '#0097ff' | Color of the bar progress | | backgroundColor | string | '#e0e0e0' | Color of the bar background | | onCompleteColor | string | '' | Color of the bar when the max is reached | | initialDelay | number | 500 | Duration in ms of bar initial animation | | width | number | REQUIRED | Width of bar | | height | number | 7 | Height of bar | | title | string | "" | Progress bar text | | fontSize | number | 7 | Progress bar title font size | | hasAutoProgress | bool | false | Bool that enables the auto percentage of the progress | | style | obj | {} | aditional styling of the bar |