Skip to content

mksquad87/react-native-wheel-picker-expo

 
 

Repository files navigation

react-native-wheel-picker-expo

npm npm npm type definitions

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

About

React Native wheel picker like iOS

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 79.8%
  • JavaScript 20.2%