Building a Lightweight Speedometer in React Native

Pritish Vaidya
Jan 14, 2019 · 4 min read
Photo by chuttersnap on Unsplash

Introduction

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

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

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.

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.

Default Props Overview

Image Credit: Carbon.

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

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

Image Credit: Carbon.

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

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

Image Credit: Carbon.

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.

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

Image Credit: Carbon.

Integrating into the Component

Image Credit: Carbon.

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.

Image Credit: Carbon.

By adding this your, component speedometer will look like this

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

Image Credit: Carbon.

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

Image Credit: Carbon.

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

Image Credit: Carbon.

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

Links

The complete code can be found on Github or npm 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.


Originally published at pritishvaidya.com on January 13, 2019.

React Native Training

Stories and tutorials for developers interested in React Native

Pritish Vaidya

Written by

A MetalHead who is OpenSourcing https://pritishvaidya.com https://blog.pritishvaidya.com

React Native Training

Stories and tutorials for developers interested in React Native

More From Medium

More from React Native Training

More from React Native Training

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade