1.0.1 • Published 5 years ago

@kcodev/react-native-progress-bar v1.0.1

Weekly downloads
11
License
MIT
Repository
github
Last release
5 years ago

react-native-progress-bar

React native Simple, customizable and animated progress bar for React Native

Features

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

Setup

npm install --save @kcodev/react-native-progress-bar

Usage

import React, { Component } from 'react';
import { View } from 'react-native';

import ProgressBar from '@kcodev/react-native-progress-bar';

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={{ flexDirection: "row", flex: 1 }}>
        <View style={{ flex: 1 }}>
          <ProgressBar
            value={70}
            maxValue={100}
            backgroundColorOnComplete="#123123"
            backgroundColor="#987987"
          />
        </View>
      </View>
    );
  }
}

export default App;

Available props

NameTypeDefaultDescription
valuenumber0Progress value
maxValuenumber500Max percentage bar can have
barEasingstring'linear'Easing animation type(bounce, cubic, ease, sin, linear, quad)
heightnumber16Height of bar
backgroundColorstring#148cF0Color that will complete the bar
borderWidthnumber1Style prop
borderColorstring'#148cF0'Style prop
borderRadiusnumber8Style prop
onCompletefunctionnullCallback after bar reach the max value prop