Turn on JavaScript
Pritish Vaidya

Building a Lightweight Speedometer in React Native

📅️ January 12, 2019

This article demonstrates the building of a simple and lightweight Speedometer implementation in React Native with minimal dependencies.

Contents

  • Basic Requirements
  • Default Props Overview
  • Utils
  • Integrating into the Component
  • Usage
  • Links

Basic Requirements

The only external dependency required is the prop-types package for Type Checking or Prop Validation.

Other than that, we need one custom speedometer needle image.

speedometer_1

Default Props Overview

speedometer_code_1

value: Current value

defaultValue: Initial value

minValue: Minimum limit

maxValue: Maximum limit

easeDuration: Ease duration of the needle animation

labels: List of labels with color

needleImage: Absolute path to the needle image


Utils

There are three types of Utility functions that are required.

  • Calculate Degree from Labels
  • Calculate Labels from Value
  • Limit Value

Calculate Degree from Labels

This Simple Utility function will return the per label degree from the list of labels.

speedometer_code_2

The total degree of the circle is divided by labels length to give per level degree.

Calculate Labels from Value

This Utility function will return the current label from the list of labels based on the current value of the speedometer.

speedometer_code_3

First, the value of the speedometer is normalized to a percentage based on the maxValue and the minValue.

Then the current index of the label is calculated by multiplying it to the length of the labels list. (The index is always 1 less than the actual).

At last, we can return the label from the list based on the calculated index.

Limit Value

This Utility function is used to limit the current value between maxValue and minValue .

speedometer_code_4


Integrating into the Component

Adding the Styles

speedometer_code_5

wrapper: Wrapper styles.

outerCircle: Outer Circle styles.

innerCircle: Inner Circle styles.

halfCircle: Used to build label blocks between outer and inner circle.

imageWrapper: Speedometer Needle Image Wrapper styles.

image: Speedometer Needle Image styles.

label: Label styles.

labelNote: Label note styles.

Constructing the static component based on the styles

speedometer_code_6

By adding this your, component speedometer will look like this

speedometer_2

The reason to add style objects in an array is that we’ll be appending more styles to it later on.

Adding the Utils

speedometer_code_7

The initial degree is set to 180 for a semi-circle.

Now we get the perLevelDegree and label based on the value supplied as the props.

circleDegree is calculated for each halfCircle style based on the current label index and the perLevelDegree. 90 is added to it because our circle starts as a semi-circle.

The background color of our half circle is set based on the label that we get from our util.

Next we use transforms to position and rotate our block based on the circleDegree.

Adding the above changes will make the speedometer will something look like this

speedometer_3

Adding the Animations

speedometer_code_8

First we need to initialize the speedometer value in the constructor. Then, we add the animations based on the current value limited by our utility function.

The output range is set in between -90deg to 90deg for the needle to animate.

Now this component is ready to be exported and used.


Usage

speedometer_code_9

After making the necessary changes and updating value based on the TextInput the component will look like this.

speedometer_4


Links

The complete code can be found on

as react-native-speedometer package.


Thanks for reading. If you liked this article, show your support by clapping to share with other people on Medium.

More of the cool stuff can be found on my StackOverflow and GitHub profiles.

Follow me on LinkedIn, Medium, Twitter for further update new articles.