[React-Native] ios Modal onBackdropPress 이슈

Modal 컴포넌트란 기기에서 view를 팝업형태로 보여줄 수 있는 컴포넌트를 말합니다.

Modal 라이브러리 링크: https://www.npmjs.com/package/react-native-modal

Modal 컴포넌트를 닫는 기능중에 onBackButtonPress 프로퍼티와 onBackdropPress 프로퍼티를 사용하여 view를 닫을 수 있습니다.
저 같은 경우는 back 버튼이 존재하는 Android 실제 기기 같은 경우, back 버튼을 눌렀을시 Modal 컴포넌트를 닫기 위해 onBackButtonPress 프로퍼티와 Modal 컴포넌트를 제외한 screen의 다른 부분을 터치할 시 Modal 컴포넌트를 닫기 위해 onBackdropPress 프로퍼티를 사용했습니다.

1. onBackButtonPress: 안드로이드 Back 버튼이 눌렸을 때 호출
2. onBackdropPress: Background(배경)이 눌렸을 때 호출

onBackdropPress 프로퍼티를 사용해서 테스트 해보았을 때 emulator 같은 경우, Modal 컴포넌트를 제외한 screen의 다른 부분을 터치할 시 정상적으로 닫혔으나 simulator 같은 경우, Modal 컴포넌트를 제외한 screen의 다른 부분을 터치할 시 Modal 컴포넌트 기준 위,아래 부분은 터치할 시 닫혀지지 않았으며, Modal 컴포넌트의 양 옆 부분만 터치할 시 닫혔습니다.

해당 이슈에 대해 해결하기 위해 구글링을 해봤을 때, 저와 같은 증상을 겪은 분이 github 에 이슈를 올렸습니다.

이슈 링크: https://github.com/react-native-modal/react-native-modal/issues/434

해결 방법으로는 Modal 컴포넌트를 감싸는 컴포넌트인 View 컴포넌트에 style로 flex: 1 을 주는게 아니라 직접적으로 Modal 컴포넌트의 style로 flex: 1 을 부여하면 정상적으로 Modal 컴포넌트를 닫히는 걸 확인할 수 있었습니다 😊!

이슈 해결 링크: https://github.com/react-native-modal/react-native-modal/issues/434#issuecomment-632742129

// Modal

<View>
  <Modal
    className="flex-1" // <-- Modal 컴포넌트 자체 style
    animationIn={'slideInUp'}
    animationOut={'slideOutDown'}
    isVisible={visibleCalendar}
    onBackButtonPress={() => setVisibleCalendar(false)}
    onBackdropPress={() => setVisibleCalendar(false)}>
    <CalendarSelect
      onClose={() => setVisibleCalendar(false)}
      dateChange={handleDateChange}
      />
  </Modal>
</View>