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
RN 0.62+
npm i --save react-native-simple-gauge
npm i --save @react-native-community/art
- run
pod install
inios
directory
RN 0.60 - 0.61
npm i --save react-native-simple-gauge
- 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
;
<AnimatedGaugeProgress = = = = = ="#4682b4" = ="#b0c4de" = // ="circle" />
Use cropDegree
to vary the size of arc
Refer to below example to add something inside gauge.
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 = = = = ...... > <View => <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