react-native-semi-circular-gauge
v2.0.2
Published
Component for displaying semi circular gauge, with animation
Downloads
25
Maintainers
Readme
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