New Architecture on RN 0.68.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.68.

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

• Road to 0.68 react-native-releases#13
• Road to 0.68 - part 2 react-native-releases#17

How to enable the New Architecture in 0.68.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

[lindboe]

Tried this out, thanks for this! I ran into a few problems we might want to additionally document in troubleshooting steps:

TL;DR

• Should we version the react-native CLI used to init the project?
• Should we document minimum supported versions of node?
• Compiler error encountered on iOS that disappeared after a few attempts, attempting to repro still

Issues encountered

• I think it might be good to encourage npx react-native@latest or a specific version, because if anyone has installed react-native-cli globally it'll use an older version, which didn't work for me, it failed to add react-native dependencies to the project (it was pretty old)
• I had an older node installed (14.5) and that failed to install, with some error output (see below). The current env documentation just specifies node 12 or later, but it might be good to specify minimum supported versions, or at least encourage using the latest minor version.

96 npm WARN EBADENGINE Unsupported engine {
 97 npm WARN EBADENGINE   package: '@jest/[email protected]',
 98 npm WARN EBADENGINE   required: { node: '^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0' },
 99 npm WARN EBADENGINE   current: { node: 'v14.5.0', npm: '7.11.2' }
100 npm WARN EBADENGINE }
101 npm WARN EBADENGINE Unsupported engine {
102 npm WARN EBADENGINE   package: '@jest/[email protected]',
103 npm WARN EBADENGINE   required: { node: '^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0' },
104 npm WARN EBADENGINE   current: { node: 'v14.5.0', npm: '7.11.2' }
105 npm WARN EBADENGINE }

• Lastly, I ran into an issue building iOS that eventually resolved after I tried a few things, but I'm not certain what fixed it:

On my first attempt, after running RCT_NEW_ARCH_ENABLED=1 pod install (I did have to use --repo-update, and I expect many people will), I ran yarn react-native run-ios and got the following build error:

warning: Capabilities for Signing & Capabilities may not function correctly because its entitlements use a placeholder team ID. To resolve this, select a development team in the newArchMarch2022 editor. (in target 'newArchMarch2022' from project 'newArchMarch2022')

** BUILD FAILED **


The following build commands failed:
	CompileC /Users/lizzi/Library/Developer/Xcode/DerivedData/newArchMarch2022-feoquvzboqlqgefclebtuvpxjxnl/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-Codegen.build/Objects-normal/x86_64/ShadowNodes.o /Users/lizzi/dev/newArchMarch2022/ios/build/generated/ios/react/renderer/components/rncore/ShadowNodes.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

To fix the development team error, as well as find out more about why the compiler error was occurring, I decided to open the app in XCode and build it from there.

Question: does that development team error occur normally on downloading the template? Is it expected we'll need to open the app in XCode and fix that first? Or is that just a warning that wouldn't normally prevent a build?

After trying to build in XCode, I got an error 'react/renderer/components/view/ViewEventEmitter.h' file not found (I forgot to note which file showed this error, but XCode showed it as from the React-Codegen target).

I'm not quite familiar enough with cocoapods to figure out what went wrong, but today, attempting to pod install and build again seems to work, for both building from Xcode and command line. I'm going to try again with a fresh project and see if I can reproduce the issue again.

[cortinico]

Thanks for giving this a try @lindboe, this is awesome.

Answering inline:

Should we version the react-native CLI used to init the project?

On this point, as long as you invoke the npx react-native init command with --version next (or any other version) you should be fine. Essentially you're picking up a template from a specific version to kick-off your project. From there on, you'll use the react-native-cli version that the template is providing, which should be fine.

Should we document minimum supported versions of node?

Definitely. If I recall correctly the minimum node version to use is 16. I think we should add a .nodeversion file in both the root RN project and the template. What do people think about this?

Question: does that development team error occur normally on downloading the template? Is it expected we'll need to open the app in XCode and fix that first? Or is that just a warning that wouldn't normally prevent a build?

