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