React Native Turbo Meter

A highly customizable and easy-to-use speedometer component for React Native. Perfect for integrating stylish speedometers or gauges into your app.

Features

• Simple, customizable speedometer display.
• Supports dynamic value changes.
• Customizable ring color, needle color, size, and more.
• Easy integration with your React Native projects.

Installation

To install this package, run:

npm install react-native-turbo-meter --save

or if you're using yarn:

yarn add react-native-turbo-meter

Usage

Basic Usage

You can easily add the Turbo Meter component to your project like this:

import React from 'react';
import { View, Text } from 'react-native';
import TurboMeter from 'react-native-turbo-meter';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Turbo Meter Demo</Text>
      <TurboMeter value={75} />
    </View>
  );
};

export default App;

Customization

The TurboMeter component is highly customizable to match the needs of your design. You can adjust the following props to control its appearance:

Props

| Prop | Type | Default | Description | |------------------|---------------------|-------------|----------------------------------------------| | value | number | 0 | The current value of the speedometer (0 to 100). | | max | number | 100 | Maximum value for the speedometer. | | size | number | 200 | The size of the speedometer. | | width | number | 15 | Width of the speedometer ring. | | ringColor | string | #00ff00 | Color of the speedometer ring. | | needleColor | string | #ff0000 | Color of the needle. | | backgroundColor| string | #ffffff | Background color of the speedometer. | | fontSize | number | 30 | Font size for the label in the center. |

Example of Customization

<TurboMeter
  value={60}
  max={120}
  size={250}
  width={20}
  ringColor="#3498db"
  needleColor="#e74c3c"
  backgroundColor="#ecf0f1"
  fontSize={40}
/>

API

value

• Type: number
• Default: 0
• Description: Sets the current value of the speedometer (range 0 to max).

max

• Type: number
• Default: 100
• Description: The maximum value of the speedometer, used to scale the needle.

size

• Type: number
• Default: 200
• Description: Controls the overall size of the speedometer (in pixels).

width

• Type: number
• Default: 15
• Description: The width of the speedometer ring.

ringColor

• Type: string
• Default: #00ff00
• Description: The color of the outer ring (use any valid CSS color).

needleColor

• Type: string
• Default: #ff0000
• Description: The color of the needle.

backgroundColor

• Type: string
• Default: #ffffff
• Description: The background color of the speedometer area.

fontSize

• Type: number
• Default: 30
• Description: The font size of the center value displayed.

Contributing

We welcome contributions to react-native-turbo-meter! If you'd like to help improve this project, please follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes.
4. Commit your changes (git commit -am 'Add new feature').
5. Push to the branch (git push origin feature-branch).
6. Open a Pull Request with a detailed description of your changes.

License

MIT License. See the LICENSE file for more details.

Acknowledgments

• Special thanks to the creators and contributors of react-native-turbo-meter for making this project possible.
• Inspired by other great React Native UI components.