Dukjjang

react-native-modal에서 바깥 영역 터치 시 모달 깜빡임

react-native-modal에서 바깥 영역 터치 시 모달 깜빡임

dukjjang

dukjjang •

2023년 9월 16일

react-native-modal에서 모달 깜빡임

앱을 개발하다 보면 모달을 사용하는 것은 매우 흔한 일이다. 오늘은 react-native-modal 라이브러리를 사용하면서 발생한 모달의 깜빡임 문제와 그 해결 과정을 기록한다.

라이브러리를 통해 모달을 구현하고, 모달 바깥 영역을 터치했을때 모달이 사라지도록 하기 위해서, 나는 customBackDrop 속성을 사용해서 기능을 구현했다. 

<Modal
        customBackdrop={
          <TouchableWithoutFeedback onPress={dismissModalHandler}>
            <View style={{flex: 1, backgroundColor: '#888'}} />
          </TouchableWithoutFeedback>
}
...
>
...
</Modal>

그런데 화면이 깜빡하면서 하얘졌다 다시 이전처럼 어둡게 처리가 되면서 깜빡이는 버그가 발생했다. 나는 처음에는 이 문제가 리랜더링 관련된 것이라고 생각했다. 그래서 useCallback과 useMemo를 활용하여 리랜더링 문제를 디버깅해봤다. 하지만 그 방법으로는 큰 효과를 볼 수 없었다. 추가로, useEffect와 setState를 사용하여 디버깅도 시도해봤는데, 이 또한 소용이 없었다.

결국, react-native-modal의 문서를 꼼꼼히 살펴보다 BackdropTransitionOutTiming이라는 속성을 발견하게 되었다. 이 속성의 값을 0으로 설정해보기로 했다.

<Modal
    backdropTransitionOutTiming={0}

그 결과 문제는 성공적으로 해결되었다. 이 경험을 통해, 문제에 직면했을 때 해결 방법을 찾기 위한 다양한 접근 방법이 필요하다는 것을 다시 한번 깨달았다. 그리고 문제가 발생했을 때 공식 문서를 꼼꼼히 살펴보는 것의 중요성을 느꼈다.

prev
next