한지 - 한조각 쓸모있는 지식 레터

개발중

안드로이드에서 Modal을 닫을때

순간적으로 깜빡이는 이슈가

별견되었다.

github. Issue에

많은 솔루션들이 있었지만

나는 아래의 방법을 적용하니

깔끔하게 해결되었다.

return (
  <Modal 
    style={Style}
    isVisible={visible} 
    animationIn={InEffect}
    animationOut={OutEffect}
    backdropOpacity={Opacity}
    backdropTransitionOutTiming={0} <-- 여기
  >
    <ModalContainer>{Viewer}</ModalContainer>
  </Modal>
);

참고링크:

https://github.com/react-native-modal/react-native-modal/issues/268

추가로 이런 이슈도 있었다.

대부분의 modal라이브러리가 그렇듯

react-naive-modal에도 visible 프로퍼티가 존재한다.

반드시 modal의 노출 여부는

이 visible로만 핸들링 해야한다.

아래와 같은 코드에서는 비정상적인 움직임을 보여준다.

// 올바른 사례
const [show, setShow] = useState(false);

<Modal
  visible={show}
>
</Modal>



// 잘못된 사례
const [show, setShow] = useState(false);
{
  !!show &&
  <Modal
    visible={show}
  >
  </Modal> 
}

어떤 이유에선가 아래와 같이 작업할지도 모른다.

그렇게하면 on/off는 컨트롤 할 수 있겠지만

비정상적인 애니메이션을 보게 될것이다.

앱 배포를 눈앞에 두고 디테일을 잡는중

앱 실행되고 처음 새 화면으로 이동할때

순간적으로 하얗게 화면이 깜빡이는것이 목격됐다.

react의 Painting작업중 이슈가 생긴듯하다.

어떻게 처리할까 고민하다가

약간의 꼼수로 하얗게 깜빡이는 이슈를

잠재우기로했다.

// app.js

<NavigationContainer theme={{ colors: { background: '#000000' } }}>
 ...
</NavigationContainer>

Navigation의 기본 배경색을 전환될 화면의 배경색과 통일해 줌으로써

하얗게 되는 이슈를 해결했다. (?)

transtion 효과를 쓰다보면 의도치 않게

주변 컴포넌트가 깜박이게되는 현상을 맞이할때가 있다.

transition을 먹여둔 컴포넌트에 아래의 css 한줄만 추가하면 이 문제를 해결할 수 있다.

-webkit-backface-visibility: hidden;