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

    react-native-simple-gauge
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    react-native-simple-gauge

    Gauge progress module for React Native

    Based on react-native-circular-progress

    image

    Requirement

    RN 0.60+

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

    Install

    RN 0.62+

    1. npm i --save react-native-simple-gauge
    2. npm i --save @react-native-community/art
    3. run pod install in ios directory

    RN 0.60 - 0.61

    1. 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';
    <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.

    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

    Install

    npm i react-native-simple-gauge

    DownloadsWeekly Downloads

    615

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    222 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar
    • avatar