0

The next View component after the dropdown-picker is used is visible. If we exclude the <View> and just use the <Text> component. The <Text> component is hidden. However, if we use <Text> inside <View> 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 in 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, the <View> after dropdown gets hidden.

Mynameiswha
  • 51
  • 5
  • You could use whether or not the picker is opened as a condition as of whether the component below it is visible. I was having the same issue and opted for using a modal instead – PhantomSpooks Feb 07 '23 at 02:19
  • Ok, thank you. I will try that and let you know. You may also post your solution. – Mynameiswha Feb 07 '23 at 02:40

1 Answers1

0

return someCondition ? ComponentForTruthyCase : ComponentFalseyCase

Shah
  • 2,126
  • 1
  • 16
  • 21
  • I didn't understand it. Can you please explain in more detail? – Mynameiswha Feb 07 '23 at 01:46
  • Render the component you need based on your condition, look into conditionally rendering React components – Shah Feb 07 '23 at 04:06
  • The contains the Flatlist; if I hide the component while the dropdown is open, it is not user-friendly. Should I really use conditional rendering even when I need that component to render every time? – Mynameiswha Feb 07 '23 at 04:27
  • {open && } – Shah Feb 07 '23 at 07:14
  • What if the text element is longer than the dropdown menu. It seems odd to make those Texts disappear and appear. Just want those dropdown to appear above the ``. zIndex doesn't seem to work. – Mynameiswha Feb 07 '23 at 14:52
  • Try a huge zIndex like 99999 – Shah Feb 07 '23 at 16:09
  • Tried that. Show Element Inspector seems to render some view, which seems to initialize the zIndex. Do you have any way to trigger the rendering? I am planning to render the whole container although I have read somewhere that one shouldn't use render manually. – Mynameiswha Feb 07 '23 at 16:51
  • 1
    So you are saying that doing [this](https://snack.expo.dev/ynFqvRRT-) doesnt work on your local emulator? – PhantomSpooks Feb 07 '23 at 17:45
  • Yes, not exactly those zIndex values but with dropdown zIndex value greater than next div value. However, when I use Show Element Inspector in Expo, the view refreshes and fixes itself. As if at first zIndex was not implemented. By default also, I think they assign zIndex of Dropdown to 5000 or something like. – Mynameiswha Feb 08 '23 at 01:14
  • You may be missing a useEffect() hook if you’re missing a render. – Shah Feb 08 '23 at 01:50