feat: Deprecate unstable_reactLegacyComponentNames (#2264)

* Deprecate unstable_reactLegacyComponentNames

* add warning and todos for removal

* add ios warning as well

---------

Co-authored-by: Michał Pierzchała <thymikee@gmail.com>

Author: cortinico

docs/projects.md

@@ -68,7 +68,6 @@ The following settings are available on iOS and Android:
 type IOSProjectParams = {
   sourceDir?: string;
   watchModeCommandParams?: string[];
-  unstable_reactLegacyComponentNames?: string[] | null;
   automaticPodsInstallation?: boolean;
 };
 
@@ -79,7 +78,6 @@ type AndroidProjectParams = {
   packageName?: string;
   dependencyConfiguration?: string;
   watchModeCommandParams?: string[];
-  unstable_reactLegacyComponentNames?: string[] | null;
 };
 ```
 
@@ -94,7 +92,8 @@ Array of strings that will be passed to the `npx react-native run-ios` command w
 
 #### project.ios.unstable_reactLegacyComponentNames
 
-> Note: Only applicable when new architecture is turned on.
+> [!CAUTION]
+> Deprecated in React Native 0.74, where this behavior is detected automatically and this config does nothing. You can safely remove it from your project. 
 
 Please note that this is part of the **Unstable Fabric Interop Layer**, and might be subject to breaking change in the future,
 hence the `unstable_` prefix.
@@ -104,6 +103,8 @@ This will allow you to use libraries that haven't been migrated yet on the New A
 
 The list should contain the name of the components, as they're registered in the ViewManagers (i.e. just `"Button"`).
 
+Since React Native 0.74, this property is ignored as the Interop Layer is **Automatic**, you don't need to register the Legacy Components anymore and they will be discovered automatically.
+
 #### project.ios.automaticPodsInstallation
 
 A boolean value to determine if you want to automatically install CocoaPods when running `run-ios` or `build-ios` command when:
@@ -141,7 +142,8 @@ Array of strings that will be passed to the `npx react-native run-android` comma
 
 #### project.android.unstable_reactLegacyComponentNames
 
-> Note: Only applicable when new architecture is turned on.
+> [!CAUTION]
+> Deprecated in React Native 0.74, where this behavior is detected automatically and this config does nothing. You can safely remove it from your project. 
 
 Please note that this is part of the **Unstable Fabric Interop Layer**, and might be subject to breaking change in the future,
 hence the `unstable_` prefix.
@@ -151,6 +153,8 @@ This will allow you to use libraries that haven't been migrated yet on the New A
 
 The list should contain the name of the components, as they're registered in the ViewManagers (i.e. just `"Button"`).
 
+Since React Native 0.74, this property is ignored as the Interop Layer is **Automatic**, you don't need to register the Legacy Components anymore and they will be discovered automatically.
+
 ### platforms
 
 A object with platforms defined inside a project. You can check the format and options available [`here`](platforms.md#platform-interface)

packages/cli-config/src/schema.ts

@@ -152,10 +152,11 @@ export const projectConfig = t
           .object({
             sourceDir: t.string(),
             watchModeCommandParams: t.array().items(t.string()),
+            // @todo remove for RN 0.75
             unstable_reactLegacyComponentNames: t
               .array()
               .items(t.string())
-              .default([]),
+              .optional(),
             automaticPodsInstallation: t.bool().default(false),
           })
           .default({}),
@@ -168,10 +169,11 @@ export const projectConfig = t
             packageName: t.string(),
             dependencyConfiguration: t.string(),
             watchModeCommandParams: t.array().items(t.string()),
+            // @todo remove for RN 0.75
             unstable_reactLegacyComponentNames: t
               .array()
               .items(t.string())
-              .default([]),
+              .optional(),
           })
           .default({}),
       })

packages/cli-platform-android/native_modules.gradle

@@ -142,7 +142,6 @@ class ReactNativeModules {
   private String packageName
   private File root
   private ArrayList<HashMap<String, String>> reactNativeModules
-  private ArrayList<String> unstable_reactLegacyComponentNames
   private HashMap<String, ArrayList> reactNativeModulesBuildVariants
   private String reactNativeVersion
 
@@ -157,7 +156,6 @@ class ReactNativeModules {
     this.reactNativeModules = nativeModules
     this.reactNativeModulesBuildVariants = reactNativeModulesBuildVariants
     this.packageName = androidProject["packageName"]
-    this.unstable_reactLegacyComponentNames = androidProject["unstable_reactLegacyComponentNames"]
     this.reactNativeVersion = reactNativeVersion
   }
 
@@ -296,7 +294,6 @@ class ReactNativeModules {
 
   void generateRncliCpp(File outputDir, String generatedFileName, String generatedFileContentsTemplate) {
     ArrayList<HashMap<String, String>> packages = this.reactNativeModules
-    ArrayList<String> unstable_reactLegacyComponentNames = this.unstable_reactLegacyComponentNames
     String rncliCppIncludes = ""
     String rncliCppModuleProviders = ""
     String rncliCppComponentDescriptors = ""
@@ -333,16 +330,6 @@ class ReactNativeModules {
       }.join("\n")
     }
 
-    rncliReactLegacyComponentDescriptors = unstable_reactLegacyComponentNames.collect {
-      "  providerRegistry->add(concreteComponentDescriptorProvider<UnstableLegacyViewManagerInteropComponentDescriptor<${it}>>());"
-    }.join("\n")
-    rncliReactLegacyComponentNames = unstable_reactLegacyComponentNames.collect {
-      "extern const char ${it}[] = \"${it}\";"
-    }.join("\n")
-    if (unstable_reactLegacyComponentNames && unstable_reactLegacyComponentNames.size() > 0) {
-      rncliCppIncludes += "\n#include <react/renderer/components/legacyviewmanagerinterop/UnstableLegacyViewManagerInteropComponentDescriptor.h>"
-    }
-
     String generatedFileContents = generatedFileContentsTemplate
       .replace("{{ rncliCppIncludes }}", rncliCppIncludes)
       .replace("{{ rncliCppModuleProviders }}", rncliCppModuleProviders)

packages/cli-platform-android/src/config/index.ts

@@ -24,7 +24,7 @@ import {
 import {findLibraryName} from './findLibraryName';
 import {findComponentDescriptors} from './findComponentDescriptors';
 import {findBuildGradle} from './findBuildGradle';
-import {CLIError} from '@react-native-community/cli-tools';
+import {CLIError, logger} from '@react-native-community/cli-tools';
 import getMainActivity from './getMainActivity';
 
 /**
@@ -68,6 +68,13 @@ export function projectConfig(
     : packageName;
   const mainActivity = getMainActivity(manifestPath || '') ?? '';
 
+  // @todo remove for RN 0.75
+  if (userConfig.unstable_reactLegacyComponentNames) {
+    logger.warn(
+      'The "project.android.unstable_reactLegacyComponentNames" config option is not necessary anymore for React Native 0.74 and does nothing. Please remove it from the "react-native.config.js" file.',
+    );
+  }
+
   return {
     sourceDir,
     appName,
@@ -76,8 +83,8 @@ export function projectConfig(
     mainActivity,
     dependencyConfiguration: userConfig.dependencyConfiguration,
     watchModeCommandParams: userConfig.watchModeCommandParams,
-    unstable_reactLegacyComponentNames:
-      userConfig.unstable_reactLegacyComponentNames,
+    // @todo remove for RN 0.75
+    unstable_reactLegacyComponentNames: undefined,
   };
 }
 

packages/cli-platform-apple/src/config/index.ts

@@ -18,7 +18,7 @@ import {
   IOSProjectConfig,
   IOSDependencyConfig,
 } from '@react-native-community/cli-types';
-import {CLIError} from '@react-native-community/cli-tools';
+import {CLIError, logger} from '@react-native-community/cli-tools';
 import {BuilderCommand} from '../types';
 
 /**
@@ -47,6 +47,13 @@ export const getProjectConfig =
 
     const xcodeProject = findXcodeProject(fs.readdirSync(sourceDir));
 
+    // @ts-ignore @todo remove for RN 0.75
+    if (userConfig.unstable_reactLegacyComponentNames) {
+      logger.warn(
+        'The "project.ios.unstable_reactLegacyComponentNames" config option is not necessary anymore for React Native 0.74 and does nothing. Please remove it from the "react-native.config.js" file.',
+      );
+    }
+
     return {
       sourceDir,
       watchModeCommandParams: userConfig.watchModeCommandParams,

packages/cli-types/src/android.ts

@@ -6,6 +6,7 @@ export interface AndroidProjectConfig {
   mainActivity: string;
   dependencyConfiguration?: string;
   watchModeCommandParams?: string[];
+  // @todo remove for RN 0.75
   unstable_reactLegacyComponentNames?: string[] | null;
 }
 
@@ -16,6 +17,7 @@ export type AndroidProjectParams = {
   packageName?: string;
   dependencyConfiguration?: string;
   watchModeCommandParams?: string[];
+  // @todo remove for RN 0.75
   unstable_reactLegacyComponentNames?: string[] | null;
 };