Example of React Native Speedometer

Hello friends, In today’s tutorial we would learn about a new NPM package of react native known as React Native Speedometer. This package allows us to make bike or car like speedometer in react native with built in animation. Like for example, If you are creating a warning message app for user that you’re exceeding your speed limit and notifying user with different scenario. So in this tutorial we would learn about Example of React Native Speedometer. You can find their official documentation page HERE on NPM.

Live Screenshot of App :-

Contents in this project Example of React Native Speedometer :-

1. First of all before start coding for app, We have to install React Native Speedometer NPM package in our react native project. So open your project’s main Root location in CMD or Terminal and execute below command.

1	npm install react-native-speedometer --save

Screenshots :-

2. Now after finish installing the package. It’s time to start coding for the app. So open your project’s main App.js file and import useState, StyleSheet, View, SafeAreaView, Text and TextInput component.

1 2 3

import React, { useState } from 'react';   import { StyleSheet, View, SafeAreaView, Text, TextInput } from 'react-native';

3. Importing RNSpeedometer from ‘react-native-speedometer’ package.

1	import RNSpeedometer from 'react-native-speedometer';

4. Creating our main App component.

1 2 3 4 5

export default function App() {       }

5. Creating one State named as speedometer_Value with State update function set_Speedometer_Value() with default value of state as Zero.

1	const [speedometer_Value, set_Speedometer_Value] = useState(0);

6. Creating return() block, Now here we would make 1 Text component for showing title text and then we would make 1 Text Input component to take the number input from user and then we would make our RNSpeedometer component.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

return (     <SafeAreaView style={{ flex: 1 }}>       <View style={styles.MainContainer}>           <Text style={{ fontSize: 24, fontWeight: 'bold', marginTop: 20, color: 'black' }}>           React Native Speedometer Example         </Text>           <TextInput           placeholder="Enter Value Between 1 To 100"           style={styles.textInput}           onChangeText={(value) => set_Speedometer_Value(parseInt(value))}           keyboardType={'numeric'}         />           <RNSpeedometer           size={200}           minValue={0}           maxValue={100}           value={speedometer_Value}           allowedDecimals={0}           labels={[             {               name: 'Low Risk',               labelColor: '#f4ab44',               activeBarColor: '#f4ab44',             },             {               name: 'Medium Risk',               labelColor: '#00ff6b',               activeBarColor: '#00ff6b',             },             {               name: 'High Risk',               labelColor: '#FF6D00',               activeBarColor: '#FF6D00',             },             {               name: 'Max Risk',               labelColor: '#D50000',               activeBarColor: '#D50000',             },           ]}         />       </View>     </SafeAreaView>   );

7. Creating Style.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

const styles = StyleSheet.create({     MainContainer: {     flex: 1,     alignItems: 'center',   },     titleText: {     fontSize: 24,     fontWeight: 'bold',     marginTop: 20,     color: 'black'   },     textInput: {     textAlign: 'center',     marginTop: 15,     height: 40,     width: '90%',     borderWidth: 1,     borderColor: '#4CAF50',     borderRadius: 7,   }   });

8. Complete source code for App.js File :-

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

import React, { useState } from 'react';   import { StyleSheet, View, SafeAreaView, Text, TextInput } from 'react-native';   import RNSpeedometer from 'react-native-speedometer';   export default function App() {     const [speedometer_Value, set_Speedometer_Value] = useState(0);     return (     <SafeAreaView style={{ flex: 1 }}>       <View style={styles.MainContainer}>           <Text style={{ fontSize: 24, fontWeight: 'bold', marginTop: 20, color: 'black' }}>           React Native Speedometer Example         </Text>           <TextInput           placeholder="Enter Value Between 1 To 100"           style={styles.textInput}           onChangeText={(value) => set_Speedometer_Value(parseInt(value))}           keyboardType={'numeric'}         />           <RNSpeedometer           size={200}           minValue={0}           maxValue={100}           value={speedometer_Value}           allowedDecimals={0}           labels={[             {               name: 'Low Risk',               labelColor: '#f4ab44',               activeBarColor: '#f4ab44',             },             {               name: 'Medium Risk',               labelColor: '#00ff6b',               activeBarColor: '#00ff6b',             },             {               name: 'High Risk',               labelColor: '#FF6D00',               activeBarColor: '#FF6D00',             },             {               name: 'Max Risk',               labelColor: '#D50000',               activeBarColor: '#D50000',             },           ]}         />       </View>     </SafeAreaView>   ); };   const styles = StyleSheet.create({     MainContainer: {     flex: 1,     alignItems: 'center',   },     titleText: {     fontSize: 24,     fontWeight: 'bold',     marginTop: 20,     color: 'black'   },     textInput: {     textAlign: 'center',     marginTop: 15,     height: 40,     width: '90%',     borderWidth: 1,     borderColor: '#4CAF50',     borderRadius: 7,   }   });