@kimche/react-native-progress-bar v1.0.5

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