네이티브 스플래시와 커스텀 스플래시를 함께 사용할 때 발생한 문제와 해결 방안

 

제목: 네이티브 스플래시와 커스텀 스플래시를 함께 사용할 때 발생한 문제와 해결 방안

---

문제점

React Native 앱에서 네이티브 스플래시 화면과 커스텀 스플래시 화면을 함께 사용하려고 했는데, 다음과 같은 문제가 발생했습니다:

1. 네이티브 스플래시 화면이 즉시 사라지지 않음:
   • 코드 상에서는 RNBootSplash.hide()를 호출하여 네이티브 스플래시 화면을 즉시 숨기도록 설정했지만, 실제로는 네이티브 스플래시 화면이 서버 초기화 작업이 끝난 후 사라졌습니다.
2. 커스텀 스플래시 화면이 너무 짧게 표시됨:
   • 네이티브 스플래시 화면이 사라지자마자, 커스텀 스플래시 화면이 0.5초 정도 표시된 후 바로 사라지는 문제가 발생했습니다.
3. 사용자 경험 저하:
   • 네이티브 스플래시 화면이 너무 오래 유지되고, 그 이후 커스텀 스플래시 화면이 너무 짧게 표시되어 화면 전환이 부자연스러웠습니다.

---

문제 원인 분석

1. RNBootSplash.hide()의 호출 지연:
   • 네이티브 스플래시 화면은 RNBootSplash.hide() 호출 시 숨겨지는데, 내부적으로 React Native의 UI 쓰레드가 초기화될 때까지 기다리기 때문에 바로 반응하지 않을 수 있습니다.
   • 또한, 초기화 코드(예: 서버 상태 확인, WebSocket 연결 등)가 메인 쓰레드를 차지하고 있을 경우 숨기기가 지연될 수 있습니다.
2. 커스텀 스플래시 화면과 상태 전환 충돌:
   • 커스텀 스플래시 화면(SplashScreen)은 네이티브 스플래시 화면과 독립적으로 작동해야 하는데, 현재 상태(isSplashFinished와 isAppReady)가 네이티브 스플래시 화면과 동기화되지 않아 두 화면이 충돌하고 있습니다.
3. 서버 로딩과 네이티브 스플래시의 연관성:
   • 서버 로딩 상태 확인 (setIsServerReady)가 완료되기 전까지 isAppReady가 true로 설정되지 않아, 네이티브 스플래시 화면이 이 시점까지 유지되고 있는 것으로 보입니다.