Migrate dev method codegenNativeComponent to be Bridgeless compatible

Summary: Changelog: [Internal] Migrate dev method codegenNativeComponent to be Bridgeless compatible Reviewed By: RSNara Differential Revision: D34513074 fbshipit-source-id: d71fbf066453ac8c407d0cf41c2dc7fa80c87688
facebook · Mar 1, 2022 · 3eae11e · 3eae11e
1 parent 34d3373
commit 3eae11e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 37 deletions.
diff --git a/Libraries/Utilities/__tests__/codegenNativeComponent-test.js b/Libraries/Utilities/__tests__/codegenNativeComponent-test.js
@@ -23,7 +23,7 @@ jest.mock(
   () => componentName => componentName,
 );
 jest
-  .spyOn(UIManager, 'getViewManagerConfig')
+  .spyOn(UIManager, 'hasViewManagerConfig')
   .mockImplementation(componentName =>
     componentName.includes('ComponentNameDoesNotExist') ? false : true,
   );

diff --git a/Libraries/Utilities/codegenNativeComponent.js b/Libraries/Utilities/codegenNativeComponent.js
@@ -24,21 +24,36 @@ type Options = $ReadOnly<{|
 
 export type NativeComponentType<T> = HostComponent<T>;
 
+// If this function runs then that means the view configs were not
+// generated at build time using `GenerateViewConfigJs.js`. Thus
+// we need to `requireNativeComponent` to get the view configs from view managers.
+// `requireNativeComponent` is not available in Bridgeless mode.
+// e.g. This function runs at runtime if `codegenNativeComponent` was not called
+// from a file suffixed with NativeComponent.js.
 function codegenNativeComponent<Props>(
   componentName: string,
   options?: Options,
 ): NativeComponentType<Props> {
+  const errorMessage =
+    "Native Component '" +
+    componentName +
+    "' that calls codegenNativeComponent was not code generated at build time. Please check its definition.";
+  if (global.RN$Bridgeless === true) {
+    console.error(errorMessage);
+  } else {
+    console.warn(errorMessage);
+  }
   let componentNameInUse =
     options && options.paperComponentName != null
       ? options.paperComponentName
       : componentName;
 
   if (options != null && options.paperComponentNameDeprecated != null) {
-    if (UIManager.getViewManagerConfig(componentName)) {
+    if (UIManager.hasViewManagerConfig(componentName)) {
       componentNameInUse = componentName;
     } else if (
       options.paperComponentNameDeprecated != null &&
-      UIManager.getViewManagerConfig(options.paperComponentNameDeprecated)
+      UIManager.hasViewManagerConfig(options.paperComponentNameDeprecated)
     ) {
       componentNameInUse = options.paperComponentNameDeprecated;
     } else {
@@ -50,10 +65,6 @@ function codegenNativeComponent<Props>(
     }
   }
 
-  // If this function is run at runtime then that means the view configs were not
-  // generated with the view config babel plugin, so we need to require the native component.
-  //
-  // This will be useful during migration, but eventually this will error.
   return (requireNativeComponent<Props>(
     componentNameInUse,
   ): HostComponent<Props>);

diff --git a/packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js b/packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js
@@ -141,22 +141,12 @@ const DeprecatedComponentNameCheckTemplate = ({
   paperComponentNameDeprecated: string,
 }) =>
   `
-if (global.RN$Bridgeless) {
-  if (UIManager.hasViewManagerConfig('${componentName}')) {
-    nativeComponentName = '${componentName}';
-  } else if (UIManager.hasViewManagerConfig('${paperComponentNameDeprecated}')) {
-    nativeComponentName = '${paperComponentNameDeprecated}';
-  } else {
-    throw new Error('Failed to find native component for either "${componentName}" or "${paperComponentNameDeprecated}", with SVC enabled.');
-  }
+if (UIManager.hasViewManagerConfig('${componentName}')) {
+  nativeComponentName = '${componentName}';
+} else if (UIManager.hasViewManagerConfig('${paperComponentNameDeprecated}')) {
+  nativeComponentName = '${paperComponentNameDeprecated}';
 } else {
-  if (UIManager.getViewManagerConfig('${componentName}')) {
-    nativeComponentName = '${componentName}';
-  } else if (UIManager.getViewManagerConfig('${paperComponentNameDeprecated}')) {
-    nativeComponentName = '${paperComponentNameDeprecated}';
-  } else {
-    throw new Error('Failed to find native component for either "${componentName}" or "${paperComponentNameDeprecated}", with SVC disabled.');
-  }
+  throw new Error('Failed to find native component for either "${componentName}" or "${paperComponentNameDeprecated}"');
 }
 `.trim();
 

diff --git a/...degen/src/generators/components/__tests__/__snapshots__/GenerateViewConfigJs-test.js.snap b/...degen/src/generators/components/__tests__/__snapshots__/GenerateViewConfigJs-test.js.snap
@@ -1070,22 +1070,12 @@ const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/
 const {UIManager} = require(\\"react-native\\")
 
 let nativeComponentName = 'NativeComponentName';
-if (global.RN$Bridgeless) {
-  if (UIManager.hasViewManagerConfig('NativeComponentName')) {
-    nativeComponentName = 'NativeComponentName';
-  } else if (UIManager.hasViewManagerConfig('DeprecatedNativeComponentName')) {
-    nativeComponentName = 'DeprecatedNativeComponentName';
-  } else {
-    throw new Error('Failed to find native component for either \\"NativeComponentName\\" or \\"DeprecatedNativeComponentName\\", with SVC enabled.');
-  }
+if (UIManager.hasViewManagerConfig('NativeComponentName')) {
+  nativeComponentName = 'NativeComponentName';
+} else if (UIManager.hasViewManagerConfig('DeprecatedNativeComponentName')) {
+  nativeComponentName = 'DeprecatedNativeComponentName';
 } else {
-  if (UIManager.getViewManagerConfig('NativeComponentName')) {
-    nativeComponentName = 'NativeComponentName';
-  } else if (UIManager.getViewManagerConfig('DeprecatedNativeComponentName')) {
-    nativeComponentName = 'DeprecatedNativeComponentName';
-  } else {
-    throw new Error('Failed to find native component for either \\"NativeComponentName\\" or \\"DeprecatedNativeComponentName\\", with SVC disabled.');
-  }
+  throw new Error('Failed to find native component for either \\"NativeComponentName\\" or \\"DeprecatedNativeComponentName\\"');
 }
 
 export const __INTERNAL_VIEW_CONFIG = {