react native navigation 이동 시 모달 숨김

이번 프로젝트를 하면서 구현이 힘들었던 부분을 다른 분들과 함께 공유하면 좋을 것 같아 남겨놓는다.

 

A 화면과 B화면이 있다고 할때,

A화면에서 modal을 띄운 후 B화면으로 이동하게 되면
A화면에 있던 modal이 그대로 B화면에도 남게 된다

 

나는 B화면으로 이동할때 modal을 끄고 다시 A화면으로 오면 modal이 켜진 상태를 구현하고 싶었다.

그래서 하루 정도 이 문제에 대해서 머리를 싸매다가 react-navigation/native에 useIsFocused를 사용하면 현재 페이지에 포커스 되어있는지 확인할 수 있다.

이걸 And 연산자를 통해 만약 modal이 켜져있고 현재화면에 focus가 되어있다면 모달을 보여주게 만들었다.

 

코드 예시

import { useIsFocused } from '@react-navigation/native';

import React, { useState } from 'react';

 

const screenIsFocused = useIsFocused();

const [accompanyModalIsVisible, setAccompanyModalIsVisible] = useState(false);

...

<Modal

isVisible={screenIsFocused && accompanyModalIsVisible} >

...