5.0.2 • Published 2 years ago
@vanntrong/react-native-progress v5.0.2
react-native-progress
This is a forked project from https://github.com/oblador/react-native-progress that includes inner rounded functionality for bar charts.
Progress indicators and spinners for React Native using React Native SVG.
Installation
$ npm install react-native-progress --save
React Native SVG based components
To use the Pie or Circle components, you need to install React Native SVG in your project.
Usage
Note: If you don't want the React Native SVG based components and it's dependencies, do a deep require instead: import ProgressBar from 'react-native-progress/Bar';.
import * as Progress from 'react-native-progress';
<Progress.Bar progress={0.3} width={200} />
<Progress.Pie progress={0.4} size={50} />
<Progress.Circle size={30} indeterminate={true} />
<Progress.CircleSnail color={['red', 'green', 'blue']} />Properties for all progress components
| Prop | Description | Default |
|---|---|---|
animated | Whether or not to animate changes to progress. | true |
indeterminate | If set to true, the indicator will spin and progress prop will be ignored. | false |
indeterminateAnimationDuration | Sets animation duration in milliseconds when indeterminate is set. | 1000 |
progress | Progress of whatever the indicator is indicating. A number between 0 and 1. | 0 |
color | Fill color of the indicator. | rgba(0, 122, 255, 1) |
unfilledColor | Color of the remaining progress. | None |
borderWidth | Width of outer border, set to 0 to remove. | 1 |
borderColor | Color of outer border. | color |
Progress.Bar
All of the props under Properties in addition to the following:
| Prop | Description | Default |
|---|---|---|
width | Full width of the progress bar, set to null to use automatic flexbox sizing. | 150 |
height | Height of the progress bar. | 6 |
borderRadius | Rounding of corners, set to 0 to disable. | 4 |
useNativeDriver | Use native driver for the animations. | false |
animationConfig | Config that is passed into the Animated function. | { bounciness: 0 } |
animationType | Animation type to animate the progress, one of: decay, timing, spring. | spring |
Progress.Circle
All of the props under Properties in addition to the following:
| Prop | Description | Default |
|---|---|---|
size | Diameter of the circle. | 40 |
endAngle | Determines the endAngle of the circle. A number between 0 and 1. The final endAngle would be the number multiplied by 2π | 0.9 |
thickness | Thickness of the inner circle. | 3 |
showsText | Whether or not to show a text representation of current progress. | false |
formatText(progress) | A function returning a string to be displayed for the textual representation. | See source |
textStyle | Styles for progress text, defaults to a same color as circle and fontSize proportional to size prop. | None |
allowFontScaling | Whether or not to respect device font scale setting. | true |
direction | Direction of the circle clockwise or counter-clockwise. | clockwise |
strokeCap | Stroke Cap style for the circle butt, square or round. | butt |
fill | Fill color of the inner circle. | None (transparent) |
Progress.Pie
All of the props under Properties in addition to the following:
| Prop | Description | Default |
|---|---|---|
size | Diameter of the pie. | 40 |
Progress.CircleSnail
| Prop | Description | Default |
|---|---|---|
animating | If the circle should animate. | true |
hidesWhenStopped | If the circle should be removed when not animating. | false |
size | Diameter of the circle. | 40 |
color | Color of the circle, use an array of colors for rainbow effect. | rgba(0, 122, 255, 1) |
thickness | Thickness of the circle. | 3 |
duration | Duration of animation. | 1000 |
spinDuration | Duration of spin (orbit) animation. | 5000 |
strokeCap | Stroke Cap style for the circle butt, square or round. | round |
Examples
Changelog
Thanks
To Mandarin Drummond for giving me the NPM name.
License
MIT License. © Joel Arvidsson 2015-