pritishvaidya/react-native-speedometer

A Customizable Speedometer Implementation in React Native

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

react-native-speedometer's Issues

Doesn't work fine on rtl

Getting a blank white page

When I run my app nothing happens, I only see the pagination

show 270 degree circle

Thank you for creating a great library.
I do not want to display 180 degrees but want to show 270 degree circle, how to do? Also I want the width of the circle to be smaller.
Help me please.

change the information set of sections in the level.

Hello.
I want to change the information set of sections in the level.
For example, I want to divide the cake into the following sections:
Parts 1: 13 to 18.5
Parts 2: 18.5 to 24.9
parts 3: 25 to 29.9
parts 4: 30 to 34.9
how will i do
And I want to turn off the index display and explain the index of the chart. Please teach me.
Thank you very much.

not working in latest react-native version

wrapperStyle and circleStyle all these object not working, how to reduce thikness of circle and how to % in number showing

wrapperStyle and circleStyle all these object not working, how to reduce thikness of circle and how to % in number showing

showing error:TypeError: undefined is not an object (evaluating 'label.labelColor')

<RNSpeedometer
value={meterValue}
size={size}
minValue={minValue}
maxValue={maxValue}
allowedDecimals={0}
easeDuration={500}
labels={[
{
name: 'Low Attendance',
labelColor: '#F91128', // Darker red
activeBarColor: '#F91128', // Darker red
},
{
name: 'Average Attendance',
labelColor: '#34E959', // Darker green
activeBarColor: '#34E959', // Darker green
},
{
name: 'Good Attendance',
labelColor: '#189F33', // Darker green
activeBarColor: '#189F33', // Darker green
},
]}
labelStyle={{
margin: -8,
color:
meterValue < 31
? '#F91128'
: meterValue < 70
? '#34E959'
: '#189F33',
}}
/>

showing the error:TypeError: undefined is not an object (evaluating 'label.labelColor')

<RNSpeedometer
value={meterValue}
size={size}
minValue={minValue}
maxValue={maxValue}
allowedDecimals={0}
easeDuration={500}
labels={[
{
name: 'Low Attendance',
labelColor: '#F91128', // Darker red
activeBarColor: '#F91128', // Darker red
},
{
name: 'Average Attendance',
labelColor: '#34E959', // Darker green
activeBarColor: '#34E959', // Darker green
},
{
name: 'Good Attendance',
labelColor: '#189F33', // Darker green
activeBarColor: '#189F33', // Darker green
},
]}
labelStyle={{
margin: -8,
color:
meterValue < 31
? '#F91128'
: meterValue < 70
? '#34E959'
: '#189F33',
}}
/>

Speedometer does not touch left end when value is minimum. Similarly speedometer does not touch right end when value is maximum

How I can create a gradient color ??

Is this library still maintained?

Is this library still maintained?

Animated: `useNativeDriver` was not specified. This is a required 'option and must be explicitly set to `true` or `false`

Animated: useNativeDriver was not specified. This is a required 'option and must be explicitly set to true or false
After updating to sdk 38 I am getting the above issue,
I am not getting any solution please help me asap.
Thanks

Cannot read property 'labelColor' of undefined

hi
i installed the package using yarn
but got this error

version i'm using :
"react-native-speedometer": "^1.0.2",

thank you a lot for helping me ! :-)

Animated: `useNativeDriver` was not specified rn v0.62+

Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false
in Speedometer

Negative Value for minValue

I'd like to have a negative value expressed by the speedometer.

When I try to put a negative in for minValue, I get TypeError: undefined is not an object (evaluating 'label.labelColor'). Not sure how this error applies, but I'd love the ability to have negative values.

I'm using it for device acceleration, and would like to have minValue be -25, and maxValue to be 25 in order to express both positive and negative accelerations.

attach range to labels

