React Native - Positioned absolute view is behind other components of the screen

user_10480841 0
Viewed 730

guys.

So, I'm trying to make a simple Select Dropdown Menu with React Native. I've another code that works as well, but the problem is within the Position absolute. I've tried a lot of times but no success.

The problem:

The absolute View is behind others components of screen.

Expected behavior:

The absolute view above all components

Can someone help me?

This is my snack representation of this problem.

https://snack.expo.dev/@ellyssonmiike/shallow-croissant

Thank you all

react-native reactjs absolute android
2 Answers

you need just a little re-arrangement for your stylesheet as follows:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    zIndex: 10
  },
  dropdownContainer: {
    position: 'absolute',
    top: Constants.statusBarHeight,
    zIndex:10,
    backgroundColor: '#ccc',
    width: '100%',
    elevation: 10,
  },
  dropdownMenu: {
    flex:1
  }
});

You can also remove {{top: height}} for Item style. I don't see any need for it.

user_48665930

You can use react-native-portalize library for this problem. Portalize basically renders the content of Portal in Host component.

Here is the snack with the Portalize implementation: https://snack.expo.dev/@truetiem/shallow-croissant

First you need to install react-native-portalize:

yarn add react-native-portalize

Then wrap your app with Host component:

import {Host} from 'react-native-portalize';

<Host>
  // your app content
</Host>

And wrap your dropdown list with Portal component:

import {Portal} from 'react-native-portalize';

<Portal>
  <View style={[styles.dropdownMenu, { top: height }]}>
    // your dropdown content
  </View>
</Portal>
user_57931320
Related