SafeAreaView-wrapper를 사용한 반응형 모달(reactive modal)이 작동하지 않음

SafeAreaView-wrapper를 사용한 반응형 모달(reactive modal)이 작동하지 않음

우리는 Modal을 렌더링하는 FilterComponent가 있지만, 아이폰 X에서는 Header가 Statusbar에 있다.

SafeAreaView로 렌더링하려고 했는데 잘 안 되는 것 같아.

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

FilterModal이 iPhoneX에서 오픈엔드인 경우에도 상태 표시줄에 있고 아무 것도 클릭할 수 없다.

이걸 어떻게 풀지 생각나?

고마워요.

놓다SafeAreaView안쪽에Modal구성 요소

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

A Modal전체 화면을 채우기 때문에 내부 공간을 추가로 제공해야 한다.Modal. Modal의 부모에 적용되는 경우 Multal에는 마진 / 패딩이 적용되지 않는다.

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

참조URL: https://stackoverflow.com/questions/48538308/react-native-modal-with-safeareaview-wrapper-not-working