@ike_doliv/react-native-picker-horizontal
v0.1.1
Published
React native value picker with horizontal scroll
Downloads
10
Maintainers
Readme
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