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
CodePudding user response:
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>
CodePudding user response:
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.