diff --git a/packages/react-native/React/Fabric/Mounting/RCTComponentViewFactory.mm b/packages/react-native/React/Fabric/Mounting/RCTComponentViewFactory.mm index 0fe7f13d286..caa531ce155 100644 --- a/packages/react-native/React/Fabric/Mounting/RCTComponentViewFactory.mm +++ b/packages/react-native/React/Fabric/Mounting/RCTComponentViewFactory.mm @@ -9,6 +9,7 @@ #import #import +#import #import #import @@ -105,16 +106,21 @@ static Class RCTComponentViewClassWithName(const char 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 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 @@ static Class RCTComponentViewClassWithName(const char return _providerRegistry.createComponentDescriptorRegistry(parameters); } +#pragma mark - Private + +- (void)registerComponentViewClass:(Class)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 845ae99d8cd..1fbe74600b1 100644 --- a/packages/rn-tester/react-native.config.js +++ b/packages/rn-tester/react-native.config.js @@ -28,6 +28,13 @@ module.exports = { project: { ios: { sourceDir: '.', + unstable_reactLegacyComponentNames: [ + 'RNTMyLegacyNativeView', + 'RNTMyNativeView', + ], + }, + android: { + sourceDir: '../../', }, }, };