0.2.2 • Published 2 months ago
react-native-ruler-picker v0.2.2
react-native-ruler-picker
⚡ Lightning-fast and customizable Ruler Picker component for React Native
Installation
- Ensure sure you've installed flash-list
yarn add react-native-ruler-pickerornpm 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