Hi, This speedometer is great. I would like to have an unequal split of labels against values.
i.e. I have the following
labels={[
{
name: 'High Risk',
labelColor: '#ff2900',
activeBarColor: '#ff2900',
},
{
name: 'Medium Risk' ,
labelColor: '#f4ab44',
activeBarColor: '#f4ab44',
},
{
name: 'Low Risk',
labelColor: '#00ff6b',
activeBarColor: '#00ff6b',
},
I would like to assign value 0-15 to High Risk, value 16-60 to Medium Risk, value 61-100 to Low Risk. Can you please help me to do this?
Thank you

RTL Speedometer

Hello, can you do something to work on the rtl react-native-speedometer too?

Not able to change the label color

I have added package to my project. I am not able to change the font color where the value is showing just below the speedometer.

npm ERR! Cannot read properties of null (reading 'children')

unable to install libraray, facing this while installing library
npm ERR! Cannot read properties of null (reading 'children')

Please help me out how to hide the value in speedometer

Size of Speedometer

Is it possible to change the size of speedometer ?

How to Add Any Extra Character on Labels, like Percentage (%)

I want to put additional %, or any additional character on the speedometer.
Means - in value, I can pass any numeric value and that's good.
Now, I want to display that like this - 33%

Is there any way to do that ?

Issue in react-native-password-strength-meter

Component Exception

Style property 'Width' is not supported in native animated module

I am getting this error can you help me with this error

Getting useNativeDriver warning and animation is laggy

How to fix this warning:

• Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false
  I have tried passing this as props. But still no use. How to fix this issue. Thanks

react native speedometer is not working -- Help me to get value of speedometer from another screen

App.js

here i pass data everything fine over here
onPress={() => { setbmi("BMI = " + chnages(weigh, weightUnit, heigh, heightUnit)); navigation.navigate('Calculate',{ bmi:bmi }) }}

Calculate.js

`import { StyleSheet, Text, View} from 'react-native'
import React from 'react'
import RNSpeedometer from 'react-native-speedometer'


const Calculate = ({route, navigation}) => {
  const { bmi } = route.params;
alert(bmi)
  const [ bmiValue, setBmiValue ] = React.useState();
  React.useEffect((bmi)=>{
setBmiValue(bmi)
  },[])
  return (

<View> `

### //Here i got the value

  <Text style={{justifyContent:'center',alignItems:'center',color:'#000'}}>Bmi Is {JSON.stringify(bmi)}</Text>

but i did not get value on speedometer

  <RNSpeedometer value={bmi} size={200} 
  minValue = {0}
  maxValue = {50}
  allowedDecimals = {10}
  labels={
    [
      {
        name: 'You are Underweight',
        labelColor : 'pink',
        activeBarColor : 'red'
      },
      {
        name: 'You are Healthy',
        labelColor : 'green',
        activeBarColor : 'red'
      },
      {
        name: 'You are Overweight',
        labelColor : 'orange',
        activeBarColor : 'red'
      },
      {
        name: 'You are Obese',
        labelColor : 'red',
        activeBarColor : 'red'
      },
      {
        name: 'You are Severe Obese',
        labelColor : 'red',
        activeBarColor : 'red'
      }
    ]
  }
  />
</View>

)
}

export default Calculate

const styles = StyleSheet.create({})`

Size per color and Decimal Value (Question)

Hi, I would like to know if it is possible to set a value size for each color.
Example:

And I would also like to know if it is possible to print the value with decimal numbers like this example:

Make release

After pull requests, I would like you to release to be able to update in NPM (in the application).

Label and LabelNote position (question or enhancement)

Because I display speedometer small I need to display Label and LabelNot side by side like:
100 - Moderate
or
Moderate (100)
so it the Speedometer wont take vertical space.
Is this possible ?

Calculation for labelswith minValue not working as expected

While including a minValue, the calculateLabelFromValue function was not working as expected.
Current Formula: value / maxValue - minValue - src/utils/calculate-label-fromvalue.js
Example Testdata:
value = 4.4
maxValue = 5.0
minValue = 1.0
value / (maxValue - minValue) > 1

Suggested revision: (value - minValue) / (maxValue - minValue)

Its impossible to install on Expo and react@"17.0.1"

react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.5.2" from [email protected]
npm ERR! node_modules/react-native-speedometer
npm ERR! react-native-speedometer@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/vahidafshari/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/vahidafshari/.npm/_logs/2022-02-02T14_33_12_733Z-debug.log