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.

## Changelog:
[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/Libraries/AppDelegate/RCTLegacyInteropComponents.mm

@@ -1,4 +1,3 @@
-
 /*
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -12,7 +11,7 @@ @implementation RCTLegacyInteropComponents
 
 + (NSArray<NSString *> *)legacyInteropComponents
 {
-  return @[ @"RNTMyLegacyNativeView" ];
+  return @[ @"RNTMyLegacyNativeView", @"RNTMyNativeView" ];
 }
 
 @end

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,10 +106,16 @@ - (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;
   }
 
@@ -119,14 +126,13 @@ - (BOOL)registerComponentIfPossible:(std::string const &)name
     NSString *objcName = [NSString stringWithCString:name.c_str() encoding:NSUTF8StringEncoding];
     klass = self.thirdPartyFabricComponentsProvider.thirdPartyFabricComponents[objcName];
     if (klass) {
-      [self registerComponentViewClass:klass];
+      [self registerComponentViewClass:klass andWarnIfNeeded:isRegisteredInInteropLayer];
       return YES;
     }
   }
 
   // Fallback 3: Try to use Paper Interop.
-  NSString *componentNameString = RCTNSStringFromString(name);
-  if ([RCTLegacyViewManagerInteropComponentView isSupported:componentNameString]) {
+  if (isRegisteredInInteropLayer) {
     RCTLogNewArchitectureValidation(
         RCTNotAllowedInBridgeless,
         self,
@@ -215,4 +221,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,7 +28,10 @@ module.exports = {
   project: {
     ios: {
       sourceDir: '.',
-      unstable_reactLegacyComponentNames: ['RNTMyLegacyNativeView'],
+      unstable_reactLegacyComponentNames: [
+        'RNTMyLegacyNativeView',
+        'RNTMyNativeView',
+      ],
     },
     android: {
       sourceDir: '../../',