Next Perpendicular Moonlanding
    Wondering what’s next for npm?Check out our public roadmap! »

    react-native-semi-circular-gauge

    2.0.2 • Public • Published

    Gauge component for React Native

    React Native component for displaying semi circular gauge, with animation. Works on both iOS & Android.

    You might also be interested in my blogs.

    Installation

    npm install react-native-semi-circular-gauge

    Then link the ART library found in node_modules/react-native/Libraries/ART/ART.xcodeproj to your xcode project. (More Info)

    Usage

    import AnimatedSemiCircularGauge from 'react-native-semi-circular-gauge';

    And then in your render method:

    <AnimatedSemiCircularGauge
        chartWidth={100}
        strokeWidth={10}
        fill={20}
        prefill={-50}/>

    Props

    Name PropType Required Default Value Description
    style Object No None View.propTypes.style object for the outer conatiner that comprises the chart
    chartWidth Number Yes None width of the chart, height is determined automatically
    fill Number Yes None amount of the chart to be filled
    prefill Number No 0 starting point for the chart that is filled till props.fill
    strokeWidth Number Yes None width of the stroke that is used to draw the chart
    tension Number Yes RNdefault used by the animated chart component more info
    friction Number Yes RNdefault used by the animated chart component

    License

    MIT

    Install

    npm i react-native-semi-circular-gauge

    DownloadsWeekly Downloads

    13

    Version

    2.0.2

    License

    MIT

    Last publish

    Collaborators

    • avatar