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 *)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 #import +#import #import #import @@ -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 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)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: '../../',