react-native-progress-bar-animated
📊 Simple, customizable and animated progress bar for React Native
Features
- Flexible style
- Plain simple and flexible API
- Listeners for actions
Demo
You can try on expo: https://expo.io/@rafaelmotta021/react-native-progress-bar-animated-demo
Setup
yarn add react-native-progress-bar-animated
or
npm install --save react-native-progress-bar-animated
Usage
;; ; Component state = progress: 20 progressWithOnComplete: 0 progressCustomized: 0 { this; } { const barWidth = Dimensionswidth - 30; const progressCustomStyles = backgroundColor: 'red' borderRadius: 0 borderColor: 'orange' ; return <View style=stylescontainer> <View> <Text style=styleslabel>Bar with backgroundColorOnComplete prop</Text> <ProgressBarAnimated width=barWidth value=thisstateprogress backgroundColorOnComplete="#6CC644" /> <View style=stylesbuttonContainer> <View style=stylesbuttonInner> <Button title="Increase 20%" onPress=thisincrease /> </View> </View> </View> <View style=stylesseparator /> <View> <Text style=styleslabel>Bar with onComplete event</Text> <ProgressBarAnimated width=barWidth value=thisstateprogressWithOnComplete onComplete= { Alert; } /> <View style=stylesbuttonContainer> <View style=stylesbuttonInner> <Button title="Increase 50%" onPress=thisincrease /> </View> </View> </View> <View style=stylesseparator /> <View> <Text style=styleslabel>Custom style with max value in 30%</Text> <ProgressBarAnimated ...progressCustomStyles width=barWidth maxValue=30 value=thisstateprogressCustomized /> <View style=stylesbuttonContainer> <View style=stylesbuttonInner> <Button title="Increase 10%" onPress=thisincrease /> </View> </View> </View> </View> ; } const styles = StyleSheet;
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) |
barAnimationDuration | number | [] | Duration in ms of bar width animation |
backgroundAnimationDuration | number | null | Duration in ms of bar background color change |
width | number | REQUIRED | Width of bar |
height | number | 15 | Height of bar |
backgroundColor | string | '#148cF0' | Color that will complete the bar |
backgroundColorOnComplete | string | null | Optional color that will overwrite background color when reach the max value prop |
borderWidth | number | 1 | Style prop |
borderColor | string | '#148cF0' | Style prop |
borderRadius | number | 6 | Style prop |
onComplete | function | null | Callback after bar reach the max value prop |