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.

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}/>

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

MIT