Forward port away from deprecated React.ElementRef to React.ComponentRef

- Note Typescript has this chance, Flow does not have ComponentRef type,
  so this is typescript-only and Flow did not need a similar change

Author: mikehardy

packages/react-native-codegen/src/parsers/typescript/components/__test_fixtures__/fixtures.js

@@ -1062,17 +1062,17 @@ export interface ModuleProps extends ViewProps {
 type NativeType = HostComponent<ModuleProps>;
 
  interface NativeCommands {
-   readonly handleRootTag: (viewRef: React.ElementRef<NativeType>, rootTag: RootTag) => void;
-   readonly hotspotUpdate: (viewRef: React.ElementRef<NativeType>, x: Int32, y: Int32) => void;
+   readonly handleRootTag: (viewRef: React.ComponentRef<NativeType>, rootTag: RootTag) => void;
+   readonly hotspotUpdate: (viewRef: React.ComponentRef<NativeType>, x: Int32, y: Int32) => void;
    scrollTo(
-     viewRef: React.ElementRef<NativeType>,
+     viewRef: React.ComponentRef<NativeType>,
      x: Float,
      y: Int32,
      z: Double,
      animated: boolean,
    ): void;
    readonly arrayArgs: (
-    viewRef: React.ElementRef<NativeType>,
+    viewRef: React.ComponentRef<NativeType>,
     booleanArray: ReadOnlyArray<boolean>,
     stringArray: ReadOnlyArray<string>,
     floatArray: ReadOnlyArray<Float>,
@@ -1122,12 +1122,12 @@ export interface ModuleProps extends ViewProps {
 type NativeType = HostComponent<ModuleProps>;
 
 export type ScrollTo = (
-  viewRef: React.ElementRef<NativeType>,
+  viewRef: React.ComponentRef<NativeType>,
   y: Int,
   animated: Boolean,
 ) => Void;
 export type AddOverlays = (
-  viewRef: React.ElementRef<NativeType>,
+  viewRef: React.ComponentRef<NativeType>,
   overlayColorsReadOnly: ReadOnlyArray<string>,
   overlayColorsArray: Array<string>,
   overlayColorsArrayAnnotation: string[],
@@ -1193,7 +1193,7 @@ export interface ModuleNativeState {
 
 type NativeType = HostComponent<ModuleProps>;
 
-export type ScrollTo = (viewRef: React.ElementRef<NativeType>, y: Int, animated: Boolean) => Void;
+export type ScrollTo = (viewRef: React.ComponentRef<NativeType>, y: Int, animated: Boolean) => Void;
 
 interface NativeCommands {
   readonly scrollTo: ScrollTo;
@@ -2184,17 +2184,17 @@ export interface ModuleProps extends ViewProps {
 type NativeType = HostComponent<ModuleProps>;
 
  interface NativeCommands {
-   readonly handleRootTag: (viewRef: React.ElementRef<NativeType>, rootTag: RootTag) => void;
-   readonly hotspotUpdate: (viewRef: React.ElementRef<NativeType>, x: CodegenTypes.Int32, y: CodegenTypes.Int32) => void;
+   readonly handleRootTag: (viewRef: React.ComponentRef<NativeType>, rootTag: RootTag) => void;
+   readonly hotspotUpdate: (viewRef: React.ComponentRef<NativeType>, x: CodegenTypes.Int32, y: CodegenTypes.Int32) => void;
    scrollTo(
-     viewRef: React.ElementRef<NativeType>,
+     viewRef: React.ComponentRef<NativeType>,
      x: CodegenTypes.Float,
      y: CodegenTypes.Int32,
      z: CodegenTypes.Double,
      animated: boolean,
    ): void;
    readonly arrayArgs: (
-    viewRef: React.ElementRef<NativeType>,
+    viewRef: React.ComponentRef<NativeType>,
     booleanArray: ReadOnlyArray<boolean>,
     stringArray: ReadOnlyArray<string>,
     floatArray: ReadOnlyArray<CodegenTypes.Float>,
@@ -2243,12 +2243,12 @@ export interface ModuleProps extends ViewProps {
 type NativeType = HostComponent<ModuleProps>;
 
 export type ScrollTo = (
-  viewRef: React.ElementRef<NativeType>,
+  viewRef: React.ComponentRef<NativeType>,
   y: Int,
   animated: Boolean,
 ) => Void;
 export type AddOverlays = (
-  viewRef: React.ElementRef<NativeType>,
+  viewRef: React.ComponentRef<NativeType>,
   overlayColorsReadOnly: ReadOnlyArray<string>,
   overlayColorsArray: Array<string>,
   overlayColorsArrayAnnotation: string[],
@@ -2310,7 +2310,7 @@ export interface ModuleNativeState {
 
 type NativeType = HostComponent<ModuleProps>;
 
-export type ScrollTo = (viewRef: React.ElementRef<NativeType>, y: Int, animated: Boolean) => Void;
+export type ScrollTo = (viewRef: React.ComponentRef<NativeType>, y: Int, animated: Boolean) => Void;
 
 interface NativeCommands {
   readonly scrollTo: ScrollTo;

packages/react-native-codegen/src/parsers/typescript/components/__tests__/__snapshots__/typescript-component-parser-test.js.snap

@@ -6,11 +6,11 @@ exports[`RN Codegen TypeScript Parser Fails with error message COMMANDS_DEFINED_
 
 exports[`RN Codegen TypeScript Parser Fails with error message COMMANDS_DEFINED_WITH_MISMATCHED_METHOD_NAMES 1`] = `"codegenNativeCommands expected the same supportedCommands specified in the NativeCommands interface: hotspotUpdate, scrollTo"`;
 
-exports[`RN Codegen TypeScript Parser Fails with error message COMMANDS_DEFINED_WITH_NULLABLE_REF 1`] = `"The first argument of method hotspotUpdate must be of type React.ElementRef<>"`;
+exports[`RN Codegen TypeScript Parser Fails with error message COMMANDS_DEFINED_WITH_NULLABLE_REF 1`] = `"The first argument of method hotspotUpdate must be of type React.ElementRef<> or React.ComponentRef<>"`;
 
 exports[`RN Codegen TypeScript Parser Fails with error message COMMANDS_DEFINED_WITHOUT_METHOD_NAMES 1`] = `"codegenNativeCommands must be passed options including the supported commands"`;
 
-exports[`RN Codegen TypeScript Parser Fails with error message COMMANDS_DEFINED_WITHOUT_REF 1`] = `"The first argument of method hotspotUpdate must be of type React.ElementRef<>"`;
+exports[`RN Codegen TypeScript Parser Fails with error message COMMANDS_DEFINED_WITHOUT_REF 1`] = `"The first argument of method hotspotUpdate must be of type React.ElementRef<> or React.ComponentRef<>"`;
 
 exports[`RN Codegen TypeScript Parser Fails with error message NON_OPTIONAL_KEY_WITH_DEFAULT_VALUE 1`] = `"key required_key_with_default must be optional if used with WithDefault<> annotation"`;
 

packages/react-native-codegen/src/parsers/typescript/components/commands.js

@@ -38,11 +38,12 @@ function buildCommandSchemaInternal(
       firstParam.typeAnnotation != null &&
       firstParam.typeAnnotation.type === 'TSTypeReference' &&
       firstParam.typeAnnotation.typeName.left?.name === 'React' &&
-      firstParam.typeAnnotation.typeName.right?.name === 'ElementRef'
+      (firstParam.typeAnnotation.typeName.right?.name === 'ElementRef' ||
+        firstParam.typeAnnotation.typeName.right?.name === 'ComponentRef')
     )
   ) {
     throw new Error(
-      `The first argument of method ${name} must be of type React.ElementRef<>`,
+      `The first argument of method ${name} must be of type React.ElementRef<> or React.ComponentRef<>`,
     );
   }