4

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.

Suraj Ingle
  • 372
  • 4
  • 18

1 Answers1

1

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>
Leo N
  • 126
  • 2
  • 5
  • turns out that the problem is with using zIndex. zIndex works as its supposed to on IOS. however to achieve the same effect in Android we need to increase the value of elevation instead of zIndex. – Suraj Ingle Apr 01 '21 at 10:24