6
A Lightning-fast and customizable Ruler Picker component for React Native
source link: https://reactnativeexample.com/a-lightning-fast-and-customizable-ruler-picker-component-for-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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-picker
ornpm 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
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK