Skip to content
A Customizable Speedometer Implementation in React Native
JavaScript Objective-C Python Java
Branch: master
Clone or download
pritishvaidya Merge pull request #9 from pritishvaidya/dependabot/npm_and_yarn/exam…
…ple/handlebars-4.1.2

Bump handlebars from 4.0.12 to 4.1.2 in /example
Latest commit 3fb7743 Jul 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_tests_ Adding tests and updating snapshots Jan 24, 2019
example Merge pull request #9 from pritishvaidya/dependabot/npm_and_yarn/exam… Jul 21, 2019
images Bundling using rollup 💥 Jan 23, 2019
src ... Apr 13, 2019
.eslintrc.json Adding lint and babel files Dec 26, 2018
.gitignore
.npmignore Updating the example Jan 22, 2019
.travis.yml Integration with code climate 💥 Jan 23, 2019
LICENSE Initial commit Dec 26, 2018
README.md Update README.md Apr 20, 2019
package.json Bump version Apr 20, 2019
rollup.config.js Bundling using rollup 💥 Jan 23, 2019
yarn.lock Merge pull request #10 from pritishvaidya/dependabot/npm_and_yarn/han… Jul 21, 2019

README.md

react-native-speedometer Build Status CodeFactor Maintainability Test Coverage npm version npm downloads module formats: umd, cjs, esm

A Customizable Speedometer Implementation in React Native

Show Cases

Alt Text

Getting Started

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

TODOS

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

Questions

Feel free to contact me or create an issue

You can’t perform that action at this time.