Add HostComponent type to ReactNative (#16898)

* Add HostComponent type to ReactNative

* Use type alias imports instead of wildcard

* Fix forgotten Object in measureLayout type

packages/react-native-renderer/src/NativeMethodsMixin.js

@@ -161,7 +161,7 @@ export default function(
     measureLayout: function(
       relativeToNativeNode: number | Object,
       onSuccess: MeasureLayoutOnSuccessCallback,
-      onFail: () => void /* currently unused */,
+      onFail?: () => void /* currently unused */,
     ) {
       let maybeInstance;
 

packages/react-native-renderer/src/ReactFabricHostConfig.js

@@ -11,7 +11,7 @@ import type {
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
-  NativeMethodsMixinType,
+  NativeMethods,
   ReactNativeBaseComponentViewConfig,
   ReactNativeResponderEvent,
   ReactNativeResponderContext,
@@ -151,9 +151,9 @@ class ReactFabricHostComponent {
   }
 
   measureLayout(
-    relativeToNativeNode: number | Object,
+    relativeToNativeNode: number | ReactFabricHostComponent,
     onSuccess: MeasureLayoutOnSuccessCallback,
-    onFail: () => void /* currently unused */,
+    onFail?: () => void /* currently unused */,
   ) {
     if (
       typeof relativeToNativeNode === 'number' ||
@@ -186,7 +186,7 @@ class ReactFabricHostComponent {
 }
 
 // eslint-disable-next-line no-unused-expressions
-(ReactFabricHostComponent.prototype: NativeMethodsMixinType);
+(ReactFabricHostComponent.prototype: NativeMethods);
 
 export * from 'shared/HostConfigWithNoMutation';
 export * from 'shared/HostConfigWithNoHydration';

packages/react-native-renderer/src/ReactNativeComponent.js

@@ -12,7 +12,7 @@ import type {
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
-  NativeMethodsMixinType,
+  NativeMethods,
   ReactNativeBaseComponentViewConfig,
 } from './ReactNativeTypes';
 
@@ -172,7 +172,7 @@ export default function(
     measureLayout(
       relativeToNativeNode: number | Object,
       onSuccess: MeasureLayoutOnSuccessCallback,
-      onFail: () => void /* currently unused */,
+      onFail?: () => void /* currently unused */,
     ): void {
       let maybeInstance;
 
@@ -295,7 +295,7 @@ export default function(
   }
 
   // eslint-disable-next-line no-unused-expressions
-  (ReactNativeComponent.prototype: NativeMethodsMixinType);
+  (ReactNativeComponent.prototype: NativeMethods);
 
   return ReactNativeComponent;
 }

packages/react-native-renderer/src/ReactNativeFiberHostComponent.js

@@ -11,7 +11,7 @@ import type {
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
-  NativeMethodsMixinType,
+  NativeMethods,
   ReactNativeBaseComponentViewConfig,
 } from './ReactNativeTypes';
 import type {Instance} from './ReactNativeHostConfig';
@@ -72,21 +72,25 @@ class ReactNativeFiberHostComponent {
   }
 
   measureLayout(
-    relativeToNativeNode: number | Object,
+    relativeToNativeNode: number | ReactNativeFiberHostComponent,
     onSuccess: MeasureLayoutOnSuccessCallback,
-    onFail: () => void /* currently unused */,
+    onFail?: () => void /* currently unused */,
   ) {
-    let relativeNode;
+    let relativeNode: ?number;
 
     if (typeof relativeToNativeNode === 'number') {
       // Already a node handle
       relativeNode = relativeToNativeNode;
     } else if (relativeToNativeNode._nativeTag) {
       relativeNode = relativeToNativeNode._nativeTag;
     } else if (
+      /* $FlowFixMe canonical doesn't exist on the node.
+       I think this branch is dead and will remove it in a followup */
       relativeToNativeNode.canonical &&
       relativeToNativeNode.canonical._nativeTag
     ) {
+      /* $FlowFixMe canonical doesn't exist on the node.
+       I think this branch is dead and will remove it in a followup */
       relativeNode = relativeToNativeNode.canonical._nativeTag;
     }
 
@@ -137,6 +141,6 @@ class ReactNativeFiberHostComponent {
 }
 
 // eslint-disable-next-line no-unused-expressions
-(ReactNativeFiberHostComponent.prototype: NativeMethodsMixinType);
+(ReactNativeFiberHostComponent.prototype: NativeMethods);
 
 export default ReactNativeFiberHostComponent;

packages/react-native-renderer/src/ReactNativeTypes.js

@@ -8,7 +8,7 @@
  * @flow
  */
 
-import React from 'react';
+import React, {type ElementRef, type AbstractComponent} from 'react';
 
 export type MeasureOnSuccessCallback = (
   x: number,
@@ -89,30 +89,41 @@ class ReactNativeComponent<Props> extends React.Component<Props> {
   measure(callback: MeasureOnSuccessCallback): void {}
   measureInWindow(callback: MeasureInWindowOnSuccessCallback): void {}
   measureLayout(
-    relativeToNativeNode: number | Object,
+    relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void,
   ): void {}
   setNativeProps(nativeProps: Object): void {}
 }
 
+// This type is only used for FlowTests. It shouldn't be imported directly
+export type _InternalReactNativeComponentClass<Props> = Class<
+  ReactNativeComponent<Props>,
+>;
+
 /**
  * This type keeps ReactNativeFiberHostComponent and NativeMethodsMixin in sync.
  * It can also provide types for ReactNative applications that use NMM or refs.
  */
-export type NativeMethodsMixinType = {
+export type NativeMethods = {
   blur(): void,
   focus(): void,
   measure(callback: MeasureOnSuccessCallback): void,
   measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
   measureLayout(
-    relativeToNativeNode: number | Object,
+    relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
     onSuccess: MeasureLayoutOnSuccessCallback,
-    onFail: () => void,
+    onFail?: () => void,
   ): void,
   setNativeProps(nativeProps: Object): void,
 };
 
+export type NativeMethodsMixinType = NativeMethods;
+export type HostComponent<T> = AbstractComponent<
+  T,
+  $ReadOnly<$Exact<NativeMethods>>,
+>;
+
 type SecretInternalsType = {
   NativeMethodsMixin: NativeMethodsMixinType,
   computeComponentStackForErrorReporting(tag: number): string,