react-native-ruler-picker

⚡ Lightning-fast and customizable Ruler Picker component for React Native

Installation

1. Ensure sure you've installed flash-list
2. yarn add react-native-ruler-picker or npm install react-native-ruler-picker

Usage

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

<RulerPicker
  min={0}
  max={240}
  step={1}
  fractionDigits={0}
  initialValue={0}
  onValueChange={(number) => console.log(number)}
  onValueChangeEnd={(number) => console.log(number)}
  unit="cm"
/>;

Props

| Name | Type | Required | Default Value | Description | | ---------------- | ---------------------------- | -------- | ------------- | ---------------------------------------- | | width | number | No | windowWidth | Width of the ruler picker | | height | number | No | 500 | Height of the ruler picker | | min | number | Yes | - | Minimum value of the ruler picker | | max | number | Yes | - | Maximum value of the ruler picker | | step | number | No | 1 | Step of the ruler picker | | initialValue | number | No | min | Initial value of the ruler picker | | fractionDigits | number | No | 1 | Number of digits after the decimal point | | unit | string | No | 'cm' | Unit of the ruler picker | | indicatorHeight | number | No | 80 | Height of the indicator | | indicatorColor | string | No | 'black' | Color of the center line | | valueTextStyle | RulerPickerTextProps | No | - | Text style of the value | | unitTextStyle | RulerPickerTextProps | No | - | Text style of the unit | | decelerationRate | 'fast' | 'normal' | number | No | 'normal' | Deceleration rate of the ruler picker | | onValueChange | (value: string) => void | No | - | Callback when the value changes | | onValueChangeEnd | (value: string) => void | No | - | Callback when the value changes end | | gapBetweenSteps | number | No | 10 | Gap between steps | | shortStepHeight | number | No | 20 | Height of the short step | | longStepHeight | number | No | 40 | Height of the long step | | stepWidth | number | No | 2 | Width of the steps | | shortStepColor | string | No | 'lightgray' | Color of the short steps | | longStepColor | string | No | 'darkgray' | Color of the long steps |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library