React Native Speedometer Plus

Description

React Native Speedometer Plus is a customizable speedometer component for your React Native applications. Easily integrate a sleek and visually appealing speedometer to display values in a user-friendly way.

Installation

1npm install react-native-speedometer-plus

Usage

1import React from 'react';
2import { View } from 'react-native';
3import {SpeedoMeterPlus} from 'react-native-speedometer-plus';
4
5const YourComponent = () => {
6  return (
7    <View>
8      {/* Your other components */}
9      <SpeedoMeterPlus
10        value={50}
11        size={200}
12        minValue={0}
13        maxValue={100}
14        // Customize other props as needed
15      />
16      {/* Your other components */}
17    </View>
18  );
19};
20
21export default YourComponent;

Props

value (number, required): The current value to display on the speedometer.

size (number): The size of the speedometer. Default is 200.

minValue (number): The minimum value of the speedometer. Default is 0.

maxValue (number): The maximum value of the speedometer. Default is 100.

lables (array): The labels prop allows you to customize the appearance of different levels on the speedometer.

allowedDecimals (number): Set the number of allowed decimal places for the displayed value.

labelStyle (object): Style object for the labels. For example, you can customize the font size using the fontSize property.

wrapperStyle (object): Style object for the outer wrapper of the speedometer. Use this to adjust the spacing or margins around the speedometer.

innerCircleStyle (object): Style object for the inner circle of the speedometer. You can customize the background color using the backgroundColor property.

innerFullCircleStyle (object): Style object for the full inner circle of the speedometer. Customize the background color using the backgroundColor property.

showInnerLabelNote (boolean): Set to true to display an inner label note.

innerLabelNoteValue (string): The value to be displayed as the inner label note.

innerLabelNoteStyle (object): Style object for the inner label note. Customize properties like color and fontSize.

innerFullCircleValuePrefix (string): Prefix for the value displayed on the full inner circle.

innerFullCircleValueSuffix (string): Suffix for the value displayed on the full inner circle.

Labels

The labels prop allows you to customize the appearance of different levels on the speedometer. It should be an array of objects, where each object represents a level and has the following properties:

• name (string, required): The label or name associated with the level.
• labelColor (string, required): The color of the label text for that level.
• activeBarColor (string, required): The color of the active bar or segment of the speedometer for that level.

Example:

1const allLabels = [
2  {
3    name: 'Test1',
4    labelColor: 'blue',
5    activeBarColor: 'blue',
6  },
7  {
8    name: 'Test2',
9    labelColor: '#fff590',
10    activeBarColor: '#fff590',
11  },
12  {
13    name: 'Test3',
14    labelColor: '#ff7590',
15    activeBarColor: '#ff7590',
16  },
17];
18
19<SpeedoMeterPlus
20  // Other props...
21  labels={allLabels}
22/>

Additional Props Example:

1<SpeedoMeterPlus
2  // Other props...
3  allowedDecimals={1}
4  labelStyle={{ fontSize: 20 }}
5  wrapperStyle={{ marginBottom: 70 }}
6  innerCircleStyle={{ backgroundColor: '#e0e9f7' }}
7  innerFullCircleStyle={{ backgroundColor: 'green' }}
8  showInnerLabelNote={false}
9  innerLabelNoteValue="IDX"
10  innerLabelNoteStyle={{ color: 'black', fontSize: 23 }}
11  innerFullCircleValuePrefix="Y"
12  innerFullCircleValueSuffix="%"
13/>

We will update all other props.

Author

• Kahnu Charan Swain