@vseslav/react-native-horizontal-picker
Component for displaying horizontally scrolled picker for React Native
![platforms](https://camo.githubusercontent.com/b541919df086e0ee9b90ed9abef842e9b90750ffee86845de9db372dabae7742/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f706c6174666f726d732d416e64726f6964253230253743253230694f532d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)
![@vseslav/react-native-horizontal-picker](https://github.com/vdor/react-native-horizontal-picker/raw/master/example.gif)
$ npm install --save @vseslav/react-native-horizontal-picker
import HorizontalPicker from '@vseslav/react-native-horizontal-picker';
const Items = Array.from(Array(100).keys());
const renderItem = (item, index) => (
<View style={[styles.item], { width: 80 }}>
<Text style={styles.itemText}>
{ item }
</Text>
</View>
);
export default function MyPicker() {
return (
<HorizontalPicker
data={Items}
renderItem={renderItem}
itemWidth={80}
/>
);
}
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 |
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 |