[React Native] 안드로이드 헤더 백버튼에 탭 아이콘 영역 잡히는 현상

어떤 에러?

이것은 사실 내가 발견하고 해결한 버그가 아니지만 오래 고생한 만큼 기록해 두기 위해.. 😇

리액트 네이티브 프로젝트 중 안드로이드에서만 발생하는 버그가 잡혔다.

뒤로 가기 버튼을 눌렀을 때 간헐적으로 다른 스택으로 가버리는 경우가 있었다.

스택을 reset을 이용해서 다시 쌓아주기도 했지만 별반 다를 것이 없었음.. 🤔

 

 

원인

스택 네비게이션에 탭 내비게이션의 아이콘 영역이 잡혀서 이 영역을 누르면 다른 스택으로 가는 것을 알게 됐다.

참고: 안드로이드 디버그 메뉴는 cmd + m으로 열 수 있다.

 

저게 무슨 영역인가 보니 하단 탭바를 구성하는 아이콘이었다.

특정 화면에서만 탭바를 보여주기 위해 보여줄 화면 이외에는 {display: "none"} 처리를 하고 있었는데,

뭔가 버그가 있던 것인지 적용되고 있지 않은 듯했다.

저 스크린 이외에도 다른 스크린들도 똑같이 영역이 잡히고 있었다.

 

 

해결

리액트 내비게이션 깃헙 이슈에 같은 이슈를 겪은 사람이 이미 있었다!..

탭 내비게이션의 `tabBarStyle`에 zIndex 설정을 해서 뒤로 가기 버튼 위치의 아이콘들을 버튼 아래로 조정한다.

https://github.com/react-navigation/react-navigation/issues/10598

tabBarStyle: {
          zIndex: -1,
...
}

 

그리고 거짓말처럼 해결되었다!.. 😇