expo sdk 52로 업그레이드 (react native 0.76 적용)

react native cli 대비 expo를 쓰면 여러가지로 편해진다.
대표적인게 react native 버전업을 할때인데 이번 expo sdk 52에선 new architecture를 비롯하여 변경점이 많지만 큰 어려움 없이 버전업을 하여 그 기록을 공유하려고한다.

먼저 아래의 세 문서를 참고해서 진행하였다. 엑스포는 문서 정리가 참 잘되어있어서 좋은것 같다.

• https://docs.expo.dev/guides/new-architecture/
• https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/
• https://expo.dev/changelog/2024/11-12-sdk-52

프로젝트 디렉토리에서 아래의 명령어를 입력하면 사용하는 expo관련 패키지들의 버전을 올려준다.

npx expo install expo@latest --fix

 

그리고 new architecture를 활성화 시키기 위해 app.json에서 "newArchEnabled":true, 를 추가한다.

{
  "expo": {
    ...
    "userInterfaceStyle": "automatic",
    "newArchEnabled": true, // 이 부분을 추가하여 새로운 아키텍처를 사용한다.
    "splash": {
      "image": "./assets/images/splash.png",

 

그 뒤 아래의 expo-doctor 명령어를 입력해주면 고쳐야하는게 무엇인지 알려주는데 나는 아래와 같은 결과가 나왔다.

npx expo-doctor@latest

✔ Check package.json for common issues
✔ Check Expo config for common issues
✔ Check for common project setup issues
✔ Check dependencies for packages that should not be installed directly
✔ Check for issues with Metro config
✖ Check for app config fields that may not be synced in a non-CNG project
Unexpected error while running 'Check for app config fields that may not be synced in a non-CNG project' check:
Error: git rev-parse --show-toplevel exited with non-zero code: 69
✖ Check if the project meets version requirements for submission to app stores
Unexpected error while running 'Check if the project meets version requirements for submission to app stores' check:
Error: git rev-parse --show-toplevel exited with non-zero code: 69
✖ Validate packages against React Native Directory package metadata
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check npm/ yarn versions
✖ Check that packages match versions required by installed Expo SDK
✔ Check for legacy global CLI installed locally
✖ Check native tooling versions
✔ Check that native modules use compatible support package versions for installed Expo SDK
✔ Check that native modules do not use incompatible support packages

이중 먼저 아래의 에러를 수정하기 위해 검색을 해보니 다음과 같은 문서가 나왔다.

✖ Check for app config fields that may not be synced in a non-CNG project
Unexpected error while running 'Check for app config fields that may not be synced in a non-CNG project' check:
Error: git rev-parse --show-toplevel exited with non-zero code: 69

 

https://github.com/expo/eas-cli/issues/2500#issuecomment-2373500972
이미 나는 Expo Go가 아닌 prebuild를 사용하고 있었기에 기존에 만들어진 ios, android 폴더가 있었고 이 부분에서 문제가 있다고 하니 아래의 명령어로 ios, android 폴더를 새로 생성하도록 한다.
(혹시 기존에 ios, android 폴더에 직접 수정을 한 경우가 있다면 증발하므로 변경점을 기억해둔 뒤 다시 적용하거나 앞으로는 expo config plugin을 통하여 설정하도록 한다)

npx expo prebuild --clean

 

그리고 또 expo-doctor 명령어를 통해서 더 나온 내용을 살펴보면

✖ Validate packages against React Native Directory package metadata
The following issues were found when validating your dependencies against React Native Directory:
Untested on New Architecture: lucide-react-native
No metadata available: @gluestack-ui/button, @gluestack-ui/icon, @gluestack-ui/nativewind-utils, @gluestack-ui/overlay, @gluestack-ui/toast, tailwindcss
Advice:
- Use libraries that are actively maintained and support the New Architecture. Find alternative libraries with https://reactnative.directory.
- Add packages to expo.doctor.reactNativeDirectoryCheck.exclude in package.json to selectively skip validations, if the warning is not relevant.
- Update React Native Directory to include metadata for unknown packages. Alternatively, set expo.doctor.reactNativeDirectoryCheck.listUnknownPackages in package.json to false to skip warnings about packages with no metadata, if the warning is not relevant.

 

사용하는 라이브러리들이 새 아키텍처에서 테스트 되지 않았다던가(lucide-react-native)
메타 데이터가 없다는 내용(gluestack-ui / nativewind때문에 사용하는 tailwindcss) 이라
이 부분은 특별히 변경 없이 진행하였다.

✖ Check that packages match versions required by installed Expo SDK
The following packages should be updated for best compatibility with the installed expo version:
  @react-navigation/native@^6.0.2 - expected version: ^7.0.0
  react-native-screens@~4.1.0 - expected version: ^4.0.0
Your project may not work correctly until you install the expected versions of the packages.
Found outdated dependencies
Advice: Use 'npx expo install --check' to review and upgrade your dependencies

 

기대한 버전과 맞지 않는 버전이 설정되어있다는 에러기 때문에 package.json에서 해당 라이브러리들의 버전을 명시된 버전으로 변경해주었다. 이중 expo sdk 52에 포함된 expo router 4는 react-navigation 7 기반으로 확장되었기때문에 꼭 올려주도록 하자.

이 외에 xcode license가 변경되었으니 동의하라고 하여

sudo xcodebuild -license

 

위 명령어로 동의를 해주었고

iOS 최소버전이 18.1로 올라갔기에 npx expo run:ios 명령어로 실행하였을때

{ platform:iOS, id:dvtdevice-DVTiPhonePlaceholder-iphoneos:placeholder, name:Any iOS Device, error:iOS 18.1 is not installed. To use with Xcode, first download and install the platform }

 

위와 같은 에러를 만났었다. 이는 xcode > menu > window > device and simulator에서 뜨는 창에서 simulator tab에서 +버튼을 눌러서 나온 모달에서 OS Version: Download. more simulator runtimes... 를 선택하여 18.1 버전 이상을 받아주면 해결된다.

이후로는 npx expo run:ios / npx expo run:andorid 명령어로 문제 없이 실행되었다.

new architecture가 잘 적용됬는지 확인하는 방법은 https://docs.expo.dev/guides/new-architecture/#are-you-enabling-the-new-architecture-in 에 자세히 나와있다.
안드로이드의 경우에는 gradle.properties 파일에 newArchEnable=true / iOS의 경우에는 Podfile.properties.json 파일에 newArchEnable 값이 true로 설정되어있다.