Noodles Practicing Medicine

    react-native-dashed-progress

    1.0.1 • Public • Published

    react-native-dashed-progress

    license Version npm

    React Native component to draw circular dashed progress bar.

    Example

    image

    Installation

    1. Install react-native-dashed-progresscomponent and react-native-svg:

      npm i --save react-native-dashed-progress react-native-svg

      skip step 2 if you are using react-native >= 0.60

    2. Link native code for SVG:

      react-native link react-native-svg

    Usage

    import {DashedProgress} from 'react-native-dashed-progress';
     
    <DashedProgress
      fill={20} 
      countBars={50} 
      radius={50}
      strokeColor="#00e0ff"/>

    Props

    Props Type Default Description
    radius Number 100 Radius of circle
    barWidth Number 10 Length of dash
    indicatorWidth Number 20 Length of indicator
    countBars Number 100 Total number of dashes in circle
    strokeThickness Number 1 Thickness of dash
    fill Number (>=0 and <=countBars) 50 Total number of filled Dashes in circle
    text String 50% A Text will display in the circle
    strokeLinecap String round Shape used at ends of dash. Possible values: butt,round, square
    trailColor String #000000 Color of unfilled dashes
    strokeColor String #008000 Color of filled dashes
    showTooltip Boolean true Enabled to display Text inside the circle
    tooltipSize Number 12 fontSize of text
    tooltipColor String #008000 fontColor of text
    tooltipFamily String fontFamily of text
    divideEnabled Boolean false Enabled to divide countBars into given dividerNumber
    dividerNumber Number 10 Number which will divide by countBars
    dividerNumberSize Number 9 fontSize of dividerNumber
    showIndicator Boolean true Enabled to display stop indicator in animated Circle
    indicatorColor String #008000 Color of indicator
    duration Number 1000 Total time to animate dashes
    containerStyle Object Extra styling for the main container

    Running example app

    git clone https://github.com/websoptimization/react-native-dashed-progress.git
    cd react-native-dashed-progress/example
    npm install
    react-native-run-android OR react-native-run-ios

    License

    MIT

    Install

    npm i react-native-dashed-progress

    DownloadsWeekly Downloads

    12

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    77.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • websoptimization