React-native-paper Menu is hiding behind other elements despite use of zIndex. How do i bring the element on top?

user_9304976 0
Viewed 1863

I am using the Menu component from react-native-paper for options menu on modal-header.

Below is the screenshot of the modal:

enter image description here

The parent tag holding the Menu has sibling elements (stuff below the header). It seems that due to this heirchy, the menu is being rendered under other elements. I tried override this overlaping of elements by assigning possition:"absolute", zIndex: 100. zIndex is haveing no effect on the way it is being overlaped. I tried varying the zIndex from 1 to 1500, but its had n effect either.

Following is the code for Menu Component wrapper (ModalOptions):

const ModalOptions = () => {
  const [visible, setVisible] = React.useState(false);
  const openMenu = () => setVisible(true);
  const closeMenu = () => setVisible(false);

  return (
    <Provider>
      <View>
        <Menu
          style={{ backgroundColor: "#222", borderWidth: 2, top:150, left:-100 , position: 'absolute', zIndex:100 }}
          visible={visible}
          onDismiss={closeMenu}
          anchor={
            <TouchableOpacity onPress={openMenu}>
              <ThreeDotIcon size={35} color={colors.darkGrey} />
            </TouchableOpacity>
          }>
          ...
        </Menu>
      </View>
    </Provider>
  );
};

I guess I'm not using zIndex properly... If so, how should I be using it instead?

If not, is there any other way to get this done?

or maybe I need to re format the code in such way that the heirchal level of Menu is increased but I would really not prefer going this way.

react-native-paper react-native reactjs css javascript
1 Answers

You can use a View to wrap outsize the provider with style={{zIndex: 100}}, like below

<View style={{zIndex: 100}}>
  <Provider>
      <View>
        <Menu
          style={{ backgroundColor: "#222", borderWidth: 2, top:150, left:-100 , position: 'absolute', zIndex:100 }}
          visible={visible}
          onDismiss={closeMenu}
          anchor={
            <TouchableOpacity onPress={openMenu}>
              <ThreeDotIcon size={35} color={colors.darkGrey} />
            </TouchableOpacity>
          }>
          ...
        </Menu>
      </View>
    </Provider>
</View>
user_59541750
Related