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

[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.

[Zach-Dean-Attractions-io]

I have fixed it!

The issue was with require.resolve in the script react-native/scripts/codegen/generate-artifacts-executor.js, which we figured out previously.

It was failing for the library because of the export configuration in the library's package.json

"exports": {
  ".": {
    "import": {
      "types": "./lib/typescript/module/src/index.d.ts",
      "default": "./lib/module/index.js"
    },
    "require": {
      "types": "./lib/typescript/commonjs/src/index.d.ts",
      "default": "./lib/commonjs/index.js"
    }
  }
},

If I delete this code then it works as expected. (I note that both react-native-svg and react-native-webview don't specify this key. Also this means that using the local registry wasn't part of the issue.

I also then need to add

+ "types": "./lib/typescript/commonjs/src/index.d.ts",

into the package.json file otherwise when importing the module in the App.tsx file as import { FabIosTestingView } from 'fab-ios-testing';, the user sees an error

Could not find a declaration file for module 'fabric-native-component-test'. 'node_modules/fabric-native-component-test/lib/commonjs/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/fabric-native-component-test` if it exists or add a new declaration (.d.ts) file containing `declare module 'fabric-native-component-test';`

There may be a better fix for this but at least the root cause is found.

So to summarise:

1. To fix the issue with iOS falling into the legacy codepath the package.json file needs modification. The removal of the exports key is so that the codegen script can resolve the library and the addition of the types key is so the user of the library can use the types the library exposes.

-"exports": {
-  ".": {
-    "import": {
-      "types": "./lib/typescript/module/src/index.d.ts",
-      "default": "./lib/module/index.js"
-    },
-    "require": {
-      "types": "./lib/typescript/commonjs/src/index.d.ts",
-      "default": "./lib/commonjs/index.js"
-    }
-  }
-},
+ "types": "./lib/typescript/commonjs/src/index.d.ts",

2. To remove the warning for Android and iOS (Although I wonder if the above might well solve this too)

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)

The package.json needs modification

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

[cipolleschi]

Great investigation @Zach-Dean-Attractions-io!
Do you mind copying these results, linking to this discussions, opening an issue in the create-react-native-library repository so that the maintainers can investigate further and integrate your findings in their code?

[Zach-Dean-Attractions-io]

Thanks for your help @cipolleschi.

I have an open issue here.

[Zach-Dean-Attractions-io]

Hi @cipolleschi

The recommended solution was the following:

"exports": {
    ".": {
      "import": {
        "types": "./lib/typescript/module/src/index.d.ts",
        "default": "./lib/module/index.js"
      },
      "require": {
        "types": "./lib/typescript/commonjs/src/index.d.ts",
        "default": "./lib/commonjs/index.js"
      }
    },
+   "./package.json": "./package.json"
  }

as opposed to removing the exports block entirely.