Home

Awesome

react-native-progress

Progress indicators and spinners for React Native using React Native SVG.

progress-demo

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

PropDescriptionDefault
animatedWhether or not to animate changes to progress.true
indeterminateIf set to true, the indicator will spin and progress prop will be ignored.false
indeterminateAnimationDurationSets animation duration in milliseconds when indeterminate is set.1000
progressProgress of whatever the indicator is indicating. A number between 0 and 1.0
colorFill color of the indicator.rgba(0, 122, 255, 1)
unfilledColorColor of the remaining progress.None
borderWidthWidth of outer border, set to 0 to remove.1
borderColorColor of outer border.color

Progress.Bar

All of the props under Properties in addition to the following:

PropDescriptionDefault
widthFull width of the progress bar, set to null to use automatic flexbox sizing.150
heightHeight of the progress bar.6
borderRadiusRounding of corners, set to 0 to disable.4
useNativeDriverUse native driver for the animations.false
animationConfigConfig that is passed into the Animated function.{ bounciness: 0 }
animationTypeAnimation type to animate the progress, one of: decay, timing, spring.spring

Progress.Circle

All of the props under Properties in addition to the following:

PropDescriptionDefault
sizeDiameter of the circle.40
endAngleDetermines the endAngle of the circle. A number between 0 and 1. The final endAngle would be the number multiplied by 2π0.9
thicknessThickness of the inner circle.3
showsTextWhether 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
textStyleStyles for progress text, defaults to a same color as circle and fontSize proportional to size prop.None
allowFontScalingWhether or not to respect device font scale setting.true
directionDirection of the circle clockwise or counter-clockwise.clockwise
strokeCapStroke Cap style for the circle butt, square or round.butt
fillFill color of the inner circle.None (transparent)

Progress.Pie

All of the props under Properties in addition to the following:

PropDescriptionDefault
sizeDiameter of the pie.40

Progress.CircleSnail

PropDescriptionDefault
animatingIf the circle should animate.true
hidesWhenStoppedIf the circle should be removed when not animating.false
sizeDiameter of the circle.40
colorColor of the circle, use an array of colors for rainbow effect.rgba(0, 122, 255, 1)
thicknessThickness of the circle.3
durationDuration of animation.1000
spinDurationDuration of spin (orbit) animation.5000
strokeCapStroke 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-