rng
react-native-gauge
npm i react-native-gauge
rng

react-native-gauge

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

by Christian Nicoletti

0.1.2 (see all)License:MITTypeScript:Not Found
npm i react-native-gauge
Readme

react-native-gauge

Latest version released on npmjs CircleCI Build Status Codacy Grade Supported platforms

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

PropDescriptionDefault
sizeChange the size of the overall gauge30
progressDetermines the progress of the gauge0.5
overallGradientApplies a gradient color across the whole gauge (e.g. ["red", "black"])false
addTriangleTipBoolean value that enables a triangle tip at the top of the needlefalse
triangleTipWidthWidth of the triangle tip2
triangleTipHeightHeight of the triangle tip4
triangleNeedleTurns the needle into a trianglefalse
addCircleAdds a circle to the middle of the circle/arcfalse
circleSizeSize of the circle15
addTriangleBaseAdds a triangle to the bottom of the needlefalse
triangleBaseWidthWidth of the triangle base5
triangleBaseHeightHeight of the triangle base20
translateBaseYMoves the base shape up/down relative to the base of the needle0
animatedBoolean stating whether to make the gauge animatedtrue
alwaysUseEndAngleEnables the border end angle to be adjusted (hack around Progress component)true
endAngleDetermines the end angle (just for the border for right now)0.9
unfilledEndAngleDetermines the unfilled end angle portion of the circle/arc0.9
rotateRotates the gauge'-90deg'
thicknessDetermines circle/arc thickness6
borderWidthDetermines border width1
needleWidthDetermines the width of the needle2
needleHeightDetermines the height of the needle45
needleBorderRadiusDetermines the needle border radius0
translateNeedleYMoves the needle up/down relative to the center0
colorDetermines color of the circle/arcblue
borderColorDetermines the border color of the cricle/arcblue
needleColorDetermines the needle colorblue
unfilledColorDetermines the unfilled portion of the circle/arc's colorgrey
circleColorDetermines the circle/arc's colorblue
triangleTipColorDetermines the triangle tip colorblue
triangleBaseColorDetermines the triangle base colorblue
gradientStyleStyle the gradient mask, if there is an overallGradient{}

Testing your code

Before making a pull request, run: npm run test in the root directory

Testing is supported by jest and test files (".test.js") can be found in "__tests__" directories

Testing also checks for formatting through the tool ESLint and enforces the coding style of Prettier specified in the Prettier config file.

On top of that testing also runs through a static type checker called Flow.

All of these tests can be ran locally, but with every commit, CircleCI will automatically run these tests in a clean container for you.

Contributions

All contributions should be referenced to the CONTRIBUTIONS file before making a pull request.

Downloads/wk

60

GitHub Stars

17

LAST COMMIT

2mos ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

5

OPEN PRs

0
VersionTagPublished
0.1.2
latest
2mos ago
No alternatives found
No tutorials found
Add a tutorial