Upgrade to RN v0.68

[gnprice]

The next round after #5232. Blog post here:
https://reactnative.dev/blog/2022/03/30/version-068
and more-detailed changelog:
https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0680

[gnprice]

This looks like more changes than v0.67 (I say having read the full changelog, but not looked at any of the code yet), but still no obvious obstacles. Other than one: it does sound like it'll probably require the Gradle and AGP upgrades, #5377.

[chrisbobbe]

expo/expo@75e2cf7e3 claims that RN 68 will break animated GIF support unless we upgrade Fresco on Android to 2.5.0.

[chrisbobbe]

When doing this upgrade, we should also examine changes to templates/expo-template-bare-minimum in the following commits, to see if there's anything special Expo wants us to do to handle the RN 68 upgrade:

• expo/expo@b41c14cc1
• expo/expo@a3527a58b
• expo/expo@adf446abf

[gnprice]

OK, I spent some time this afternoon starting on this upgrade.

• I've scanned through the template-app changes upstream; sorted them all into the clusters below; and read many of them in detail.
• I also have a draft branch that does the upgrade; it works in quick manual testing on Android, and passes tools/test --all. It still needs some of the changes below in order to keep up with the template app, and it needs more manual testing including some on iOS.
• The word TODO below marks all the areas from the template-app changes that still need attention: either applying the changes, or investigating further.

I plan to edit the list below with updates as I proceed.

List of template-app changes

Preparing the list: in a react-native checkout,

$ git log --oneline --no-decorate --reverse v0.67.4..v0.68.5 -- template

then reformatted slightly: repo added to commit IDs, # replaced with # . Then kept a copy for reference (at end below), and started rearranging into groups and taking notes.

To review the changes in detail:

$ git log --stat -p --reverse v0.67.4..v0.68.5 -- template

Our own fix 🎉 returning to us from upstream

• Originally done as 03a62af / Android: Fix AppComponent reconstructed on split screen #5104:
  facebook/react-native@fc962c9b6 Don't reconstruct app component on split-screen (# 32536)

In the main upgrade commit

• The RN dependency itself:
  facebook/react-native@0fd6ade86 [0.68.0-rc.0] Bump version numbers
  facebook/react-native@319e4df45 [0.68.0-rc.1] Bump version numbers
  facebook/react-native@65e4d98a7 [0.68.0-rc.2] Bump version numbers
  facebook/react-native@b3f19d7f1 [0.68.0-rc.3] Bump version numbers
  facebook/react-native@a4a6e23de [0.68.0-rc.4] Bump version numbers
  facebook/react-native@51f5ea15a [0.68.0] Bump version numbers
  facebook/react-native@b5f1b26a8 [0.68.1] Bump version numbers
  facebook/react-native@72e1eda07 [0.68.2] Bump version numbers
  facebook/react-native@36153e255 [0.68.3] Bump version numbers
  facebook/react-native@b55518c4b [0.68.4] Bump version numbers
  facebook/react-native@b12a7f9e6 [0.68.5] Bump version numbers

• Squash because RN points to its own version of Metro:
  facebook/react-native@ea74c5797 Bump direct Metro dependencies to 0.67.0

• Squash also the jsBundleURLForBundleRoot commit mentioned below.

iOS changes

• Squash with main upgrade:
  facebook/react-native@aef843bfe update jsBundleURLForBundleRoot in template project

  This updates the template app for an API change that happened in this commit:
  facebook/react-native@0912ee179 remove fallbackResource from RCTBundleURLProvider api
  It looks like it's an NFC change but incompatible in both directions, so has to be squashed.

