react-native-wheel-picker-expo

React Native wheel picker like iOS without ejected Expo/CRNA

Demo with Expo

Installation

expo install react-native-wheel-picker-expo

or

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 |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT