Add unstable_reactLegacyComponent to cli-platform-android

[cortinico]

Summary:

This adds the unstable_reactLegacyComponent config key inside the android.project. object, so that users can use the react-native.config.js file to register a list of component they want to use on the New Architecture that are not yet migrated to support Fabric.

I've added the unstable_ prefix as this is most likely going to change, but we'd like to have it out so soon-ish we can ask users to try it and report back if there are blockers.

I've added docs for this field:

An array with a list of Legacy Component Name that you want to be registered with the Fabric Interop Layer. This will allow you to use on the New Architecture, libreries that are legacy and haven't been migrated yet.
The list should contain the name of the components, as they're registered in the ViewManagers (i.e. just "Button").

Test Plan:

I've tested this on the latest nightly and I was able to build correctly.

[thymikee]

Does this work with 3rd party components from node_modules as well?

[cortinico]

Does this work with 3rd party components from node_modules as well?

Yes it will work with 3rd party components as well, as long as the user knows the name of the components.

We could make it more smart so that libraries can expose a list of components names, but we think this is going to be a more "advanced" feature at least for now, so we assume the users know which components they want to register.

On top of this, unregistered component which are not fabric compatible show a Redbox that says "The component 'XYZ' is not Fabric Compatible yet". That's the name that needs to be registered here.

[thymikee]

Ok. Once that's in, we could improve the error message to include adjusting the react-native.config.js, at least for non-expo projects

[cortinico]

Ok. Once that's in, we could improve the error message to include adjusting the react-native.config.js, at least for non-expo projects

You mean for the "Unregistered components"? We can totally do so

[adamTrz]

Suggested change

	This will allow you to use on the New Architecture, libreries that are legacy and haven't been migrated yet.
	This will allow you to use on the New Architecture, libraries that are legacy and haven't been migrated yet.

;)

[adamTrz]

Code looks good 💪
Is there a way to test it locally?

[cortinico]

Code looks good 💪 Is there a way to test it locally?

To test locally:

1. Create a new RN project locally using the latest nightly (npx react-native@latest init RNNightly --version nightly)
2. Make sure the project is using the CLI version from this PR
3. Add a Native Component as described here called RCTImageView https://reactnative.dev/docs/native-components-android
4. Create a screen using <RCTImageView>
5. Turn on New Architecture
6. Verifies that the app builds but the component renders as red on screen
7. Add the following to the react-native.config.js

module.exports = {
  project: {
    android: {
      unstable_reactLegacyComponent: [
        'RCTImageView'
      ]
    },
  },
};

8. Verify that you can see the component rendered correctly.

[cipolleschi]

note: for iOS, we just need these same lines in the iOS project above (Line 149).

The CLI doesn't have to do anything else for iOS, we just need the same key structure.

I can do it in a separate PR, if you prefer.

[adamTrz]

To test locally:
...
7. Add the following to the react-native.config.js

module.exports = {
  platforms: {
    android: {
      unstable_reactLegacyComponent: [
        'RCTImageView'
      ]
    },
  },
};

8. Verify that you can see the component rendered correctly.

Thanks @cortinico :)

Got an error when using platforms:

error Failed to load configuration of your project.
Config Validation Error: "platforms.android.unstable_reactLegacyComponentNames" is not allowed
    at readConfigFromDisk [...]

But when I've switched to project from platform it works and Image is rendered 🎉

[affansk]

@cortinico i am getting this error, i tried both platform and project.

Config Validation Error: "platform.ios.unstable_reactLegacyComponent" is not allowed
Config Validation Error: "project.ios.unstable_reactLegacyComponent" is not allowed

platforms: {
ios: {
unstable_reactLegacyComponentNames: ['BVLinearGradient'],
},
android: {},
},
i am testing on version : "0.72.0-rc.5",

[cortinico]

platforms: {

As suggested in this thread, you should use project and not platform. I've updated my snippet