• New Arch on iOS, and accompanying iOS build changes.

  Let's largely take these; unlike the Android side (see below), it doesn't come with a bunch of mess added to the template.

  Probably do these after the main upgrade commit; @chrisbobbe notes below that at least one of them (facebook/react-native@73a04d145) seems to use a new piece of RN's API.

  Detailed sequence:

  • facebook/react-native@4fb49cd55 Rename AppDelegate.m to AppDelegate.mm in the app template

    This commit has some messy noise diffs, so try to either skip or isolate those.

  • facebook/react-native@73a04d145 Refactor the iOS app template to move setups to a helper class
    Hooray, a nice cleanup moving things out of template into RN.

    But it replaces some code that Expo 44 had had us modify: 3edc37a, deps: Upgrade to Expo SDK 44 #5441.
    Needs investigation: what does Expo say to do to the AppDelegate.mm after RN v0.68?
    … OK, found that:
    https://docs.expo.dev/bare/installing-expo-modules/#configuration-for-ios
    and applied.

  • Squash these together as one commit, adding a New Arch option to AppDelegate.mm:
    facebook/react-native@8ec0e6919 Add turbo module support in the default app template (# 32752)
    facebook/react-native@2e9a376c8 Add fabric option to the default app template.
    facebook/react-native@c0c543995 Rename the new architecture flag to RCT_NEW_ARCH_ENABLED
    facebook/react-native@1cd8f05ee Refactor app template setup util functions
    facebook/react-native@6a046fb9f Fix build issue for the new app template (# 32772)
    facebook/react-native@e330eee9c Add Other C++ flags when RCT_NEW_ARCH_ENABLE=1 (# 32777)

    plus this bugfix to a Podfile snippet they add:
    facebook/react-native@ccd170809 Re-apply: Consider relative to pwd installation root when looking for files in rn module via cocoapods (# 33427)

  • Formatting change, comes after all the New Arch changes:
    facebook/react-native@b352aa369 Do not opt-out fbsource/xplat/js/react-native-github/template from CLANGFORMAT

  • facebook/react-native@f595a4e68 Duplicate Xcodeproj UUIDs in iOS app template Podfile fixed
    Podfile change, needed only with Fabric / New Arch:
    https://reactnative.dev/docs/0.68/new-architecture-app-renderer-ios#1-enable-fabric-in-podfile
    but sounds like it's working around a CocoaPods mess; may as well take now.

Android changes

• One batch of minor Gradle/AGP upgrades (-> android build: Follow some changes from RN v0.68 #5603)
  facebook/react-native@cd4c6659d Bump Gradle, AGP and Download plugins
  (There were also several other, bigger upgrades we've already done, below.)

  The remaining bit of that commit, updating de.undercouch:gradle-download-task, is to something that was only added in the New Arch stuff we're holding off on.

• Android build, specifying architectures (-> android build: Follow some changes from RN v0.68 #5603)
  facebook/react-native@43c38cdc8 Allow specifying an architecture in RNTester and release builds
  facebook/react-native@0f39a1076 Make the reactNativeArchitectures property more discoverable

• Flipper. Needs the main upgrade first in order to compile.
  facebook/react-native@ce74aa4ed Add ReactInstanceEventListener for Venice and expose in FbReactInstanceHolder
  facebook/react-native@8bd3edec8 Update copyright headers from Facebook to Meta
  facebook/react-native@50057158c Bump Flipper to 0.125.0 (# 32923)

• android:exported in debug activity, from a commit also found below:
  facebook/react-native@00ac03435 Bump OSS Android build to SDK 31 (# 32606)

Interesting for future, but nothing to do now

• New Arch on Android:
  facebook/react-native@8d652fba4 Setup a newArchEnabled property to Opt-in the New Architecture in the template (# 32790)
  facebook/react-native@a2a703247 Increase max heap size for template gradle build
  facebook/react-native@bca4cf023 Set a resolution strategy for com.facebook.react:react-native when on New Architecture. (# 33134)
  facebook/react-native@762db49de Make sure configureNdkBuild* tasks are depending on preBuild
  facebook/react-native@5a8033df9 Fix for building new architecture sources on Windows
  facebook/react-native@8400590ab Template: Specify abiFilters if enableSeparateBuildPerCPUArchitecture is not set.

  This involves a giant mess of code spewed into the template app. It's only needed when using RN's "New Architecture".

  Happily, they did subsequently clean this up. That was completed with facebook/react-native@c96c76eb9, released in v0.71. So perhaps RN v0.71 is the release in which to consider trying the New Architecture.

  (OTOH a partial version of the "max heap size" did turn out to be needed in android build: Follow some changes from RN v0.68 #5603.)

• Interesting but can ignore for upgrade: react-native-gradle-plugin. Seems to be a new (since late 2021) alternative way to integrate RN into Android build. We're not currently using, though, so nothing to update.
  facebook/react-native@0fccbd53a Leverage Gradle implicit dependency substitution for Gradle Plugin
  facebook/react-native@72d949e25 Bump gradle-plugin to 0.0.4
  facebook/react-native@43d67cd1e Remove react-native-gradle-plugin as a dependency from template's package.json

  From the history, it looks like the work on this was motivated by the New Architecture.

Not corresponding to changes for us to make

• Flow upgrades — already done in flow: Upgrade to v0.170 #5570:
  facebook/react-native@d15052965 Deploy 0.163.0 to xplat
  facebook/react-native@181464903 Deploy 0.164.0 to xplat
  facebook/react-native@8ace78c08 Deploy 0.165.0 to xplat
  facebook/react-native@7dfb08a78 Deploy 0.167.1 to xplat
  facebook/react-native@d1e359a15 Deploy 0.168.0 to xplat
  facebook/react-native@baea87811 Deploy v0.170.0 to xplat

• Gradle, AGP, Android SDK upgrades we've already done:
  facebook/react-native@c180627ac bump gradle to 7.3 (# 32588)
  facebook/react-native@272cfe5d1 draft: bump AGP to 7 (# 32589)
  facebook/react-native@00ac03435 Bump OSS Android build to SDK 31 (# 32606)
  (There's one we haven't, above. Part of the "SDK 31" commit is also above.)

• Android build change in setting ndkVersion, which we don't set at all:
  facebook/react-native@6268836c7 Improve support for Android users on M1 machine (# 33588)

  (and then a revert-pair, so ignore those too; one also touches some New Arch build logic:)
  facebook/react-native@387ee70e7 Use NDK 23 only for Windows users. (# 33611)
  facebook/react-native@62ef6f5fa [Main][Windows] Working around Long paths limitation on Windows (# 33707)

• facebook/react-native@66b82aec5 chore(deps): bump CLI version to 7.0.3 to address web debugging issue (# 33156)
  Part of this is a .flowconfig fix we already have: 573697c.
  The rest is bumping @react-native-community/cli, which isn't in our dependencies.
  Ignore.

• Ignore — reverted changes in Babel config:
  facebook/react-native@2098c8950 Add babel-plugin-codegen to babel.config.js for fabric (# 32756)
  facebook/react-native@82b8f407c Revert the change to add babel-plugin-codegen
  facebook/react-native@2cd317399 Remove optional codegen config inside template (# 33108)

• Ignore — reverted changes in Android build re Hermes/JSC/NDK:
  facebook/react-native@b0711f1d3 Update ReactAndroid to use the AGP NDK Apis (# 32443)
  facebook/react-native@71548ffd6 Do not bundle libhermes.so or libjsc.so inside the React Native Android AAR (# 33038)

• Ignore — upgrades to Prettier and ESLint:
  facebook/react-native@ba7424d4d RN: Normalize Prettier Configuration
  facebook/react-native@4e587a1b7 JS: Upgrade to Prettier v2.4.1 [1/n]
  facebook/react-native@cf763cdf8 RN: Upgrade ESLint Packages (# 32560)

• Ignore — for Gemfile.lock, ignored as per deps: Upgrade to RN v0.67! #5426 (comment)
  facebook/react-native@1e6add1a4 iOS Ruby Updates (# 32456)
  facebook/react-native@2f67f5d68 - Add vendor/bundle into .gitignore template (# 32930)

• Ignore — was backported to v0.67 as facebook/react-native@eede05c91, handled then
  facebook/react-native@03a090786 Add back Xcode_12_5_M1_post_install_workaround

In original order, for reference

$ git log --oneline --no-decorate --reverse v0.67.4..v0.68.5 -- template
(slightly reformatted: repo added to commit IDs, # replaced with # )

facebook/react-native@ba7424d4d RN: Normalize Prettier Configuration
facebook/react-native@ce74aa4ed Add ReactInstanceEventListener for Venice and expose in FbReactInstanceHolder
facebook/react-native@1e6add1a4 iOS Ruby Updates (# 32456)
facebook/react-native@03a090786 Add back Xcode_12_5_M1_post_install_workaround
facebook/react-native@d15052965 Deploy 0.163.0 to xplat
facebook/react-native@b0711f1d3 Update ReactAndroid to use the AGP NDK Apis (# 32443)
facebook/react-native@4e587a1b7 JS: Upgrade to Prettier v2.4.1 [1/n]
facebook/react-native@43c38cdc8 Allow specifying an architecture in RNTester and release builds
facebook/react-native@fc962c9b6 Don't reconstruct app component on split-screen (# 32536)
facebook/react-native@0f39a1076 Make the reactNativeArchitectures property more discoverable
facebook/react-native@cf763cdf8 RN: Upgrade ESLint Packages (# 32560)
facebook/react-native@181464903 Deploy 0.164.0 to xplat
facebook/react-native@c180627ac bump gradle to 7.3 (# 32588)
facebook/react-native@8ace78c08 Deploy 0.165.0 to xplat
facebook/react-native@272cfe5d1 draft: bump AGP to 7 (# 32589)
facebook/react-native@00ac03435 Bump OSS Android build to SDK 31 (# 32606)
facebook/react-native@4fb49cd55 Rename AppDelegate.m to AppDelegate.mm in the app template
facebook/react-native@73a04d145 Refactor the iOS app template to move setups to a helper class
facebook/react-native@2098c8950 Add babel-plugin-codegen to babel.config.js for fabric (# 32756)
facebook/react-native@82b8f407c Revert the change to add babel-plugin-codegen
facebook/react-native@8ec0e6919 Add turbo module support in the default app template (# 32752)
facebook/react-native@2e9a376c8 Add fabric option to the default app template.
facebook/react-native@c0c543995 Rename the new architecture flag to RCT_NEW_ARCH_ENABLED
facebook/react-native@1cd8f05ee Refactor app template setup util functions
facebook/react-native@7dfb08a78 Deploy 0.167.1 to xplat
facebook/react-native@6a046fb9f Fix build issue for the new app template (# 32772)
facebook/react-native@e330eee9c Add Other C++ flags when RCT_NEW_ARCH_ENABLE=1 (# 32777)
facebook/react-native@aef843bfe update jsBundleURLForBundleRoot in template project
facebook/react-native@d1e359a15 Deploy 0.168.0 to xplat
facebook/react-native@b352aa369 Do not opt-out fbsource/xplat/js/react-native-github/template from CLANGFORMAT
facebook/react-native@8d652fba4 Setup a newArchEnabled property to Opt-in the New Architecture in the template (# 32790)
facebook/react-native@8bd3edec8 Update copyright headers from Facebook to Meta
facebook/react-native@cd4c6659d Bump Gradle, AGP and Download plugins
facebook/react-native@0fccbd53a Leverage Gradle implicit dependency substitution for Gradle Plugin
facebook/react-native@72d949e25 Bump gradle-plugin to 0.0.4
facebook/react-native@2f67f5d68 - Add vendor/bundle into .gitignore template (# 32930)
facebook/react-native@50057158c Bump Flipper to 0.125.0 (# 32923)
facebook/react-native@f595a4e68 Duplicate Xcodeproj UUIDs in iOS app template Podfile fixed
facebook/react-native@baea87811 Deploy v0.170.0 to xplat
facebook/react-native@ea74c5797 Bump direct Metro dependencies to 0.67.0
facebook/react-native@0fd6ade86 [0.68.0-rc.0] Bump version numbers
facebook/react-native@a2a703247 Increase max heap size for template gradle build
facebook/react-native@71548ffd6 Do not bundle libhermes.so or libjsc.so inside the React Native Android AAR (# 33038)
facebook/react-native@319e4df45 [0.68.0-rc.1] Bump version numbers
facebook/react-native@43d67cd1e Remove react-native-gradle-plugin as a dependency from template's package.json
facebook/react-native@bca4cf023 Set a resolution strategy for com.facebook.react:react-native when on New Architecture. (# 33134)
facebook/react-native@2cd317399 Remove optional codegen config inside template (# 33108)
facebook/react-native@66b82aec5 chore(deps): bump CLI version to 7.0.3 to address web debugging issue (# 33156)
facebook/react-native@65e4d98a7 [0.68.0-rc.2] Bump version numbers
facebook/react-native@762db49de Make sure configureNdkBuild* tasks are depending on preBuild
facebook/react-native@ccd170809 Re-apply: Consider relative to pwd installation root when looking for files in rn module via cocoapods (# 33427)
facebook/react-native@b3f19d7f1 [0.68.0-rc.3] Bump version numbers
facebook/react-native@a4a6e23de [0.68.0-rc.4] Bump version numbers
facebook/react-native@51f5ea15a [0.68.0] Bump version numbers
facebook/react-native@5a8033df9 Fix for building new architecture sources on Windows
facebook/react-native@8400590ab Template: Specify abiFilters if enableSeparateBuildPerCPUArchitecture is not set.
facebook/react-native@6268836c7 Improve support for Android users on M1 machine (# 33588)
facebook/react-native@387ee70e7 Use NDK 23 only for Windows users. (# 33611)
facebook/react-native@b5f1b26a8 [0.68.1] Bump version numbers
facebook/react-native@62ef6f5fa [Main][Windows] Working around Long paths limitation on Windows (# 33707)
facebook/react-native@72e1eda07 [0.68.2] Bump version numbers
facebook/react-native@36153e255 [0.68.3] Bump version numbers
facebook/react-native@b55518c4b [0.68.4] Bump version numbers
facebook/react-native@b12a7f9e6 [0.68.5] Bump version numbers

[chrisbobbe]

Great, thanks for taking this on! 🙂 I think it's helpful for you to do one now and then, so we can compare notes on the process.

Here are a few small things from my notes (not having gone far in this upgrade yet), to add to what you've found above. Organized by which of your headings they apply under:

iOS changes

• facebook/react-native@73a04d145 does seem to use an API that's new in 68, so we should apply it in or after the main commit.

Android changes

• facebook/react-native@0f39a1076 looks like it might've been a followup to facebook/react-native@43c38cdc8.
• facebook/react-native@ce74aa4ed does indeed seem to use a changed RN API.

Not corresponding to changes for us to make

• I noted the reason for rejecting all the Ruby / Gemfile.lock goo was given at deps: Upgrade to RN v0.67! #5426 (comment).
• On facebook/react-native@00ac03435, I actually wrote down, "We did most of this in Target Android 12 (set targetSdkVersion to 31), by 2022-11 deadline #5101, but this commit has some changes that we didn't make; investigate"
• On facebook/react-native@71548ffd6, although I also found that it reverted something, I did note that it also added some lines that we might want.