CODEWITHSUNDEEP
javascriptreactjsreact-nativedropdown
Anamika Singh
Anamika Singh

Reputation: 151

dropdownpicker is hiding behind the Flat List

I have two dropdown picker, these two are dependent on each other and I'm facing two issues: first: my dropdown is hiding behind the flat list. second: if I click on one drop down second drop down should show the result but it shows result when I click on first dropdown twice. Here is the snack link: https://snack.expo.dev/@anamika1593/carlist

Upvotes: 0

Views: 1718

Answers (3)

Anamika Singh
Anamika Singh

Reputation: 151

I resolved first issue by using ListHeaderComponentStyle={{ zIndex: 100000 }} still figuring out the second one

Upvotes: 0

khokanuzzaman khokan
khokanuzzaman khokan

Reputation: 78

user this property zIndex={1000}

<DropDownPicker zIndex={1000} ... />

Upvotes: 0

Max Cheung
Max Cheung

Reputation: 31

I am facing similar issues last week if you are also using the react-native-dropdown-picker library.

There are two options(Both are the props of < DropDownPicker />):

  1. dropDownDirection
  2. zIndex

set dropDownDirection will force the open menu direction to the top but it should not be the best choice.

dropDownDirection="top"

setting zIndex to a bigger value will force the dropdown to appear on the top of the component and should be solve the issues.

containerStyle={{zIndex: 99}}

Upvotes: 1

Related Questions