1.0.1 • Published 6 years ago
@kcodev/react-native-progress-bar v1.0.1
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 |