Search bar is not responsive if the dropdown is on top

TL;DR Here’s an image.

Bug description: The dropdown is below other views (they display on top of it). If I try to add an elevation to the dropdown style, the view looks good however the search doesn’t display the keyboard when pressed. zIndex has no effect (maybe I used it wrong).

Here’s the code: App.js:

return (
    <SafeAreaView>
      <MyDropView />
      <AdComponent />
      <OtherComponent />
    </SafeAreaView>
  );

MyDropView.js:

return (
    <View style={{flexDirection: 'row'}}>
      <DropDownPicker
        searchable={true}
        searchablePlaceholder="Search..."
        searchableError={() => 'Not found'}
        ...
        containerStyle={{height: 40, width: '100%'}}
        dropDownStyle={{ elevation: 1 }} // The dropdown is on top, but search in unresponsive
      />
    </View>
  );

Expected behavior The dropdown is displayed on top of all view and the search feature works.

Info:

• OS: [Android]
• Package version [28]

[hossein-zare]

No, Try to get rid of the warning by fixing the issue. I believe it’s a zIndex conflict or nested views problem.

[usersina]

I’ve wrapped the dropdown picker and the below components under a ScrollView and it’s working. However I’m getting the following VirtualizedLists warning. Should I simply ignore it ?

Anyway, the issue shouldn’t even happen on android from what I’ve seen. Do you have an idea to what might be causing it ?