react-native-ruler-picker

npm HitCount

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

Preview

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

GitHub

View Github