@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 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}
    />
  );
}

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