react-native-progress

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

• Example project bundled with this module
• react-native-image-progress

Changelog

Thanks

To Mandarin Drummond for giving me the NPM name.

License

MIT License. © Joel Arvidsson 2015-