react-native-ruler-picker

RulerPicker is a customizable horizontal ruler-style picker for React Native applications. It allows users to select values within a defined range using an intuitive scrolling interface. Perfect for weight, height, or any range-based selection.

Features

• 📏 Customizable scale: Define min/max values and step sizes.
• 🎨 Style options: Fully customizable styles for lines, text, and ruler elements.
• 🚀 Performance optimized: Smooth scrolling and precise value selection.
• 📦 Lightweight: Easy to integrate into any React Native project.

Installation

1npm install react-native-ruler-picker

or

1yarn add react-native-ruler-picker

Usage

Here's how to use the RulerPicker in your React Native project:

1import React from 'react';
2import { View } from 'react-native';
3import RulerPicker from 'react-native-ruler-picker';
4
5const App = () => {
6  const handleValueChange = (value: number) => {
7    console.log('Selected Value:', value);
8  };
9
10  return (
11    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
12      <RulerPicker
13        initialValue={70}
14        minValue={10}
15        maxValue={200}
16        step={1}
17        unit="Kg"
18        onValueChange={handleValueChange}
19      />
20    </View>
21  );
22};
23
24export default App;

Props

Prop	Type	Default	Description
initialValue	number	68	Initial value displayed on the ruler.
minValue	number	8	Minimum value selectable on the ruler.
maxValue	number	230	Maximum value selectable on the ruler.
step	number	0.1	Step between consecutive scale values.
unit	string	"Kg"	Unit displayed next to the selected value.
onValueChange	function	null	Callback triggered when the selected value changes.
rulerStyle	ViewStyle	null	Style for the ruler container.
scaleItemStyle	ViewStyle	null	Style for individual scale items.
lineStyle	ViewStyle	null	Style for the line elements on the ruler.
textStyle	TextStyle	null	Style for the text elements of scale values.
unitStyle	TextStyle	null	Style for the unit text (e.g., "Kg").
centerLineStyle	ViewStyle	null	Style for the center marker line of the ruler.
scaleWrapperStyle	ViewStyle	null	Style for the wrapper containing scale elements.
weightTextStyle	TextStyle	null	Style for the selected value text.
weightContainerStyle	ViewStyle	null	Style for the container displaying the selected value and unit.

Customization

The RulerPicker is highly customizable. Use the provided style props to modify the appearance to suit your app's design.

For example:

1<RulerPicker
2  initialValue={50}
3  minValue={20}
4  maxValue={100}
5  unit="Kg"
6  weightTextStyle={{ fontSize: 40, color: 'blue' }}
7  centerLineStyle={{ backgroundColor: 'red', height: 80 }}
8  lineStyle={{ backgroundColor: 'gray' }}
9  textStyle={{ color: 'black', fontSize: 12 }}
10  onValueChange={(value) => console.log(value)}
11/>

Example Output

Selected Value: 68

License

This package is licensed under the MIT License.

---

Contributing

We welcome contributions! Feel free to submit a pull request or open an issue for any bug fixes or feature suggestions.