Expo SDK 47 빌드시 흰색 화면만 뜨는 이슈

(Korean version)

Expo SDK 47 빌드시 흰색 화면만 뜨는 이슈

Expo 를 업그레이드해서 SDK 47 버전까지 올려서 빌드를 했더니 흰색 화면만 떴다. SDK 47 버전부터는 eas build 를 사용해야한다. 아래는 문제를 해결할 때까지 적용했던 히스토리이다. 마지막에 갑자기 빌드된 apk 가 정상동작하였는데, 마지막 변경 사항 때문에 정상 동작한 것인지 확신하기 어려웠기 때문에 적용한 모든 방법을 적어둔다. + 참고로 Expo 어플을 활용하기 위해 "npx expo-cli start --tunnel" 명령어를 쳐서 QR 코드로 동작시키는 것은 잘 동작하였다.

 

개발 환경:

- 구름 온라인 IDE 가상환경 (expo start 동작을 위해서는 포트포워딩 설정 등이 필요했다)

- Target Platform: Android (apk or app-bundle)

- Expo 47.0.0

- node v16.19.0

- react 18.1.0
- react-native 0.70.5

- 사용한 빌드 명령어: eas build -p android => 최종 성공시에는 eas build -p andrioid --profile production

 

적용 방법:

1. Expo SDK 46 으로 다운그레이드 해봤으나 -> 효과가 없어서 다시 SDK 47 버전으로 변경하였다.
2. eas build -p android --clear-cache 로 캐시 제거 옵션을 추가해보았으나 효과 없어서 이후에는 붙이지 않았다.
https://github.com/expo/eas-cli/issues/1017
3. expo-cli 와 eas-cli 를 다시 --global 옵션을 붙여서 npm install 하였다. (global 로 설치해야한다는 말과 최신으로 업그레이드해야한다는 말이 있었다.)
https://github.com/expo/expo/issues/18620
4. eas.json 에서 cli 부분 제거하였다.

https://github.com/expo/expo/issues/18620

{
	// delete this!!!
  "cli": {
    "version": ">= 0.60.0"
  },

5.  eas build -p andrioid --profile production 로 profile 까지 지정해서 빌드하였다.
https://stackoverflow.com/questions/72204856/how-to-build-expo-apk-using-eas-build
6. package.json 에서 ^나 ~를 모두 제거하였다.
https://github.com/expo/eas-cli/issues/1036
7. package-lock.json 제거했다가 패키지 에러가 나서 에러난 패키지 (react-native-gesture-handler) 다시 설치하면서 --save 옵션을 붙여서 npm install 했다. package-lock.json 가 자동으로 다시 생성되었다.
https://stackoverflow.com/questions/55358811/error-unable-to-resolve-module-react-native-gesture-handler

=> 여기까지 진행하고 빌드했더니 흰색 화면이 더이상 뜨지 않고 앱이 정상적으로 동작하였다.

 

(English version)

How to handle white screen issue with expo sdk 47 build

After upgrading Expo SDK 47, only white screen is shown after build apk or app-bundle. From SDK 47, I had to use eas build. The methods that I applied to solve this problem are as follows. After applying all the methods, suddenly the problem was solved. However, I cannot sure whether only the last method was effective, thus I left all the methods applied. + Additionally, using QR code in expo application with command "npx expo-cli start --tunnel" worked well. Only eas build result had the problem.

 

Environment:

- Goorm online IDE environment (Port forwarding setting is needed for expo start)

- Target Platform: Android (apk or app-bundle)

- Expo 47.0.0

- node v16.19.0

- react 18.1.0
- react-native 0.70.5

- Build command: eas build -p android => Final command (success): eas build -p andrioid --profile production

 

History:

1. Downgrading to Expo SDK 46 was no effect. Upgrading to SDK 47 again.
2. "eas build -p android --clear-cache" was not effective.
https://github.com/expo/eas-cli/issues/1017
3. "npm install expo-cli --global" and "npm install eas-cli --global" for upgrading them and installing globally.
https://github.com/expo/expo/issues/18620
4. remove cli from eas.json

https://github.com/expo/expo/issues/18620

{
	// delete this!!!
  "cli": {
    "version": ">= 0.60.0"
  },

5. "eas build -p andrioid --profile production" for build command
https://stackoverflow.com/questions/72204856/how-to-build-expo-apk-using-eas-build
6. remove "^" or "~" from package.json
https://github.com/expo/eas-cli/issues/1036
7. building after removing package-lock.json due to react-native-gesture-handler package. By installing the package with save option, "npm install react-native-gesture-handler --save", package-lock.json file was created again.
https://stackoverflow.com/questions/55358811/error-unable-to-resolve-module-react-native-gesture-handler

=> At this moment, the problem was solved!