Search bar is not responsive if the dropdown is on top

[usersina]

Search bar is not responsive if the dropdown is on top

[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.

[hossein-zare]

Hello,
Does it happen without elevation?

Try this:

import { Platform } from 'react-native';
 
<View style={{
    flexDirection: 'row',

    ...(Platform.OS !== 'android' && {
        zIndex: 10
     })

}}>
      <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>

[usersina]

Without elevation, the dropdown is behind everything else in the view.
With elevation, the dropdown is on top of everything else but the click detection is still behind everything else.
If it's not clear, I'll try to demonstrate it using a gif

[hossein-zare]

Try the suggested code without elevation

[usersina]

Already did, here are the current results:
With the suggested code: without_elevation
With elevation (with or without zIndex): with_elevation
Clickable area: Image
Clickable area: Gif

Here's a stackoverflow link with better explanation.

[hossein-zare]

I created a snack which is working fine.
https://snack.expo.io/@hossein-zare/d38de5

You can edit the code and reproduce the unexpected behavior then send your snack to me.

[usersina]

Couldn't replicate the error.
However -oddly enough- when I toggle the inspector on and off, the dropdown behaves normally

[hossein-zare]

Unfortunately i can't help you without having an exact and static behavior.
The elevation property is not a solution and must be avoided.
Check the other components if they have any zIndex.

[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 ?