0.1.1 • Published 3 years ago

@vseslav/react-native-horizontal-picker v0.1.1

Weekly downloads
136
License
MIT
Repository
github
Last release
3 years ago

@vseslav/react-native-horizontal-picker

Component for displaying horizontally scrolled picker for React Native

platforms

Example

@vseslav/react-native-horizontal-picker

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

PropDescriptionTypeDefault
dataArray of any items to loop onArrayRequired
renderItemTakes 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) => ReactNodeRequired
itemWidthWidth in pixels of horizontal pickers's items, must be the same for all of themNumberRequired

Not Required

PropDescriptionTypeDefault
snapTimeoutNumber of millisecoonds. When user will drag to scroll, after this time picker will automatically scroll to nearest itemNumber500
defaultIndexDefault index of item. Must be defaultIndex < data.length && defaultIndex > 0 | null
onChangeCallback called when selected item is changed(position: number) => voiodnull
animatedScrollToDefaultIndexAnimate autoscroll to default indexbooleanfalse