Popup menu not work with react-native-modal

[huylv-teko]

Hi, when i put the menu trigger inside a Modal (from react-native-modal), the menu options always show behinds the modal.
If i wrap the modal content with the <MenuProvider> (line 70 in image below), the modal won't show anymore.

Here is the example in snack https://snack.expo.io/@huylv177/menupopup-modal

[sodik82]

Hi there,

I just moved MenuProvider to the "top" of the Modal and played a bit with styles and seems to work fine.

          <Modal
            onSwipeComplete={this.onClose}
            onBackdropPress={this.onClose}
            isVisible={this.state.modalVisible}
            style={styles.bottom}
            swipeDirection="down">
            <MenuProvider skipInstanceCheck style={styles.menuProvider}>
              <View style={{ backgroundColor: 'white' }}>
                {this.renderModalContent()}
              </View>
            </MenuProvider>
          </Modal>

Full example: https://snack.expo.io/@sodik82/menupopup-modal

[huylv-teko]

Yeah it works like a charm :D but why the menu provider make the children's style wrong. I think there are something wrong in MenuProvider.
Btw do not remove the example above, i think many one maybe need too

[sodik82]

Menu provider has flex:1 style to cover whole screen (e.g. in order to render backdrop) It looks like Modal has its own styles as well and you need to match them all together (e.g. I have removed styles from styles.bottom ).

[dmytro-kosiakov-brickred]

The solution with an explanation is here #162 (comment)