react-native-speedometer

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

react-native-speedometer

★ 99 Open GitHub ↗

A Customizable Speedometer Implementation in React Native

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-native-speedometer [![Build Status](https://travis-ci.com/pritishvaidya/react-native-speedometer.svg?branch=master)](https://travis-ci.com/pritishvaidya/react-native-speedometer) [![CodeFactor](https://www.codefactor.io/repository/github/pritishvaidya/react-native-speedometer/badge)](https://www.codefactor.io/repository/github/pritishvaidya/react-native-speedometer) [![Maintainability](https://api.codeclimate.com/v1/badges/0938f80fff81ed82c9de/maintainability)](https://codeclimate.com/github/pritishvaidya/react-native-speedometer/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/0938f80fff81ed82c9de/test_coverage)](https://codeclimate.com/github/pritishvaidya/react-native-speedometer/test_coverage) [![npm version](https://badge.fury.io/js/react-native-speedometer.svg)](https://badge.fury.io/js/react-native-speedometer) [![npm downloads](https://img.shields.io/npm/dt/react-native-speedometer.svg)](https://npm-stat.com/charts.html?package=react-native-speedometer&from=2018-02-17&to=2018-12-28) <a href="https://github.com/pritishvaidya/react-native-speedometer/blob/master/README.md"><img src="https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg" alt="module formats: umd, cjs, esm"></a>

A Customizable Speedometer Implementation in React Native

## Show Cases
![Alt Text](https://media.giphy.com/media/7SEJiywhkmM9veTlvi/giphy.gif)

## Getting Started

- [Installation](#installation)
- [Basic Usage](#basic-usage)
- [Properties](#properties)
- [Defaults](#defaults)
- [Contribution](#contribution)
- [TODOS](#todos)
- [Questions](#questions)

### Installation

```bash
$ npm i react-native-speedometer --save
```

### Basic Usage
```
import React, { Component } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  TextInput
} from 'react-native';

import RNSpeedometer from 'react-native-speedometer'

class App extends Component {
  state = {
    value: 0,
  };

onChange = (value) => this.setState({ value: parseInt(value) });

render() {
     return (
        <SafeAreaView style={style.container}>
          <TextInput placeholder="Speedometer Value" style={styles.textInput} onChangeText={this.onChange} />
          <RNSpeedometer value={this.state.value} size={200}/>
        </SafeAreaView>
      );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textInput: {
    borderBottomWidth: 0.3,
    borderBottomColor: 'black',
    height: 25,
    fontSize: 16,
    marginVertical: 50,
    marginHorizontal: 20,
  },
});
```

### Properties
| Prop  | Default  | Type | Description |
| :------------ |---------------:| :---------------| :-----|
| value | required | number | Current Value |
| size | [Default Labels](#defaults) | number | Size |
| defaultValue | 50 | number | Default Value |
| minValue | 0 | number | Minimum Limit |
| maxValue | 100 | number | Maximum Value |
| allowedDecimals | 0 | number | Allowed Decimal Places |
| easeDuration | 500| number | Ease Duration for the Needle animation |
| labels | [Default Labels](#defaults) | array | Labels List |
| needleImage | [Default Needle Image](#defaults) | string | Absolute path to the Needle Image |
| wrapperStyle | {} | object | Wrapper Style |
| outerCircleStyle   | {} | object | Outer Circle Style |
| halfCircleStyle   | {} | object | Half Circle Style |
| imageWrapperStyle | {} | object | Needle Image Wrapper Style |
| imageStyle | {} | object | Needle Image Style |
| innerCircleStyle | {} | object | Inner Circle Style |
| labelWrapperStyle | {} | object | Label Wrapper Style |
| labelStyle | {} | object | Label Style |
| labelNoteStyle | {} | object | Label Note Style |

### Defaults
```
  size: deviceWidth - 20,
  defaultValue: 50,
  minValue: 0,
  maxValue: 100,
  easeDuration: 500,
  labels: [
    {
      name: 'Too Slow',
      labelColor: '#ff2900',
      activeBarColor: '#ff2900',
    },
    {
      name: 'Very Slow',
      labelColor: '#ff5400',
      activeBarColor: '#ff5400',
    },
    {
      name: 'Slow',
      labelColor: '#f4ab44',
      activeBarColor: '#f4ab44',
    },
    {
      name: 'Normal',
      labelColor: '#f2cf1f',
      activeBarColor: '#f2cf1f',
    },
    {
      name: 'Fast',
      labelColor: '#14eb6e',
      activeBarColor: '#14eb6e',
    },
    {
      name: 'Unbelievably Fast',
      labelColor: '#00ff6b',
      activeBarColor: '#00ff6b',
    },
  ],
  needleImage: require('./images/speedometer-needle.png'),
  wrapperStyle: {},
  outerCircleStyle: {},
  halfCircleStyle: {},
  imageWrapperStyle: {},
  imageStyle: {},
  innerCircleStyle: {},
  labelWrapperStyle: {},
  labelStyle: {},
  labelNoteStyle: {},
```

## Contribution

- [@pritishvaidya](mailto:pritishvaidya94@gmail.com) The main author.

## TODOS
- Provision to remove `labels` and `labelIndex`.
- Unequal Split of chart (Need Help)

## Questions

Feel free to [contact me](mailto:pritishvaidya94@gmail.co) or [create an issue](https://github.com/pritishvaidya/react-native-speedometer/issues/new)

react-native-speedometer

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README