react-nativereact-native-iosiphone-x

react-native Modal with SafeAreaView-wrapper not working


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.


Solution

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