@ike_doliv/react-native-picker-horizontal

react-native-picker-horizontal

A picker component for React Native. Allows to select the item from horizontal scrolling container with custom animations.

Getting Started

Installing

npm install react-native-picker-horizontal

Basic Usage

import Picker from 'react-native-picker-horizontal';

const Items = Array.from(Array(30).keys());
const itemWidth = 50;

export const Picker = () => (
  <Picker
    data={Items}
    renderItem={rednerItem}
    itemWidth={itemWidth}
    initialIndex={selected}
    onChange={newValue => {}}
  />
);

const rednerItem = (item, index) => (
  <Text style={{ width: itemWidth }}>
    { item }
  </Text>
);

Props

Name	Type	Description	Details
data	any[]	Array of scrolling items	Required
renderItem	(item: any, index: number) => ReactNode	Function generates ReactNode scrolling items	Required
itemWidth	number	Should be same as width of renderItem result	Required
initialIndex	number	Index of initial selected element
onChange	(position: number) => void	Callback which returns new position
mark	ReactNode	Create your own mark for selected element
interpolateScale	(index: number, itemWidth: number) => Animated.InterpolationConfigType	Set custom animation effect for items scale
interpolateOpacity	(index: number, itemWidth: number) => Animated.InterpolationConfigType	Set custom animation effect for items opacity