New Architecture Known Issues & Troubleshooting

[cortinico]

tl;dr: This post collects all the known issues with related resolutions to help users migrate the the New Architecture

Hi all,

With React Native 0.76 approaching, we want to collect in a single place all the known issues and troubleshooting we collected from the previous months of experimentation with the New Architecture.

This is a living document and we’ll be updating this document as we get more bug reports. If you encounter any issues migrating to the New Architecture, please open a new issue using this template.

Modules Known Issues

Unable to use Object.keys on NativeModules

Answer: This is by design. We designed the TurboModule system with the goal of lazy loading, so we don’t have to load all the modules in memory when the app is launched. This should let your app start faster.

One of the trade-offs of this solution is that you cannot call Object.keys on a native module right away, because not all the keys might be available immediately.

Instead, you can read them by leveraging the inheritance. You can call Object.keys on the native module prototype and the result should be the same as before.

- for prop in Object.keys(nativeModule) {
+ for prop in Object.keys(Object.getPrototypeOf(nativeModule)) {
 // use the prop here
}

** [iOS] Cannot access CallInvoker from RCTCxxBridge.callInvoker

Answer: In bridgeless mode, the bridge is not initialized anymore. So, if you were retrieving the jsCallInvoker instance from the [RCTBridge currentBridge] invocation, that might not work well anymore.

If you need this functionality, the best approach is to implement a pure C++ TurboModule which receives the callInvoker as a parameter when it is initialized.

This will also help you write more encapsulated code.

Components Known Issues

** Components with custom Shadow Nodes and measurement are not working with the Interop Layer.

Answer: This is by design because the New Architecture stores the shadow node and layout information in the C++ layer. If your custom component/library is providing a custom shadow node implementation you won’t be able to use it via the Interop Layer (this is a known limitation of the Interop Layer).

Specifically on Android, if your ViewManager class is implementing any of those methods:

• createShadowNodeInstance() (reference)
• createShadowNodeInstance(ReactApplication) (reference)
• createShadowNodeClass() (reference)
• measure(Context,ReadableMap,ReadableMap,ReadableMap,float,YogaMeasureMode, float, YogaMeasureMode heightMode, float[]) (reference)

Your component won’t be working with the Interop Layer and will require an implementation with the new Renderer.

[myselfuser1]

Can you please check this

[sidorchukandrew]

Does this mean createShadowNodeInstance, createShadowNodeClass and measure do work with Fabric on Android? I created a new library with builder bob but measure and createShadowNodeInstance are never called. I'm 99% sure I do not have the interop layer on because my logs say Bridgeless mode is enabled and fabric: true. The component renders to the screen but is not clickable because it doesn't have a height and width.

[sidorchukandrew]

Thank you for the explanation! Is there documentation on how to make it work through the C++ layer? I'm playing around with the community RN slider package and I also see Bridgeless mode is enabled and fabric: true in the console logs. When I drop a breakpoint right here, the breakpoint is actually hit. If I understand your most recent comment, this shouldn't be the case because the measurements should be coming from C++.

It's obvious that I'm misunderstanding something, so any clarifications would be very appreciated!

[sidorchukandrew]

Also thank you for such a quick response! That is much appreciated!

** Components with custom Shadow Nodes and measurement are not working with the Interop Layer.

Reading this, I thought that meant that if the Interop layer is on, then the measurements won't work. But if it's off, measuring would continue to work. I also thought the interop layer only turns on when a component does not support the new architecture. My intention is to create a component that only supports the new architecture, so the interop layer should be off.

[sidorchukandrew]

I just found this PR that shows how the slider uses C++ to measure!

[sidorchukandrew]

Since Fabric is the future, documentation on how to implement these shadow modes and measurements, and how to connect it with the library would be immensely helpful! I'm almost tempted to only use the old architecture for now because it's very difficult to determine what the right steps are. Regardless, this is all very exciting stuff!

[cortinico]

Nope we don't have custom C++ documentation at the moment as that's sort of an advanced topic. Documentation is extremely costly to write and can get stale really easy so we focused on the most common scenarios first. As a remediation, you can check how the core components like Switch and others integrate as they all go through custom C++ code.

We hope to have capacity to add further New Architecture documentation in the near future

[HemantRMali]

Hi @cipolleschi and @cortinico,

It has been quite a while since we've been trying to figure out the issue with redux-persist specially with persistStore.

Interestingly, when we run the application in debug mode during development, we never encounter the issue. However, after providing the build to QA following the RN migration, we are experiencing crashes on iOS without any logs.

Here is the store file that we are using in our application:

import { configureStore } from '@reduxjs/toolkit';
import { persistReducer, Persistor, persistStore, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist';
import rootReducer from './rootReducer';
import middlewares, { sagaMiddleware } from './middlewares';
import createPersistConfig from './persistConfig';
import reactotron from '@appName/ReactotronConfig';
import rootSaga from './rootSaga';

import { Store } from 'redux';

let store: Store;
let persistor: Persistor;

const enhancers = (getDefaultEnhancers: any) => {
if (DEV) {
return getDefaultEnhancers().concat(reactotron.createEnhancer());
}
return getDefaultEnhancers();
};

export const generateStore = (secretKey: string | null) => {
// @ts-ignore
const reducer = persistReducer(createPersistConfig(secretKey), rootReducer);
store = configureStore({
reducer,
enhancers,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
immutableCheck: false,
}).concat(middlewares),
});

persistor = persistStore(store); => WE NOTICED A CRASH ON THIS LINE POST MULTIPLE TRIALS AND ERRORS.

sagaMiddleware.run(rootSaga);

return store;
};

