Modal Interactive Modified with SafeAreaView Protected Shell not working

Question

We have a FilterComponent that displays Modal, but on the iPhone X Header is in the Statusbar.

I tried displaying it using SafeAreaView, but it doesn't seem to work:

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 open on iPhoneX, it is still in the status bar and you cannot click on anything.

Any idea how to solve this?

thank.

Answer 1

Put a safe in the form of a modal tag

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>
);

Answer 2

A Modalfill the entire screen, so you need to provide an extra interval inside Modal. Margin / Padding does not affect Modal if applied to Modal parents.

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