Package Exports

@kcodev/react-native-progress-bar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@kcodev/react-native-progress-bar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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)
height	number	16	Height of bar
backgroundColor	string	#148cF0	Color that will complete the bar
borderWidth	number	1	Style prop
borderColor	string	'#148cF0'	Style prop
borderRadius	number	8	Style prop
onComplete	function	null	Callback after bar reach the max value prop