React Native Bottom Tab Navigation 터치 문제

문제점

  • 원래 작동이 이상이 없던 bottom tab navigation 이 갑자기 tab 터치가 안되거나 많이 delay 되는 현상 발생
  • 구체적으로, 상위의 stack screen으로 포함되어 있는 로그인/회원가입 페이지와 redux, AsyncStorage 토큰 저장 및 get 로직 구현 직후부터 문제 발생

현재 스크린 구조

  • Stack Navigator 아래 bottom Tab Navigation이 포함되어 있으며 각각의 Navigator 들은 여러개의 스크린을 포함하고 있음

개발환경 정보

System:
OS: macOS 11.2.3
CPU: (8) x64 Intel® Core™ i5-8259U CPU @ 2.30GHz
Memory: 67.54 MB / 8.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 15.13.0 - ~/.nvm/versions/node/v15.13.0/bin/node
Yarn: Not Found
npm: 7.19.1 - ~/Desktop/HitMeUp/node_modules/.bin/npm
Watchman: 2021.06.07.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
Android SDK:
API Levels: 28, 29, 30
Build Tools: 29.0.2, 30.0.3
System Images: android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.7042882
Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_292 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.1 => 0.64.1
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

질문

  • 시뮬레이터에서 테스트해본 결과, 문제없이 터치되는데, 실제 디바이스에서만 delay되거나 터치가 안되는 현상이 있네요…
  • 혹시 비슷한 문제를 경험하시거나 문제 원인을 알고 계신 분 있을까요?

감사합니다.

실제 디바이스에서 릴리즈 모드인데 발생하시는건가요?
개발 모드와 릴리즈 모드 각각 어떤지도 알려주시면 다른 분들이 답변하실 때 좋을 것 같습니다.

좋아요 1

개발 모드입니다. 그런데 얼마전에 별다른 수정하지 않았는데도 갑자기 또 작동을 하네요 ㅜ… 댓글 감사합니다.

최근 리액트 네이티브 (0.63 전후)에서 디바이스 개발 모드 안드로이드에서 탭바의 터치가 되지 않던 버그가 발생하는 경우가 있던걸로 기억합니다.
개선될 거라 생각하여 해결법을 찾지는 않았네요… 아이폰은 잘되고 안드로이드만 발생했었어요.

좋아요 1

아 그렇군요~ 감사합니다. 몰랐던 내용이네요 :+1: