@hoker/react-native-cool-speedometer

Cool Speedometer 😎

If you are tired of all those boring speedometers for react native, have a look at this one. This is different. This is cool.

✅ Flexible

✅ Made out of SVG

✅ Animated

✅ More customization than you'll use

✅ Cool 😎

Install it for free:

npm i react-native-cool-speedometer

Usage

<Speedometer
  value={128}
  fontFamily='squada-one'
/>

Note you'll need to configure the font by your own.

Playing with angle

<Speedometer
  value={54}
  max={80}
  angle={160}
  backgroundAngle={180}
  indicatorStyle={{
    bottom: 25,
    fontSize: 60,
    color: '#555'
  }}
  fontFamily='squada-one'
  indicatorSuffix='k/h'
/>

Rotated

Changing rotation, step, the looking of the needle, and adding an optional "danger zone":

<Speedometer
  primaryArcWidth={10}
  secondaryArcWidth={4}
  value={5}
  step={1}
  max={11}
  noIndicator
  rotation={-90}
  dangerZone
  needle={{
    baseOffset: 40,
    circleRadius: 30
  }}
/>

Circular progress

<Speedometer
  primaryArcWidth={40}
  value={40}
  max={100}
  lineCap="round"
  noNeedle
  noLineMarks
  noNumberMarks
  angle={360}
  accentColor="orange"
  noBackground
  duration={500}
  indicatorCentered
  indicatorStyle={{
    color: 'orange'
  }}
  indicatorSuffix='%'
/>

More options

Make it as ugly as you want:

<Speedometer
  value={73}
  max={100}
  step={5}
  angle={300}
  backgroundColor='aquamarine'
  backgroundOpacity={1}
  noProgress
  noNumberMarks
  needle={{
    color: 'tomato',
    circleColor: 'transparent',
    baseWidth: 20,
    baseOffset: 0
  }}
  marks={{
    lineCap: 'round',
    lineColor: 'tomato'
  }}
  indicatorStyle={{
    color: 'tomato'
  }}
/>

Properties

Prop	Default	Type	Description
size	250	number	Size of the speedometer. Note that if you change this value you will probably need to adjust the font size of the indicator and the marks.
primaryArcWidth	5	number	Width of the progress bar
secondaryArcWidth	primaryArcWidth - 1	number	Width of the secondary arc. Will use the progress bar width as reference by default.
accentColor	'#00e0ff'	string	Accent color. Used by default for the progress bar, and the circle of the needle.
primaryArcColor	accentColor	string	Color of the primary path.
secondaryArcColor	'black'	string	Color of the secondary path.
secondaryArcOpacity	0.3	number	Opacity of the secondary path.
style		object	Style applied to the speedometer
rotation		number	By default, the rotation is computed with the given angle. If you want to change the rotation (like this example) have in mind that "0" is at the top of the circle.
lineCap	'butt'	string	Line terminations, can be butt, line, or square.
angle	250	number	Angle of the speedometer in degrees
value	0	number	Actual speed
max	180	number	Max velocity
noIndicator		boolean	Whether to hide the indicator
backgroundColor	'#000000'	string	Color of the background
backgroundOpacity	0.5	number	Opacity of the background
step	10	number	Times the max speed will be divided in to show the marks
indicatorStyle	{}	object	Style applied to the indicator
noNeedle		boolean	Whether to hide the needle
indicatorCentered		boolean	Whether to vertically align the indicator
noLineMarks		boolean	Whether to hide the line marks
dangerZone		boolean	Whether to show the red line at the right
dangerZoneAngle	60	number	Angle to show the danger zone (from the right)
noProgress		boolean	Whether to hide the progress bar
needle	{}	object	Needle options
marks	{}	object	Marks options
noNumberMarks		boolean	Whether to hide the numbers next to the line marks
noBackground		boolean	Whether to hide the background circle
backgroundAngle	360	number	Angle of the circle path used for the background. It is usually better to let this by default.
fontFamily	'helvetica'	string	Font to use in the indicator and the marks. You need to configure in your project the font you want to use.
indicatorSuffix		string	Text to append to the indicator, for example 'k/h' or '%'.
indicatorSuffixStyle	{}	object	Style applied to the suffix of the indicator. (You can reduce its font size to make it more cool).
calcSizeByAngle	false	boolean	Calculate the component view by angle, usable when in case when component is square and the height calculated by backgroundAngle
calcSizeByAngleIndicatorHeight	number	0	When calcSizeByAngle is used with bottom indicator, the indicator height must be added to total height

Needle Options

Prop	Default	Type	Description
baseWidth	6	number	Width of the base of the needle
baseOffset	18	number	Distance from the center of the circle
color	'white'	string	Color of ne needle
circleRadius	15	number	Radius of the circle behind the needle
circleColor	accentColor	string	Color fo the circle behind the needle

Marks Options

Prop	Default	Type	Description
lineCap	'butt'	string	Line terminations, can be butt, line, or square.
lineColor	'white'	string	Color of the lines
lineOpacity	1	number	Opacity of the lines
numbersRadius	17	string	Change this to place the numbers closer or farther of the center.
numbersFontSize	19	string	Font size of the number marks
roundNumbers	false	boolean	Round the numbers in case of decimal value.