0.1.2 • Published 4 years ago

react-native-gauge

Licence

MIT

Version

0.1.2

Deps

Size

36 kB

Vulns

Weekly

Stars

Summary Dependency Versions

`react-native-gauge`

React Native component used to display a gauge for metrics or purely aesthetic purposes

gauge gif

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	`{}`

Keywords

react-native react native gauge