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

Question

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

Answer 1

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>