KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #dsh #dsh-plugin #ai-agent #codex #ai-agents #deepseek-harness #claude-code #cli #react #mcp

react-native-cool-speedometer

★ 28 Open GitHub ↗

Cool speedometer for React Native

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

![Cool speedometer](https://raw.githubusercontent.com/lucassaid/react-native-cool-speedometer/master/assets/cool-speedometer.gif)

![Cool speedometer](https://raw.githubusercontent.com/lucassaid/react-native-cool-speedometer/master/assets/speeds.png)

✅ Flexible

✅ Performant

✅ Support for negative numbers

✅ Made out of SVG

✅ Animated

✅ More customization than you'll use

✅ Cool 😎

Install it for free:
```bash
npm i react-native-cool-speedometer
```

# Usage
![Default speedometer](https://raw.githubusercontent.com/lucassaid/react-native-cool-speedometer/master/assets/default.png)
```jsx
import Speedometer, {
  Background,
  Arc,
  Needle,
  Progress,
  Marks,
  Indicator,
} from 'react-native-cool-speedometer';

// a few lines later ...

<Speedometer
  value={128}
  fontFamily='squada-one'
>
  <Background />
  <Arc/>
  <Needle/>
  <Progress/>
  <Marks/>
  <Indicator/>
</Speedometer>
```
That's it, you can play around changing some of the components inside `<Speedometer>`. Take in mind the order of them matters: `<Background>` is first because it is meant to be behind all other components.

#### sizing
By default, the size of the component is `250`. You can resize it by passing a different `width`. You can also change the `height`, if you need a proportion other than 1:1.

---
# Examples
### Playing with angle

![Half speedometer](https://raw.githubusercontent.com/lucassaid/react-native-cool-speedometer/master/assets/half.png)

```jsx
<Speedometer
  value={54}
  max={80}
  angle={160}
  fontFamily='squada-one'
>
  <Background angle={180} />
  <Arc/>
  <Needle/>
  <Progress/>
  <Marks/>
  <Indicator>
    {(value, textProps) => (
      <Text
        {...textProps}
        fontSize={60}
        fill="#555"
        x={250 / 2}
        y={210}
        textAnchor="middle"
        fontFamily='squada-one'
      >
        {value}k/m
      </Text>
    )}
  </Indicator>
</Speedometer>
```

### Rotated
Changing `rotation`, `step`, the looking of `<Needle/>`, and adding `<DangerPath/>`:

![Rotated speedometer](https://raw.githubusercontent.com/lucassaid/react-native-cool-speedometer/master/assets/rotated.png)
```jsx
<Speedometer
  value={5}
  max={11}
  rotation={-90}
  fontFamily='squada-one'
>
  <Background />
  <Arc arcWidth={4} />
  <Needle
    baseOffset={40}
    circleRadius={30}
  />
  <DangerPath/>
  <Progress arcWidth={10} />
  <Marks step={1} />
</Speedometer>
```

### If speed is not your thing

#### Circular progress

[See code](https://github.com/lucassaid/react-native-cool-speedometer/blob/master/examples/CircularProgress.jsx)

#### Thermostat

[See code](https://github.com/lucassaid/react-native-cool-speedometer/blob/master/examples/Thermostat.jsx)

---
# God mode

When I said "more customization than you'll use", I meant it.

### Custom marks

Pass a function as children to render your own marks. This function receives:
- **coordinates**  
Coordinates of the current line: `{ x1, y1, x2, y2 }`. Either pass them to a `<Line>` component, or use them to create whatever you like, as long as it is made of SVG.

- **textProps**  
Coordinates and rotation for the text: `{ x, y, transform }`. It is recommended you apply this object to a `<Text>` element.
- **value**  
The value of this mark.

```jsx
import { G, Line } from 'react-native-svg'

// later ...
<Marks step={5}>
  {(mark, i) => (
    <G key={i}>
      <Line
        {...mark.coordinates}
        // any other prop here, except x1, y1, x2, and y2
      />
      {(i % 2 == 0) && (
        // only show the number if the mark is even
        <Text
          {...mark.textProps}
          // any other prop here, except x, y, and transform
        >
          {mark.value}
        </Text>
      )}
    </G>
  )}
</Marks>
```

### Custom needle

Pass a function as children to make a custom needle. It will rotate automatically.

```jsx
<Speedometer width={width}>
  <Needle>
    {() => {
      // you might need the center of the circle
      // to place the needle correctly
      const center = width / 2

return (
        // some magic SVG here
      )
    }}
  </Needle>
</Speedometer>
```

### Custom indicator

Pass a function as children to make a custom indicator. You can use this to place the indicator in the center of the circle:

```jsx
<Speedometer width={width}>
  <Indicator>
    {(value, textProps) => (
      <Text
        {...textProps} // textProps has the "transform" property only
        fontSize={40}
        x={width / 2}
        y={width / 2 + 10}
        textAnchor="middle"
        alignmentBaseline="middle"
      >
        {value}
      </Text>
    )}
  </Indicator>
</Speedometer>
```

### SpeedometerContext

You can achieve virtually anything you need by using the context:

```jsx
import {
  SpeedometerContext
} from './react-native-cool-speedometer'
import { G, Line } from 'react-native-svg'
import { useContext } from 'react'

const MyCustomSVG = () => {

const {
    currentFillAngle,
    radius,
    rotation,
    min,
    max,
    angle,
    lineCap,
    accentColor,
    fontFamily,
    value,
  } = useContext(SpeedometerContext);

return (
    <Line
      rotation={rotation}
      // more magic here
    />
  )
}

const App = () => {

return (
    <Speedometer>
      <Background />
      <Needle />
      <MyCustomSVG />
    </Speedometer>
  )
}
```

### Just SVG

It is possible to wrap any component inside a `<G>` tag and add more vectors:

```jsx
<Speedometer>
  <G opacity={0.4}>
    <Needle/>
  </G>
  <Line />
  <Polygon />
</Speedometer>
```

---

# Properties

And any other `Path` prop

And any other `Path` prop

And any other `Path` prop

And any other `Path` prop

Any other `Text` property (`Text` is from 'react-native-svg', not 'react-native')

react-native-cool-speedometer

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README