From a702d0515f9005714da52cda7f6851e06b4103da Mon Sep 17 00:00:00 2001
From: Riccardo Cipolleschi <cipolleschi@meta.com>
Date: Tue, 27 Jun 2023 08:45:10 -0700
Subject: [PATCH] Warn users when a component is registered in Rendere and in
 the interop (#38089)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/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
---
 .../AppDelegate/RCTLegacyInteropComponents.mm |  3 +--
 .../Mounting/RCTComponentViewFactory.mm       | 27 ++++++++++++++++---
 packages/rn-tester/react-native.config.js     |  5 +++-
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/react-native/Libraries/AppDelegate/RCTLegacyInteropComponents.mm b/packages/react-native/Libraries/AppDelegate/RCTLegacyInteropComponents.mm
index 549e41a9b91b5f..a330712cae3a7c 100644
--- a/packages/react-native/Libraries/AppDelegate/RCTLegacyInteropComponents.mm
+++ b/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
diff --git a/packages/react-native/React/Fabric/Mounting/RCTComponentViewFactory.mm b/packages/react-native/React/Fabric/Mounting/RCTComponentViewFactory.mm
index 8ed6f9a8319da8..71a78d28f79379 100644
--- a/packages/react-native/React/Fabric/Mounting/RCTComponentViewFactory.mm
+++ b/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
diff --git a/packages/rn-tester/react-native.config.js b/packages/rn-tester/react-native.config.js
index b3ad6adb66f61b..1fbe74600b1c55 100644
--- a/packages/rn-tester/react-native.config.js
+++ b/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: '../../',