Nope that's not expected. Ideally you should be able to just RCT_NEW_ARCH_ENABLED=1 pod install. Are you sure you were on the template for RN 0.68.0-rc2 and not on a previous version (i.e. which was the react-native version in the package.json as you created the new app)?

[cipolleschi]

To add some other information on top of what @cortinico said:

1. The New Architecture is supported starting from version 0.68.
2. I agree about having a .nodeversion file to enforce a specific version.
3. On iOS:

• For the signing issue, do you have an iphone cnnected to the Mac? Xcode tries to sign the executable only when it need to load it on a physical device. If you run yarn react-native run-ios without any device attached, the CLI run the iOS simulator and it should start without issues.
• About this:

After trying to build in XCode, I got an error 'react/renderer/components/view/ViewEventEmitter.h' file not found (I forgot to note which file showed this error, but XCode showed it as from the React-Codegen target).

Is it possible that you had run a pod install with the old architecture? If yes, what happened is that the new project created by the RCT_NEW_ARCH_ENABLED=1 pod install had some cached file which does not know about the ViewEventEmitter.h which is automatically generated by the new architecture. The way to fix this issue is usually:
- Clean the project from Xcode: cmd+shift+K
- In the terminal, from the iOS folder, remove the Pods and the generated files: rm -rf Pods/ Podfile.lock build/
- Reinstall the pods: RCT_NEW_ARCH_ENABLED=1 pod install
- Run the app (either from Xcode or from yarn react-native run ios)

Let me know if it helps!

[lindboe]

On the compilation failure: it does appear that an older build was the issue; it started working after a clean. A few notes:

• My usual xcodebuild clean actually errored, I got an error (below). Cleaning from XCode GUI worked, so that seems like the more reliable method, potentially?
• Is it a pod install with the old architecture that would cause this, or a build with the old architecture? I ask because 1. I also ran a bundle exec pod install without the flag on another machine and didn't have this issue; and 2. if a pod install causes this, I think this might happen for every new app template usage, because the RN CLI init command tries to run pod install for you.

xcodebuild clean error:

note: Using new build system
error: Could not delete `/Users/lizzi/dev/newArchMarch2022/ios/build` because it was not created by the build system.
note: Build preparation complete

[cipolleschi]

My usual xcodebuild clean actually errored, I got an error (below). Cleaning from XCode GUI worked, so that seems like the more reliable method, potentially?

I think that they work both ways. The GUI cmd+shift+K uses xcodebuild clean under the hoods. I think it just hid the error message from you, while the console commands failed. In fact, even the cmd+shift+k does not remove the <your-path>/ios/build if it's there. The only thing is that that folder is not part of the xcodeproj and therefore you don't see it in the IDE.

Is it a pod install with the old architecture that would cause this, or a build with the old architecture? I ask because 1. I also ran a bundle exec pod install without the flag on another machine and didn't have this issue; and 2. if a pod install causes this, I think this might happen for every new app template usage, because the RN CLI init command tries to run pod install for you.

TL;DR
It should be a build with the old architecture, after a pod install. A simple pod install should just download the dependencies but it does not build them.
Long answer
The problem should be the cache Xcode generates when building. I haven't tried it yet, but if you do npx react-native init and immediately after you do cd ios && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install, everything should work: the initinstalls the dependencies from the old architecture, but it does not try to build them. So, no cache is generated.
The problem occurs if, after init, the users run the run-ios command: if that happens, RN builds the app and then it runs the app.
At this point, Xcode has some artifact cached. After the pod install for the new arch enabled, not all the pods are updated. Xcode does not rebuilds the part of the app/pods that have not changed and therefore we end up with a mixture of old architecture artifacts and new architecture ones.

[douglowder]

Happy to report that the TV repo now has a 0.68 branch that is even with 0.68.0-rc3. RNTester working on both Apple TV and Android TV, with new architecture enabled. Tracking this in react-native-tvos/react-native-tvos#281 .

Still working on some fixes for the new app template, but I'm hoping to get a 0.68 TV release out at more or less the same time as the stable core 0.68 release goes out.

[cortinico]

Awesome 👍 Glad to hear everything works smoothly