react-native-speedometer

A Customizable Speedometer Implementation in React Native

Show Cases

Getting Started

• Installation
• Basic Usage
• Properties
• Defaults
• Contribution
• TODOS
• Questions

Installation

$ 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	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	array	Labels List
needleImage	Default Needle Image	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 The main author.

TODOS

• Provision to remove labels and labelIndex.
• Unequal Split of chart (Need Help)

Questions

Feel free to contact me or create an issue