react-native-simple-gauge

Gauge progress module for React Native
Based on react-native-circular-progress

Requirement

RN 0.60+

• RN <= 0.59 supported by 0.1.11
• RN <= 0.44 supported by 0.1.2

Install

1) npm i --save react-native-simple-gauge 2) npm i --save @react-native-community/art 3) run pod install in ios directory1) npm i --save react-native-simple-gauge
2) Link the ART library to your ReactNative project for ios add below line to ios/Podfile

pod 'React-ART', :path => '../node_modules/react-native/Libraries/ART'

and run pod install in ios directory

Usage

import { AnimatedGaugeProgress, GaugeProgress } from 'react-native-simple-gauge';
```  

```jsx
<AnimatedGaugeProgress
  size={200}
  width={15}
  fill={100}
  rotation={90}
  cropDegree={90}
  tintColor="#4682b4"
  delay={0}
  backgroundColor="#b0c4de"
  stroke={[2, 2]} //For a equaly dashed line
  strokeCap="circle" />
```  

Use `cropDegree` to vary the size of arc  

Refer to below example to add something inside gauge.
```js
const size = 200;
const width = 15;
const cropDegree = 90;
const textOffset = width;
const textWidth = size - (textOffset*2);
const textHeight = size*(1 - cropDegree/360) - (textOffset*2);

<GaugeProgress
  size={size}
  width={width}
  fill={this.state.fill}
  cropDegree={cropDegree}
  ......
>
  <View style={styles.textView}>
    <Text style={styles.text}>hello</Text>
  </View>
</GaugeProgress>

textView: {
  position: 'absolute',
  top: textOffset,
  left: textOffset,
  width: textWidth,
  height: textHeight,
  alignItems: 'center',
  justifyContent: 'center',
},
text: {
  fontSize: 20,
},

License

MIT