CODEWITHSUNDEEP
react-nativereact-native-ios
Hobey823
Hobey823

Reputation: 272

React-Native Picker is not dropdown

I'm trying to make a dropdown select box. I'm using react-native's Picker.

I'm using the following code:

<Picker mode={"dropdown"} selectedValue={"test2"} style={{height: 50, width: 125}}>
  <Picker.Item label="test" value="test"/>
  <Picker.Item label="test2" value="test2"/>
  <Picker.Item label="test3" value="test3"/>
  <Picker.Item label="test4" value="test4"/>
</Picker>

The Picker still appears to not be a dropdown. I'm using a IPhone X on the simulator.

Upvotes: 0

Views: 3956

Answers (3)

ASMCoder
ASMCoder

Reputation: 53

For anyone still facing this issue here is the best solution that works for both IOS and Android : https://github.com/hoaphantn7604/react-native-element-dropdown

import { Dropdown } from "react-native-element-dropdown";

I tried so many package but this is by far the best one and it's so customizable and easy to use. i wish i found this early when i started working on my project. Thank me later.

Upvotes: 0

Hobey823
Hobey823

Reputation: 272

I found out that mode only applies to Android. https://www.npmjs.com/package/react-native-picker-select did the job.

Upvotes: 0

azundo
azundo

Reputation: 6052

The mode props is only supported on Android. From the docs:

mode

On Android, specifies how to display the selection items when the user taps on the picker:

  • 'dialog': Show a modal dialog. This is the default.

  • 'dropdown': Shows a dropdown anchored to the picker view

https://facebook.github.io/react-native/docs/picker#mode

Upvotes: 2

Related Questions