export { store, persistor };

Below are the package details that we are using related to redux and react native version:

"dependencies": {
"@reduxjs/toolkit": "^2.1.0",
"react": "18.3.1",
"react-native": "0.77.1",
"react-redux": "^9.1.0",
"redux": "4.2.1",
"redux-axios-middleware": "^4.0.1",
"redux-persist": "^6.0.0",
"redux-remember": "^5.2.0",
"redux-saga": "^1.2.3",
},

"devDependencies": {
"@redux-saga/testing-utils": "^1.1.5",
"reactotron-react-native": "5.1.7",
"reactotron-redux": "3.1.9",
},

We appreciate any support from the community to help fix this issue.

[HemantRMali]

Hi @cortinico

We just figured out the root cause of the issue and wanted to share it here in case anyone else encounters the same scenario.

In the release debug, we noticed the following crash:

libc++abi: terminating due to uncaught exception of type facebook::jsi::JSError: Exception in HostFunction: -[NSNull stringByTrimmingCharactersInSet:]: unrecognized selector sent to instance 0x20b71b910

The root cause was this line:

UrbanAirship.setNamedUser(email ? md5(email.toLowerCase()) : null);

Possibly new architecture requires strict type checking..???

A null value was being passed because the method has the following type options:

static setNamedUser(namedUser: string | null | undefined): void;

However, when we checked this Native Module on the iOS side, it was expecting an NSString, as shown below:

RCT_EXPORT_METHOD(setNamedUser:(NSString *)namedUser) {
    // rest of the code
    namedUser = [namedUser stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
    // rest of the code
}

Since it required a string, I changed it on the React Native side to the following, and it started working without any crashes:

UrbanAirship.setNamedUser(email ? md5(email.toLowerCase()) : "");

I changed it to an empty string, and it worked.

Possibly, the new architecture requires stricter type checking?

cc: @cipolleschi

[HemantRMali]

Hi @cortinico

We just figured out the root cause of the issue and wanted to share it here in case anyone else encounters the same scenario.

In the release debug, we noticed the following crash:

libc++abi: terminating due to uncaught exception of type facebook::jsi::JSError: Exception in HostFunction: -[NSNull stringByTrimmingCharactersInSet:]: unrecognized selector sent to instance 0x20b71b910

The root cause was this line:

UrbanAirship.setNamedUser(email ? md5(email.toLowerCase()) : null);

Possibly new architecture requires strict type checking..???

A null value was being passed because the method has the following type options:

static setNamedUser(namedUser: string | null | undefined): void;

However, when we checked this Native Module on the iOS side, it was expecting an NSString, as shown below:

RCT_EXPORT_METHOD(setNamedUser:(NSString *)namedUser) {
    // rest of the code
    namedUser = [namedUser stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
    // rest of the code
}

Since it required a string, I changed it on the React Native side to the following, and it started working without any crashes:

UrbanAirship.setNamedUser(email ? md5(email.toLowerCase()) : "");

I changed it to an empty string, and it worked.

Possibly, the new architecture requires stricter type checking?

cc: @cipolleschi

I have to consider using https://github.com/urbanairship/react-native-airship instead of older versions of airship.

its "urbanairship-react-native": "^14.7.0" in my project. (Man shrug)

[cipolleschi]

@HemantRMali Yeah, the New Architecture has built on the assumption that Codegen will ensure typesafety. Of course, for a module going through the interop layer, that can't be ensured. Recently, I made some changes in the interop layers to make sure that the old arch semantic is respected in the New Arch, while using Interop Layers.

On which version were you testing?

[HemantRMali]

Hi @cipolleschi , Thanks for your reply.

I am on 0.77.1 version.

[cipolleschi]

Can you try bumping to 0.77.2? I think I fixed already those issues.