New Architecture on RN 0.69.x

[cortinico]

Hey all,
This discussion is to collect feedback, report bugs, and share opinions on the support for New Architecture inside React Native 0.69.

All the bugs discovered during the release process of 0.69 which are not related to the New Architecture, should be reported to this other thread:

• Road to 0.69.0 react-native-releases#21

How to enable the New Architecture in 0.69.x

You can try the New Architecture by following those steps:

1. Create a new app with: npx react-native init MyApp --version next (or specify a specific version instead of next).
2. On iOS you can run, RCT_NEW_ARCH_ENABLED=1 pod install inside the ios folder.
3. On Android you can set newArchEnabled=true inside the android/gradle.properties file.
4. You can then run your app with yarn react-native run-android and yarn react-native run-ios

[leotm]

Could be worth adding New Arch flags relevant to Android and iOS to the Release Tester Matrix

| Link to branch:              | [link here]()           |
| ---------------------------- | :---------------------- |
| **Project info**             |                         |
| Name                         | <add me>                |
| Starting RN version          | <add me, ex. RN 0.65.1> |
| Hermes on iOS                | yes/no                  |
| Hermes on Android            | yes/no                  |
+ | New Arch on iOS            | yes/no                  |
+ | New Arch on Android        | yes/no                  |
+ | Fabric on iOS              | yes/no                  |
+ | Static frameworks on iOS   | yes/no                  | # While we're at it
| **Tested - iOS**             |                         |
| Fast Refresh                 | ✅/🚨/🙅‍♂️               |
| Debug/dev build on Simulator | ✅/🚨/🙅‍♂️               |
| Debug/dev build on Device    | ✅/🚨/🙅‍♂️               |
| Production build             | ✅/🚨/🙅‍♂️               |
| Chrome remote debugger       | ✅/🚨/🙅‍♂️               |
| Hermes debugger              | ✅/🚨/🙅‍♂️               |
| Flipper debugger             | ✅/🚨/🙅‍♂️               |
| **Tested - Android**         |                         |
| Fast Refresh                 | ✅/🚨/🙅‍♂️               |
| Debug/dev build on Emulator  | ✅/🚨/🙅‍♂️               |
| Debug/dev build on Device    | ✅/🚨/🙅‍♂️               |
| Production build             | ✅/🚨/🙅‍♂️               |
| Chrome remote debugger       | ✅/🚨/🙅‍♂️               |
| Hermes debugger              | ✅/🚨/🙅‍♂️               |
| Flipper debugger             | ✅/🚨/🙅‍♂️               |

Unless decided it complicates testing more than clarifying

cc @lunaleaps

[tido64]

Regarding the new methods introduced to control whether concurrentRoot is set to true, I feel the way they are exposed/taught to consumers, by hiding what's going on beneath, isn't useful to consumers. We teach them that there is a central place to enable/disable Concurrent React, when you can actually pass the prop with initial props, and control which views to enable them for. I think this is already simple enough, and we should teach this instead. The new methods are just confusing things.

[mganandraj]

RNTester on [email protected] currently fail to build on Windows boxes (Unless I miss some special instructions !)

The failures are,

1. Hermes host build to produce compiler requires all the native build tools installed on host machine. I could build from VS dev shell. This might require a documentation fix on system requirements.
2. Hermes runtime builds fails here while trying to run config.guess which is a bash script.
3. [Main][Windows] Working around Long paths limitation on Windows facebook/react-native#33707 is still required, as rntester is not migrated to CMake

#2 is tricky to fix cleanly, which I'm still looking into. Good news is that I could hack a local fix to produce and test RNTester locally.

[cortinico]

Thanks for sharing this @mganandraj That's (sadly) correct.
As we're going to release 0.68.2 with facebook/react-native#33707, point 3. is going to be picked inside react-native-codegen and .69 will benefit from it as well (we'll cherry pick it).

The crucial point is 2. so if you have any fix, that's more than welcome

[mganandraj]

Thanks for sharing this @mganandraj That's (sadly) correct. As we're going to release 0.68.2 with facebook/react-native#33707, point 3. is going to be picked inside react-native-codegen and .69 will benefit from it as well (we'll cherry pick it).

The crucial point is 2. so if you have any fix, that's more than welcome

Here is a PR with my local patch which works well: https://github.com/facebook/react-native/pull/33785/files

And this PR cherry picks the long path fix to main: facebook/react-native#33784

[cortinico]

Reviewed the first and merged the second 👍

[douglowder]

Progress on React Native 0.69 release for TV (https://github.com/react-native-tvos/react-native-tvos/commits/tvos-v0.69.0):

• 0.69-stable branch from RN core successfully merged into the TV repo
• Old architecture seems ok, tests are passing
• New architecture is mostly ok, except for
  • Issues with focus management around TVFocusGuideView on both Apple TV and Android TV
  • Still seeing a bad interaction on Apple TV between the new rendering and the use of parallax animations (tvParallaxProperties)
  • Need to either implement TabBarIOS and TVTextScrollView in the new arch, or drop them