react-native-speedometer

    1.0.5 • Public • Published

    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

    Install

    npm i react-native-speedometer

    DownloadsWeekly Downloads

    1,361

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    124 kB

    Total Files

    15

    Last publish

    Collaborators

    • pritishvaidya