iOS standalone app falls into legacy architecture codepath using published React Native library exposing a Fabric Native Component

[Zach-Dean-Attractions-io]

I have created a React Native library, using the Fabric Native Component template, which exposes a coloured square view:

1. npx create-react-native-library@latest FabricNativeComponentTest
2. npm package name: fabric-native-component-test
3. type of library: Fabric view

Firstly, there is a bug in the file ios/FabricNativeComponentTestViewManager.mm, which is a file required by the legacy architecture. The code exports a view property color but a UIView doesn't have a color property (it should be backgroundColor). (I have raised this as a bug callstack/react-native-builder-bob#788 and asked about the issue I go on to explain below but have had no traction)

- (UIView *)view
{
  return [[UIView alloc] init];
}

RCT_EXPORT_VIEW_PROPERTY(color, NSString)

To fix this file I have modified it as so:

+ #import <React/RCTConvert.h>

- RCT_EXPORT_VIEW_PROPERTY(color, NSString)
+ RCT_CUSTOM_VIEW_PROPERTY(color, UIColor, UIView)
+{
+  if (json) {
+      [view setBackgroundColor:[RCTConvert UIColor:json]];
+    } else {
+      [view setBackgroundColor:nil];
+    }
+}

To check which codepath the app is falling into I have modified the file ios/FabricNativeComponentTestView.mm (the new architecture) and hardcoded the colour of the view to be red.

- [_view setBackgroundColor:[self hexStringToColor:colorToConvert]];
+ [_view setBackgroundColor:[UIColor redColor]];

Then I've also modified the file ios/FabricNativeComponentTestViewManager.mm (the legacy architecture) and hardcoded the colour of the view to be blue.

- [view setBackgroundColor:[RCTConvert UIColor:json]];
+ [view setBackgroundColor:[UIColor blueColor]];

If I run the example app included in the library project I correctly get a red square as the code is falling into the new architecture codepath as expected.

I've then published this library to a local npm registry using npm publish --registry http://localhost:4873/ and also created a standalone React Native app running version 0.78.0 of React Native using the command npx @react-native-community/cli@latest init standaloneApp.

Within the standalone app I have:

1. Installed the package npm install fabric-native-component-test --registry http://localhost:4873/
2. Ran the command cd ios && bundle install && bundle exec pod install
3. Modified the App.tsx file to:

import { View, StyleSheet, Text } from 'react-native';
import { FabricNativeComponentTestView } from 'fabric-native-component-test';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>My Standalone App</Text>
      <FabricNativeComponentTestView color="#32a852" style={styles.box} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

4. Ran the iOS app using npx react-native run-ios

I then see a blue square when I expect to see a red square. If I look in the logs in the developer tools I see the following, not sure if this is a red-herring or not, but I don't see this in the example app.

Codegen didn't run for FabricNativeComponentTestView. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code. Error Component Stack:
    at App (App.tsx:8:8)
    at RCTView (<anonymous>)
    at View (View.js:32:34)
    at RCTView (<anonymous>)
    at View (View.js:32:34)
    at AppContainer (AppContainer-dev.js:87:11)
    at standaloneApp(RootComponent) (getCachedComponentWithDebugName.js:26:42)

Does anyone know what I need to do so that the standalone app works correctly?

[cortinico]

cc @cipolleschi

[cipolleschi]

ah... what's the path in that case? If we arrive there, it's because:

• require.resolve can't find the library's package.json
• The library is not in a local path, absolute or relative, from the app.

It might make sense because you are publishing it in a local npm repository... could it be that require.resolve doesn't see it?

[Zach-Dean-Attractions-io]

The path resolves to fabric-native-component-test/package.json.

Therefore, it is running require.resolve(fabric-native-component-test/package.json) and I think this will be from the directory of the pod file which will be standaloneApp/ios but it needs to be searching in standaloneApp/node_modules.

There is a comment in that file:

// require.resolve fails if the dependency is a local node module.

I have hardcoded the full path to the package.json file for the library fabric-native-component-test in that section of code. It does seem to generate the file RCTThirdPartyComponentsProvider.mm correctly now and is found by the codegen process during pod install:

[Codegen] Found fabric-native-component-test

However, the native component isn't displaying and I still see the Codegen didn't run for FabricNativeComponentTestView error in the logs.

(Although I guess it's no longer falling into the legacy codepath now, else the view would display as it was prior)

[Zach-Dean-Attractions-io]

I have also tried a fresh repository and publishing the package to NPM (as opposed to Verdaccio on my local machine). In this case I get the same issue as when I've hard-coded the path above. The native component just doesn't display at all. There must be another issue somewhere but I'm not sure where.

Edit:

The native component just doesn't display at all

I think this was because I removed the styling from the component and this removing the width/height attributes 🙈

[cipolleschi]

Have you tried to look at how other React Native libraries are configured? For example, react-native-svg is an OSS library with several Fabric Components. I bet we are missing something trivial, and perhaps diffing the two will help figure out what.

[Zach-Dean-Attractions-io]

I noticed yesterday that on Android the error message about Codegen not running also appeared in the logs. I didn't notice this originally because on Android there is a single codepath for displaying the view and it just worked whereas on iOS there is two and (somewhat fortunately) the legacy codepath has a bug in it.

Codegen didn't run for FabricNativeComponentTestView. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code. Error Component Stack:
    at App (App.tsx:8:8)
    at RCTView (<anonymous>)
    at View (View.js:32:34)
    at RCTView (<anonymous>)
    at View (View.js:32:34)
    at AppContainer (AppContainer-dev.js:87:11)
    at standaloneApp(RootComponent) (getCachedComponentWithDebugName.js:26:42)

I believe I've solved this issue on Android & iOS by adding

+ "react-native": "src/index.tsx",

into the package.json for the library project. I believe this is required for auto-linking but I might be wrong on that one. Both react-native-svg and react-native-webview declare this in their package.json files.

The create-react-native-library template probably doesn't include this because it is manually linking to the example app here.

However, it hasn't fixed my iOS issue so I might need some other configurations to fix that.

Edit: Well that issue is still coming from codegen not running properly and not populating RCTThirdPartyComponentsProvider.mm. If I hard-code that file to return my component then I do get the red square as expected. So I just need to figure out why codegen isn't finding the library even when being installed from NPM.