0.1.1 • Published 11 months ago

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

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months ago

react-native-picker-horizontal

Node.js CI

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

Picker example Picker example

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

NameTypeDescriptionDetails
dataany[]Array of scrolling itemsRequired
renderItem(item: any, index: number) => ReactNodeFunction generates ReactNode scrolling itemsRequired
itemWidthnumberShould be same as width of renderItem resultRequired
initialIndexnumberIndex of initial selected element
onChange(position: number) => voidCallback which returns new position
markReactNodeCreate your own mark for selected element
interpolateScale(index: number, itemWidth: number) => Animated.InterpolationConfigTypeSet custom animation effect for items scale
interpolateOpacity(index: number, itemWidth: number) => Animated.InterpolationConfigTypeSet custom animation effect for items opacity