[React Native] React Native modal 배경 클릭해서 Modal 닫기

react native에서 modal을 띄워놓았을 때 모달 이외의 배경을 클릭해서 modal 창을 닫고 싶으신 상황이 있으실 겁니다.

이런 상황을 저는 다음과 같이 해결했습니다.

 

<Modal
  visible={isVisible}
  onRequestClose={() => setIsVisible(false)}
  transparent={true}
 >
  <Pressable style={{
      flex:1,
      backgroundColor:'transparent',

  }}
  onPress={()=>setIsVisible(false)}
  />
  {/* 여기에 띄우고 싶으신 창 코드를 입력하시면 됩니다. */}
</Modal>

이 때 창 코드를 입력하는 부분에 position:absolute 속성을 줘야 합니다.

Pressable 태그가 배경을 담당하는 부분인데 Pressable이 전체 화면을 덮도록 하기 위함입니다. 

 

아래는 스택오버플러우 질문에 제가 답변을 단 부분입니다.

https://stackoverflow.com/a/68570195/15458307

Close react native modal by clicking on overlay?