react-native Modal with SafeAreaView-wrapper not working

Question

We have a FilterComponent which renders a Modal, but on iPhone X it's Header is in the Statusbar.

I tried to render it with SafeAreaView but seems like this is not working:

return (
  <SafeAreaView>
    <Modal
      { ...defaultModalProps }
      onRequestClose={ close }
      style={ styles.container }
      visible={ visible }
    >
      <ModalNavbar close={ close }>
        Filter
      </ModalNavbar>
      <View style={ styles.content }>
        ...
      </View>
    </Modal>
  </SafeAreaView>
);

When FilterModal is openend on iPhoneX it still is in the Statusbar and you cant click on anything.

Any idea how to solve this?

thanks.

Typescript

Answer 1

Put SafeAreaView inside the Modal component

return (
  <Modal
    {...defaultModalProps}
    onRequestClose={close}
    style={styles.container}
    visible={visible}
  >
    <SafeAreaView style={{ flex: 1, backgroundColor: "transparent" }}>
      <ModalNavbar close={close}>Filter</ModalNavbar>
      <View style={styles.content}>...</View>
    </SafeAreaView>
  </Modal>
);

Parulis

This fixed my issue but I am confused why. Wouldn't it make more sense to have the modal inside the SafeAreaView? – Malley

@Malley no, a Modal view will cover the entire screen. It is in no way bound by the size of its caller (parent) – Advertisement

looks like StatusBar will not be visible if backgroundColor is not transparent. Am I right? – Brahmaputra

@Advertisement , thank you for that explanation. I was so confused onto why the modal was expanding past the safe area. – Cheongsam

Answer 2

if you use react-native-safe-area-context and you have a problem with modal then

      <Modal>
        <SafeAreaProvider>
          <SafeAreaView>
            
             // your modal content

          </SafeAreaView>
        </SafeAreaProvider>
      </Modal>

Slack

Thanks! This was the issue for me! – Marguerite

Answer 3

A Modal fill the entire screen, so you need to provide extra spacing inside the Modal. Margin / Padding will not effect on Modal if applied on parent of Modal.

<Modal {...}>
  <TouchableWithoutFeedback onPress={closeModal}>
    <SafeAreaView {...}>
      {...}
    </SafeAreaView>
  </TouchableWithoutFeedback>
</Modal>

Parasitic