Warn users when a component is registered in Rendere and in the inter…

…op (#38089)

Summary:
Pull Request resolved: #38089

This change add a warning if a component is registered in both the New Renderer and in the Interop layer.

This can help users migrating their components once the library has been migrated.

[iOS][Added] - Add warning to help users migrate away from the interop layer.

Reviewed By: cortinico

Differential Revision: D47053556

fbshipit-source-id: cc2ba09db16aaa370947a77173b6ea6a0acfa519

packages/react-native/React/Fabric/Mounting/RCTComponentViewFactory.mm

@@ -9,6 +9,7 @@
 
 #import <React/RCTAssert.h>
 #import <React/RCTConversions.h>
+#import <React/RCTLog.h>
 
 #import <butter/map.h>
 #import <butter/set.h>
@@ -105,16 +106,21 @@ - (BOOL)registerComponentIfPossible:(std::string const &)name
     return YES;
   }
 
+  // Paper name: we prepare this variables to warn the user
+  // when the component is registered in both Fabric and in the
+  // interop layer, so they can remove that
+  NSString *componentNameString = RCTNSStringFromString(name);
+  BOOL isRegisteredInInteropLayer = [RCTLegacyViewManagerInteropComponentView isSupported:componentNameString];
+
   // Fallback 1: Call provider function for component view class.
   Class<RCTComponentViewProtocol> klass = RCTComponentViewClassWithName(name.c_str());
   if (klass) {
-    [self registerComponentViewClass:klass];
+    [self registerComponentViewClass:klass andWarnIfNeeded:isRegisteredInInteropLayer];
     return YES;
   }
 
   // Fallback 2: Try to use Paper Interop.
-  NSString *componentNameString = RCTNSStringFromString(name);
-  if ([RCTLegacyViewManagerInteropComponentView isSupported:componentNameString]) {
+  if (isRegisteredInInteropLayer) {
     RCTLogNewArchitectureValidation(
         RCTNotAllowedInBridgeless,
         self,
@@ -203,4 +209,17 @@ - (RCTComponentViewDescriptor)createComponentViewWithComponentHandle:(facebook::
   return _providerRegistry.createComponentDescriptorRegistry(parameters);
 }
 
+#pragma mark - Private
+
+- (void)registerComponentViewClass:(Class<RCTComponentViewProtocol>)componentViewClass
+                   andWarnIfNeeded:(BOOL)isRegisteredInInteropLayer
+{
+  [self registerComponentViewClass:componentViewClass];
+  if (isRegisteredInInteropLayer) {
+    RCTLogWarn(
+        @"Component with class %@ has been registered in both the New Architecture Renderer and in the Interop Layer.\nPlease remove it from the Interop Layer",
+        componentViewClass);
+  }
+}
+
 @end

packages/rn-tester/react-native.config.js

@@ -28,6 +28,13 @@ module.exports = {
   project: {
     ios: {
       sourceDir: '.',
+      unstable_reactLegacyComponentNames: [
+        'RNTMyLegacyNativeView',
+        'RNTMyNativeView',
+      ],
+    },
+    android: {
+      sourceDir: '../../',
     },
   },
 };