@vseslav/react-native-horizontal-picker
Component for displaying horizontally scrolled picker for React Native
Example
Usage
$ npm install --save @vseslav/react-native-horizontal-picker
import HorizontalPicker from '@vseslav/react-native-horizontal-picker';
const Items = Array.from(Array(100).keys());
const rednerItem = (item, index) => (
<View style={[styles.item], { width: 80 }}>
<Text style={styles.itemText}>
{ item }
</Text>
</View>
);
export default function MyPicker() {
return (
<HorizontalPicker
data={Items}
renderItem={rednerItem}
itemWidth={80}
/>
);
}
Props
Required
Prop |
Description |
Type |
Default |
data |
Array of any items to loop on |
Array |
Required |
renderItem |
Takes an item from data and renders it into the picker. The function receives one argument {item, index} and must return a React element. |
(item: any, index: number) => ReactNode |
Required |
itemWidth |
Width in pixels of horizontal pickers's items, must be the same for all of them |
Number |
Required |
Not Required
Prop |
Description |
Type |
Default |
snapTimeout |
Number of millisecoonds. When user will drag to scroll, after this time picker will automatically scroll to nearest item |
Number |
500 |
defaultIndex |
Default index of item. Must be defaultIndex < data.length && defaultIndex > 0 | null |
|
|
onChange |
Callback called when selected item is changed |
(position: number) => voiod |
null |
animatedScrollToDefaultIndex |
Animate autoscroll to default index |
boolean |
false |