rn-scrollable-picker
A pure JS scrollable picker solution for react-native, highly customizable.
-Auto height detection
Usage
npm i rn-scrollable-picker
import React Component from 'react';import ScrollPicker from 'rn-scrollable-picker'; { thissp; // select 'c' ; } { return <ScrollPicker = = = = = = = = /> ; }
Props
Prop | Required | Default | Params type | Description |
---|---|---|---|---|
dataSource | yes | Array | Picker data | |
wrapperHeight | yes | Number | Picker window height | |
renderItem | no | Function | Renders picker options | |
selectedIndex | no | 0 | Number | Default selected value |
onValueChange | no | () => {} | Function | Called on valie change |
highlightStyle | no | Style array | Called when epg boundaries are left | |
wrapperStyle | no | Style array | Called when epg boundaries are left | |
itemHeight | no | 30 | Number | Picker's single item height |
fixedHeight | no | false | Bool | Disable dynamic height calculation |
rotationEnabled | no | true | Bool | Auto rotation support which is calling handleWrapperHeightChange method |
Default styles
wrapperStyle = height: thiswrapperHeight flex: 1 overflow: 'hidden' highlightStyle = position: 'absolute' top: thiswrapperHeight - thisitemHeight / 2 height: thisitemHeight width: highlightWidth itemWrapper: height: 30 justifyContent: 'center' alignItems: 'center' itemText: color: '#999' itemTextSelected: color: '#333'
Contributors ✨
Thanks goes to these wonderful people :shipit:
Rokas Kašinskas 💻 |
Lukas Baranauskas 💻 |
veizz 💻 |
Rafael Magalhães ⚠️ |
This project follows the all-contributors specification. Contributions of any kind welcome!