React-native-wheel-picker-expo NPM

react-native-wheel-picker-expo

npm type definitions

React Native wheel picker like iOS without ejected Expo/CRNA

npm.io

Demo with Expo

npm.io

Installation

expo install react-native-wheel-picker-expo

npm install react-native-wheel-picker-expo

Sample Code

import React from 'react';
import WheelPickerExpo from 'react-native-wheel-picker-expo';

const CITIES = 'Jakarta,Bandung,Sumbawa,Taliwang,Lombok,Bima'.split(',');

function App() {
    return (
        <WheelPickerExpo
          height={300}
          width={150}
          initialSelectedIndex={3}
          items={CITIES.map(name => ({ label: name, value: '' }))}
          onChange={({ item }) => setCity(item.label)} />
    );
}

Props

Prop	Default	Type	Description
items	`Array`	`Array<ItemType>`	Data that will be rendered as options
onChange	`-`	`({index, item}) => void`	Function will send `item` and `index` option selected
initialSelectedIndex	`-`	`number`	Inital index will be selected
height	`200`	`number`	Style height for container
width	`150`	`number`	Style width for container
flatListProps	`-`	`FlatListProps<ItemType>`	Props of FlatList
backgroundColor	`#FFFFFF`	`string`	For best result this is necessary if background is not white. `Note:` Only accept `hexcolor` and have 7 length of string. Ex: `#F00F00`
selectedStyle	`-`	`{ borderColor: string; borderWidth: number }`	Style for selected item
renderItem	`-`	`(props: RenderItemProps) => JSX.Element`	Return JSX Element to override the items
haptics	false	`boolean`	Enable haptic feedback