React Native wheel picker like iOS without ejected Expo/CRNA
expo install react-native-wheel-picker-expo
or
npm install react-native-wheel-picker-expo
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)} />
);
}
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 |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT