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

Below is the screenshot of the modal:

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.

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

Below is the screenshot of the modal:

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.

• javascript
• css
• reactjs
• react-native
• react-native-paper

• Hi Suraj, Did you find a solution for this? – Hend El-Sahli Commented Aug 16, 2022 at 15:03
• @HendEl-Sahli Yes, 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 Commented Aug 17, 2022 at 6:55
• 1 Ahaa, I'ill give it a try, I appreciate you got tback to me – Hend El-Sahli Commented Aug 17, 2022 at 6:57

3 Answers 3

Change the menu style. I think it will work.

<View style={{zIndex: 100}}>
  <Provider>
      <View>
        <Menu
          style={{
    top: hp(35),
    left: -130,
    position: "absolute",
    zIndex: 100,
    width: wp(150),
    justifyContent: "flex-end",
    // backgroundColor: "#222",
  }}
          visible={visible}
          onDismiss={closeMenu}
          anchor={
             <TouchableOpacity onPress={openMenu}>
                <GenericIcon
                  name={"dots-vertical"}
                  style={{
                    fontSize: 24,
                    color: "black",
                  }}
                  isMaterialCommunityIcons={true}
                />
              </TouchableOpacity>
          }>
           <Menu.Item
              style={styles.menuItem}
              onPress={confirmAppointmentComplete}
              title='Completar cita'
            />
        </Menu>
      </View>
    </Provider>
</View>

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>

i found only react-native-material-menu package that is working in every case in android and IOS