Rn-ruler-picker NPM

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.

RulerPicker Demo

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

npm install react-native-ruler-picker

yarn add react-native-ruler-picker

Usage

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

import React from 'react';
import { View } from 'react-native';
import RulerPicker from 'react-native-ruler-picker';

const App = () => {
  const handleValueChange = (value: number) => {
    console.log('Selected Value:', value);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <RulerPicker
        initialValue={70}
        minValue={10}
        maxValue={200}
        step={1}
        unit="Kg"
        onValueChange={handleValueChange}
      />
    </View>
  );
};

export 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:

<RulerPicker
  initialValue={50}
  minValue={20}
  maxValue={100}
  unit="Kg"
  weightTextStyle={{ fontSize: 40, color: 'blue' }}
  centerLineStyle={{ backgroundColor: 'red', height: 80 }}
  lineStyle={{ backgroundColor: 'gray' }}
  textStyle={{ color: 'black', fontSize: 12 }}
  onValueChange={(value) => console.log(value)}
/>

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.

react-native ruler picker horizontal customizable value-selector rn-react-nativer-ruler-picker react-native-ruler-picker

0.0.2

7 months ago

0.0.1

7 months ago