Nonvoluntary Professional Mangling
    Wondering what’s next for npm?Check out our public roadmap! »

    react-native-percent-circle

    0.0.6 • Public • Published

    license Version npm

    react-native-percent-circular

    React Native component for creating animated, circular progress with Pure js. Useful for displaying users points for example. Works on iOS & Android.

    Example app

    image

    Installation

    Install library npm i --save react-native-percent-circle

    Usage

    Import PercentCircle.

    import PercentCircle from 'react-native-percent-circle';

    Use as follows:

      <PercentCircle percent={79} aninationType="Quad.easeInOut"/>

    Configuration

    You can configure the passing by following props:

    • radius – the radius of the circle
    • percent - current, percentage fill (from 0 to 100)
    • frameTime - the time of refresh circle
    • fwColor - color of a progress line
    • bgColor - color of a background for progress line
    • duration - the time of animation
    • lineCap - the shape to be used at the ends of the circle. Possible values: round or square or none.
    • fontColor - the color of font
    • fontSize - the size of font (px)
    • animationType - animation types,exmaple: 'Quad.easeInOut' ,Possible values see tween.js

    Author

    Hlere (595806119@qq.com)

    License

    MIT

    Install

    npm i react-native-percent-circle

    DownloadsWeekly Downloads

    9

    Version

    0.0.6

    License

    MIT

    Last publish

    Collaborators

    • avatar