How to make the <View> after dropdown not visible?

[guffgaff]

The next View component after the dropdown-picker is used is visible. If we exclude the and just use the component. The component is hidden. However, if we use inside the component is not hidden.

I tried using zIndex but didn't work. Maybe because I didn't use it in the right place. I also tried using different background color but that too didn't work.

Here is the expo link too. https://snack.expo.dev/5-GpW2eEU8

If I add zIndex to that code, it works fine on snack and even the uploaded code from there work well in my device. However, the same code on my local machine does not work. Is it because of the react native version?

My package.json file is:

  "name": "Test",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "^47.0.0",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "react-native-dropdown-picker": "^5.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3"
  },
  "private": true
}

Interestingly, it works fine with dropDownDirection='TOP'

Also, when I tried using element Inspector from expo. The <View> after dropdown disappears.

[guffgaff]

@mikehardy can you please help me with this or point to anything that might be helpful?

[alena424]

same issue

[comur]

same issue

[dannybit]

Same issue

[mariolukec]

Same issue, any update on this? @guffgaff

[mariolukec]

workaround is here: https://github.com/hossein-zare/react-native-dropdown-picker/issues/667

[firasrg]

same issue, but got it working this way:

1. create a custom component and call DropdownPicker inside of it

   const  MyDropDown = (props) => (
   <DropDownPicker  
   // props.. 
   />
   )

2. call the custom component like this

   const  App = (props) => (
   <View style={{zIndex: 1}} >
   <MyDropDown 
     // props..
   />
   </View>
   )