[React Native] Upgrade 0.61.5 to 0.63.4

업데이트를 하자!

• 제가 운영중인 루빗이라는 어플을 처음 init한지 벌써 1년이 되었어요!
• react-native 버전이 그새 많이 올라서 업그레이드를 해보려고 합니다.

Upgrade Helper Step 1 - Edit Code

• https://react-native-community.github.io/upgrade-helper

  • 이 사이트를 이용하면 원하는 버전으로의 업데이트를 위해 무엇을 해야하는지 알 수 있어요.

  • 저는 0.61.5에서 0.63.4로 업그레이드를 할겁니다!

  • https://react-native-community.github.io/upgrade-helper/?from=0.61.5&to=0.63.4

  • 여기에 나와있는대로 코드를 수정해주세요.

    • 참고) storyboard 추가하기
      • 기존 ios/RnDiffApp/Base.lproj/LaunchScreen.xib파일은 삭제하고, ios/RnDiffApp/LaunchScreen.storyboard 파일을 추가하라고 합니다.
      • 이 때 storyboard 파일은 xcode에서 추가해주세요.
        • xcode > 프로젝트이름 우클릭 > New File > User Interface > Storyboard 선택 > Next > LaunchScreen.storyboard 이름 변경 > Create)
      • 그리고 LaunchScreen.storyboard 코드는 vscode에서 수정해주세요.

  • 단, ios/RnDiffApp.xcodeproj/project.pbxproj 파일은 제외하고 수정해주세요.

    • https://github.com/react-native-community/upgrade-support/issues/13
    • 이곳을 보면 더 쉽게 수정할 수 있다고 친절하게 알려주네요 :)
    • 이제 이 링크만 따라하면 됩니다. Step 2로 갈까요?

Upgrade Helper Step 2 - Ready To Build

• 먼저 이전 수정사항은 다 커밋하고, 빌드를 해보라고 하네요!

• 빌드할 준비를 해봅시다. rn 업그레이드인만큼 build도 clean해주고, node_modules 폴더와 Pods 폴더도 삭제해주고 캐시도 삭제해줍시다.

    cd android && ./gradlew clean

    rm -rm node_modules ios/Pods
    && watchman watch-del-all
    && npm cache clean --force

    rm -rf ~/Library/Developer/Xcode/DerivedData/*

    npm i && cd ios && pod install && cd ..

2. Build & Error

• 이제 진짜 빌드를 해봅시다. 하지만 호락호락한 RN이 아닙니다,,,,

  1. iOS (XCode에서 빌드)

     • Error: 'event2/event-config.h' file not found

       • Flipper SDK가 최신 버전인지 확인해보아야 합니다.

         • 해결방법

           • Android

              # path: android/gradle.properties
              # FLIPPER_VERSION=0.74.0 # before
              FLIPPER_VERSION=0.74.0 # after

           • iOS

               # path: ios/Podfile
               # use_flipper! # before
               use_flipper!({ 'Flipper' => '0.74.0' }) # after

               cd ios && pod install && cd ..

     • 다시 빌드

     • Error 2

         error: Build input file cannot be found: '/Users/daheeahn/Desktop/roubit_app_desktop/ios/roubit/Base.lproj/LaunchScreen.xib'

       • 이번엔 이미 삭제한 LaunchScreen.xib을 찾지 못해서 에러가 납니다.
       • 아직 project.pbxproj 파일을 수정하지 않아서 생긴 문제이니 빌드가 되었다고 생각하고 3으로 넘어갑시다!

     • 참고링크: https://stackoverflow.com/questions/66019068/event2-event-config-h-file-not-found

  2. Android

     • Error

         Execution failed for task ':app:processDebugResources'.
         > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
            > Android resource linking failed
                /Users/daheeahn/.gradle/caches/transforms-2/files-2.1/c5b11c018717da6114a96438058824e6/play-services-ads-lite-19.7.0/AndroidManifest.xml:27:5-43:15: AAPT: error: unexpected element <queries> found in <manifest>.

       • 해결방법

         • Android 11을 사용하는 라이브러리는 Android Gradle Plugin이 4버전 미만일 때 충돌을 일으킬 수 있다고 합니다.

           // android/build.gradle
           // classpath("com.android.tools.build:gradle:3.5.3") // before
           classpath("com.android.tools.build:gradle:4.0.1") // after

     • 빌드 성공! 3으로 넘어갑시다!

3. Last - Edit project.pbxproj Code

• https://github.com/react-native-community/upgrade-support/issues/13

  • 이제 이곳을 따라해서 project.pbxproj를 수정해봅시다.

  • 참고) File.swift 파일은 최종적으로 삭제하라고 나와있는데 다시 만들어주기까지 해야 빌드가 완료됩니다.

  • 참고) Step 3까지만 따라해주세요. 4까지하면 빌드 시 에러가 나더라고요!

  • 3을 제외하고 따라간 후 빌드하면 성공합니다!

  • 질문이 있으시다면 댓글로 남겨주세요.