Neutralize Pesky Miscreants


    1.0.1 • Public • Published


    Progress indicators and spinners for React Native using ReactART.


    Note: Full android support will come when ReactART is ported to android.


    $ 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. To do this, simply 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.


    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 Wether 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


    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


    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 Wether 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


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

    Prop Description Default
    size Diameter of the pie. 40


    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




    • Progress bar
    • Circular progress indicator
    • Pie progress indicator
    • Animation
    • Indeterminate state
    • Progress percentage text
    • Optional color change on success/failure
    • Snail/rainbow style spinners
    • Safari style navigation progress bar


    To Mandarin Drummond for giving me the NPM name.


    MIT License. © Joel Arvidsson 2015


    npm i react-native-progress-sl

    DownloadsWeekly Downloads






    Last publish


    • saeho