@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