README
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';
export default class SimpleExample extends Component {
handleClick = (index, options, onValueChange) => {
this.sp.scrollToIndex(index); // select 'c'
onValueChange(options[index]);
}
render() {
return(
<ScrollPicker
ref={(sp) => {this.sp = sp}}
dataSource={options}
selectedIndex={0}
itemHeight={ITEM_HEIGHT}
wrapperHeight={500}
wrapperStyle={{
backgroundColor: 'transparent'
}}
renderItem={(data, index, isSelected) => {
return(
<TouchableOpacity
onPress={() => this.handleClick(index, options, onValueChange)}
style={{height: ITEM_HEIGHT}}>
<Text style={isSelected ? {
color: '#fff',
textAlign: 'center',
fontSize: 34,
height: 50,
fontWeight: 'bold'
} : {
color: '#fff',
textAlign: 'center',
fontSize: 20,
height: 50,
fontWeight: '300'
}}
>
{data}
</Text>
</TouchableOpacity>
)
}}
onValueChange={(data, selectedIndex) => {
onValueChange(options[selectedIndex]);
}}
/>
);
}
}
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: this.wrapperHeight,
flex: 1,
overflow: 'hidden',
},
highlightStyle = {
position: 'absolute',
top: (this.wrapperHeight - this.itemHeight) / 2,
height: this.itemHeight,
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!