0.1.2 • Published 2 years ago
react-native-gauge v0.1.2
Installation & Usage
To install this module cd
to your project directory and enter the following command:
npm install react-native-gauge
The following code presents the basic usage scenario of this library:
import Gauge from "react-native-gauge";
<Gauge
size={75}
progress={0.5}
animated={true}
alwaysUseEndAngle={true}
endAngle={0}
unfilledEndAngle={0.5}
thickness={4}
borderWidth={1}
needleWidth={3}
needleHeight={20}
needleBorderRadius={25}
/>
Properties
Prop | Description | Default |
---|---|---|
size | Change the size of the overall gauge | 30 |
progress | Determines the progress of the gauge | 0.5 |
overallGradient | Applies a gradient color across the whole gauge (e.g. "red", "black") | false |
addTriangleTip | Boolean value that enables a triangle tip at the top of the needle | false |
triangleTipWidth | Width of the triangle tip | 2 |
triangleTipHeight | Height of the triangle tip | 4 |
triangleNeedle | Turns the needle into a triangle | false |
addCircle | Adds a circle to the middle of the circle/arc | false |
circleSize | Size of the circle | 15 |
addTriangleBase | Adds a triangle to the bottom of the needle | false |
triangleBaseWidth | Width of the triangle base | 5 |
triangleBaseHeight | Height of the triangle base | 20 |
animated | Boolean stating whether to make the gauge animated | true |
alwaysUseEndAngle | Enables the border end angle to be adjusted (hack around Progress component) | true |
endAngle | Determines the end angle (just for the border for right now) | 0.9 |
unfilledEndAngle | Determines the unfilled end angle portion of the circle/arc | 0.9 |
rotate | Rotates the gauge | '-90deg' |
thickness | Determines circle/arc thickness | 6 |
borderWidth | Determines border width | 1 |
needleWidth | Determines the width of the needle | 2 |
needleHeight | Determines the height of the needle | 45 |
needleBorderRadius | Determines the needle border radius | 0 |
translateNeedleY | Moves the needle up/down relative to the center | 0 |
color | Determines color of the circle/arc | blue |
borderColor | Determines the border color of the cricle/arc | blue |
needleColor | Determines the needle color | blue |
unfilledColor | Determines the unfilled portion of the circle/arc's color | grey |
circleColor | Determines the circle/arc's color | blue |
triangleTipColor | Determines the triangle tip color | blue |
triangleBaseColor | Determines the triangle base color | blue |
gradientStyle | Style the gradient mask, if there is an overallGradient | {} |