Skip to content

Latest commit

 

History

History
107 lines (73 loc) · 3.99 KB

README.md

File metadata and controls

107 lines (73 loc) · 3.99 KB
Raw

react-native-progress

Progress indicators and spinners for React Native using ReactART.

progress-demo

Installation

$ npm install react-native-progress --save

ReactART based components

To use the Pie or Circle components, you need to include the ART library in your project on iOS, for android it's already included.

For CocoaPod users:

Add the ART subspec like so:

pod 'React', path: '../node_modules/react-native', subspecs: [
  'ART',
]

Or manually:

Add the ART.xcodeproj (found in node_modules/react-native/Libraries/ART) to the Libraries group and add libART.a to Link Binary With Libraries under Build Phases. More info and screenshots about how to do this is available in the React Native documentation.

Usage

Note: If you don't want the ReactART 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 colors={['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
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. 150
height Height of the progress bar. 6
borderRadius Rounding of corners, set to 0 to disable. 4

Progress.Circle

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

Prop Description Default
size Diameter of the circle. 40
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
direction Direction of the circle clockwise or counter-clockwise clockwise

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. true
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

Examples

Changelog

Thanks

To Mandarin Drummond for giving me the NPM name.

License

MIT License. © Joel Arvidsson 2015