New usage of new architecture gets me confused #3232
Description
I think the official website is very disordered. Maybe as a veteran, you can't feel it. But for newbie, it seems a total mess. I list some issues:
- Everyone knows that RN's great new architecture. but when I read the official website, I can't tell which part belongs to new arch, which part doesn't. If the document is the old one, where to find the new document?
- If the 0.69 contains the new arch, do we have a dedicated document to explain how to turn on the new arch?
- The scaffold and website are out of sync. I use
npx react-native init TechApp --template react-native-template-typescriptto create a project, then I switch to new arch according to the website's instruction. I have two examples:
- It seems the scaffold already has a switch to turn on new arch: "RCT_NEW_ARCH_ENABLED", but it's not enough, because the document says if you want to enable TurboModule,
RCTEnableTurboModule(YES)must be called, but the sample code about the switch in scaffold doesn't have this code:
#if RCT_NEW_ARCH_ENABLED
_contextContainer = std::make_shared<facebook::react::ContextContainer const>();
_reactNativeConfig = std::make_shared<facebook::react::EmptyReactNativeConfig const>();
_contextContainer->insert("ReactNativeConfig", _reactNativeConfig);
_bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc] initWithBridge:bridge contextContainer:_contextContainer];
bridge.surfacePresenter = _bridgeAdapter.surfacePresenter;
#endif
- The document instruction says:" you will create a RCTTurboModuleManager in your bridge delegate’s jsExecutorFactoryForBridge", the code in the document is like this:
#pragma mark - RCTCxxBridgeDelegate
- (std::unique_ptr<facebook::react::JSExecutorFactory>)jsExecutorFactoryForBridge:(RCTBridge *)bridge
{
// Add these lines to create a TurboModuleManager
if (RCTTurboModuleEnabled()) {
_turboModuleManager =
[[RCTTurboModuleManager alloc] initWithBridge:bridge
delegate:self
jsInvoker:bridge.jsCallInvoker];
// Necessary to allow NativeModules to lookup TurboModules
[bridge setRCTTurboModuleRegistry:_turboModuleManager];
if (!RCTTurboModuleEagerInitEnabled()) {
/**
* Instantiating DevMenu has the side-effect of registering
* shortcuts for CMD + d, CMD + i, and CMD + n via RCTDevMenu.
* Therefore, when TurboModules are enabled, we must manually create this
* NativeModule.
*/
[_turboModuleManager moduleForName:"DevMenu"];
}
}
// Add this line...
__weak __typeof(self) weakSelf = self;
// If you want to use the `JSCExecutorFactory`, remember to add the `#import <React/JSCExecutorFactory.h>`
// import statement on top.
return std::make_unique<facebook::react::HermesExecutorFactory>(
facebook::react::RCTJSIExecutorRuntimeInstaller([weakSelf, bridge](facebook::jsi::Runtime &runtime) {
if (!bridge) {
return;
}
// And add these lines to install the bindings...
__typeof(self) strongSelf = weakSelf;
if (strongSelf) {
facebook::react::RuntimeExecutor syncRuntimeExecutor =
[&](std::function<void(facebook::jsi::Runtime & runtime_)> &&callback) { callback(runtime); };
[strongSelf->_turboModuleManager installJSBindingWithRuntimeExecutor:syncRuntimeExecutor];
}
}));
}
but the code in scaffold is like this:
#pragma mark - RCTCxxBridgeDelegate
- (std::unique_ptr<facebook::react::JSExecutorFactory>)jsExecutorFactoryForBridge:(RCTBridge *)bridge
{
_turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge
delegate:self
jsInvoker:bridge.jsCallInvoker];
[bridge setRCTTurboModuleRegistry:_turboModuleManager];
return RCTAppSetupDefaultJsExecutorFactory(bridge, _turboModuleManager);
}
the biggest difference is the return, they are totally different. which one should I use?
Please help!!!!!
Activity
jasonjiwork commentedon Jul 29, 2022
My advice:
cipolleschi commentedon Jul 29, 2022
Hi @jasonjiwork, huge thanks for your feedback. We are actually already working on that:
The pages you are currently looking at are named
New Architecturebut they actually contains the Migration steps to move from a version which does not support the new architecture to a version which does. It is clearly stated in the very first page, below theexperimentalwarning:If you create a new app with the template, you don't need to execute any step of the documentation, the template is already configured to work with both the architectures.
For example, you can see a call to RCTAppSetupPrepareApp(application); that refers to this other function which turn on the TurboModules for you.
If you want to enable the New Architecture for your app, tarting from the template, you just have to:
your_app/iosfolderbundle installto install the ruby dependenciesRCT_NEW_ARCH_ENABLED=1 bundle exec pod installto install the iOS dependencies enabling the new architecture.your_approot foldernpx react-native run-iosto run the app.your_app/android/gradle.propertiesfilenewArchEnabledflag fromfalsetotruenpx react-native run-androidto run the app.I hope this could help you. Bear with us, the documentation will arrive soon.
Thank you again for all your feedback! 🙏
jasonjiwork commentedon Jul 29, 2022
Wow, so quick response!
Thank you @cipolleschi !
my confusion has gone, now I can safely use the template without anxiety.
Really looking forward to 0.70, it's a big step for RN.
By the way, I can't find the documentation of how to create TurboModule, do we have related documentation now?
cipolleschi commentedon Jul 29, 2022
You are welcome, happy to help.
In the draft I shared with you there is a page called
pillars-turbomoduleswhich explain that. Moreover, you can refer to these two other repos:The first contains a step-by-step migration of apps from 0.67.4 (the last version without the New Architecture support) to 0.68, 0.69 and 0.70.0-rc1.
The last steps of these guides are how to create TurboModules and Fabric Components for the New Architecture.
The latter repo contains guides on how to create backward compatible TurboModules and Fabric Components for 0.68 and
0.70.0-rc.0(nothing really changed from this perspective between 0.68 and 0.69, that's why we don't have a 0.69 version).cortinico commentedon Jul 29, 2022
Thanks for raising your concerns @jasonjiwork and sharing your feedbacks. As @cipolleschi said, we took an iterative approach to the New Architecture and we're updating the older documentation to make clearer the separation of Old vs New Architecture.
Feel free to share more comments/feedbacks if you have any.
Closing as the issue is resolved 👍