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. |