@Nassim99/React-Native-Gauge

Description

This is a small simple package to render gauge useing SVG, Main reason for creating this is that i needed a simple gauge to be implimented in expo project, the ones i found wasn't working on expo and some of them slows the app down.

Installation

yarn add @nassim99/react-native-gauge

or

npm install @nassim99/react-native-gauge

Usage

Import

import GaugeSVG from "@nassim99/react-native-gauge";

Fundamental Usage

const value = 40 // 40% of the gauge. min=0 max=100
    <GaugeSVG
      size={150}
      insideTextColor={'purple'}
      gaugeColor={'black'}
      gaugeValueColor={'blue'}
      gaugeStroke={3}
      gaugeValueStroke={3.5}
      value={value}
    >
        <View style={{
            justifyContent: 'center',
            alignItems: 'center',
            width: '100%',
            height: '100%',
        }}>
          <Text>{value}</Text>
        </View>
    </GaugeSVG>

Peer Dependencies

this library uses react-native-svg package you should install it in your project

yarn add react-native-svg

Configuration - Props

Required

| Property | Type | Default | Description | | -------- | :----: | :-------: | ----------------------------------- | | value | number | undefined | number of the value between 0 a 100 |

Customization (Optionals)

| Property | Type | Default | Description | | ---------------- | :----: | :-----: | ---------------------------------------------------------------------------------------------------------------------- | | gaugeColor | string | #ff0 | changes the color of the gauge | | gaugeValueColor | string | "#666" | change the color of the gauge value | | gaugeStroke | number | 2 | changes the gauge stroke | | gaugeValueStroke | number | 2.5 | changes the gauge value stroke | | insideTextColor | string | #999 | changes the color of the text in the center of the gauge, not applicable if gauge have children like the example above | | size | number | 150 | changes the width and height of the gauge |

Future Plans

• [x] ~~LICENSE~~
• [ ] Add animation
• [ ] Add tests

Change Log

Author

Nassim Redwan, https://github.com/nassim99

License

@nassim/react-native-gauge is available under the MIT license. See the LICENSE file for more info.