[React-Native][Error] 앱 흰색화면 에러 (앱 실행이 안됨)

최근에 React-Native에서 HotFix로 인하여 react-native 라이브러리를 업데이트하는 과정에서 생긴 오류입니다.

 

react-native 0.66.1 -> 0.67.5 버전으로 올렸습니다. (react-native hotfix 된 버전으로 바꿈)

그리고 android에서 빌드를 하니까 react-native-reanimated 라이브러리 버전에 관련된 오류가 발생했습니다.

 

android 빌드했을 경우 생긴 오류

위의 에러를 고칠려면 react-native-reanimated 버전을 올려야 했습니다.

현재는 2.2.3 을 사용하고 있으나 최소 2.3.X 버전으로 올려야 위의 오류가 수정이 되었습니다.

 

하지만

 

에러

디버그 모드로 앱을 실행을 하니까 그냥 하얀색 화면만 나오고 에러코드도 나오지 않는 현상

 

원인

현재 프로젝트 라이브러리 스펙

"react-native": "^0.67.5",
"react-native-reanimated": "^2.10.0",
"react-navigation": "4.4.4",  // navigation v4 
"react-navigation-stack": "2.10.2", // navigation v4 
"react-navigation-tabs": "2.10.1", // navigation v4

 

위의 스펙을 보시면 react-native 0.67.X 버전부터는 android에서 react-native-reanimated 2.3.X 버전 이상으로 올려줘야 에러가 발생하지 않았습니다. 그러나 앱이 실행이 되었을 때 하얀색 화면만 나오고 실행이 되지 않는 현상이 발생했습니다.

그 원인은 navigation 버전과 react-native-reanimated 충돌에 의한 앱 멈춤 현상이었습니다.

 

해결 방법

첫 번째 해결방법은 navigation 버전을 v4 -> v6로 업데이트하는 방법입니다.

두 번째 해결방법은 react-native-reanimated 버전을 2.2.3으로 낮추는 방법입니다.

하지만 두 번째 방법을 사용을 하면 react-native와의 버전 문제로 android 빌드 에러가 발생합니다.

그래서 두 번째 방법을 사용하면 react-native 버전을 0.66.5 버전으로 같이 낮춰줘야 합니다.

 

최종 프로젝트 라이브러리 스펙

"react-native": "^0.66.5",
"react-native-reanimated": "^2.2.3",
"react-navigation": "4.4.4",  // navigation v4 
"react-navigation-stack": "2.10.2", // navigation v4 
"react-navigation-tabs": "2.10.1", // navigation v4

 

참고

https://honeystorage.tistory.com/281

react-native-reanimated 에러 모음

https://github.com/software-mansion/react-native-reanimated/issues/1875

Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin? · Issue #1875 · software-mansion/r