Create specific module in RN to define the types for host instances and host components that ReactNativeTypes defines

Differential Revision: D69996010

Author: rubennorte

packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -9,13 +9,13 @@
  */
 
 import type {AccessibilityRole} from '../../Components/View/ViewAccessibility';
+import type {ColorValue, ViewStyleProp} from '../../StyleSheet/StyleSheet';
+import type {DirectEventHandler} from '../../Types/CodegenTypes';
 import type {
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
-} from '../../Renderer/shims/ReactNativeTypes';
-import type {ColorValue, ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {DirectEventHandler} from '../../Types/CodegenTypes';
+} from '../../Types/HostInstance';
 
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import dismissKeyboard from '../../Utilities/dismissKeyboard';

packages/react-native/Libraries/ReactNative/FabricUIManager.js

@@ -14,11 +14,13 @@ import type {NativeElementReference} from '../../src/private/webapis/dom/nodes/s
 import type {
   InternalInstanceHandle,
   LayoutAnimationConfig,
+  Node,
+} from '../Renderer/shims/ReactNativeTypes';
+import type {
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
-  Node,
-} from '../Renderer/shims/ReactNativeTypes';
+} from '../Types/HostInstance';
 import type {RootTag} from '../Types/RootTagTypes';
 
 import defineLazyObjectProperty from '../Utilities/defineLazyObjectProperty';

packages/react-native/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricHostComponent.js

@@ -10,13 +10,15 @@
 
 import type {HostInstance} from '../../..';
 import type {
-  INativeMethods,
   InternalInstanceHandle,
+  ViewConfig,
+} from '../../Renderer/shims/ReactNativeTypes';
+import type {
+  INativeMethods,
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
-  ViewConfig,
-} from '../../Renderer/shims/ReactNativeTypes';
+} from '../../Types/HostInstance';
 
 import TextInputState from '../../Components/TextInput/TextInputState';
 import {getNodeFromInternalInstanceHandle} from '../../ReactNative/RendererProxy';

packages/react-native/Libraries/Types/CoreEventTypes.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {HostInstance} from '../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from './HostInstance';
 
 export type NativeSyntheticEvent<+T> = $ReadOnly<{
   bubbles: ?boolean,

packages/react-native/Libraries/Types/HostComponent.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ * @format
+ */
+
+import type {HostInstance} from './HostInstance';
+
+export type HostComponent<Config: {...}> = component(
+  ref: React$RefSetter<HostInstance>,
+  ...Config
+);

packages/react-native/Libraries/Types/HostInstance.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict
+ */
+
+export type MeasureOnSuccessCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  pageX: number,
+  pageY: number,
+) => void;
+
+export type MeasureInWindowOnSuccessCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+) => void;
+
+export type MeasureLayoutOnSuccessCallback = (
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+) => void;
+
+/**
+ * Current usages should migrate to this definition
+ */
+export interface INativeMethods {
+  blur(): void;
+  focus(): void;
+  measure(callback: MeasureOnSuccessCallback): void;
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
+  measureLayout(
+    relativeToNativeNode: number | HostInstance,
+    onSuccess: MeasureLayoutOnSuccessCallback,
+    onFail?: () => void,
+  ): void;
+  setNativeProps(nativeProps: {...}): void;
+}
+
+export type NativeMethods = $ReadOnly<{
+  blur(): void,
+  focus(): void,
+  measure(callback: MeasureOnSuccessCallback): void,
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
+  measureLayout(
+    relativeToNativeNode: number | HostInstance,
+    onSuccess: MeasureLayoutOnSuccessCallback,
+    onFail?: () => void,
+  ): void,
+  setNativeProps(nativeProps: {...}): void,
+}>;
+
+// This validates that INativeMethods and NativeMethods stay in sync using Flow!
+declare const ensureNativeMethodsAreSynced: NativeMethods;
+(ensureNativeMethodsAreSynced: INativeMethods);
+
+export type HostInstance = NativeMethods;

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -8090,6 +8090,63 @@ export type MouseEvent = NativeSyntheticEvent<
 "
 `;
 
+exports[`public API should not change unintentionally Libraries/Types/HostComponent.js 1`] = `
+"export type HostComponent<Config: { ... }> = component(
+  ref: React$RefSetter<HostInstance>,
+  ...Config
+);
+"
+`;
+
+exports[`public API should not change unintentionally Libraries/Types/HostInstance.js 1`] = `
+"export type MeasureOnSuccessCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  pageX: number,
+  pageY: number
+) => void;
+export type MeasureInWindowOnSuccessCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number
+) => void;
+export type MeasureLayoutOnSuccessCallback = (
+  left: number,
+  top: number,
+  width: number,
+  height: number
+) => void;
+export interface INativeMethods {
+  blur(): void;
+  focus(): void;
+  measure(callback: MeasureOnSuccessCallback): void;
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
+  measureLayout(
+    relativeToNativeNode: number | HostInstance,
+    onSuccess: MeasureLayoutOnSuccessCallback,
+    onFail?: () => void
+  ): void;
+  setNativeProps(nativeProps: { ... }): void;
+}
+export type NativeMethods = $ReadOnly<{
+  blur(): void,
+  focus(): void,
+  measure(callback: MeasureOnSuccessCallback): void,
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
+  measureLayout(
+    relativeToNativeNode: number | HostInstance,
+    onSuccess: MeasureLayoutOnSuccessCallback,
+    onFail?: () => void
+  ): void,
+  setNativeProps(nativeProps: { ... }): void,
+}>;
+export type HostInstance = NativeMethods;
+"
+`;
+
 exports[`public API should not change unintentionally Libraries/Types/ReactDevToolsTypes.js 1`] = `
 "export type InstanceFromReactDevTools =
   | HostInstance
@@ -9004,10 +9061,8 @@ declare export default class EventEmitter<
 `;
 
 exports[`public API should not change unintentionally index.js.flow 1`] = `
-"export type {
-  HostComponent,
-  HostInstance,
-} from \\"./Libraries/Renderer/shims/ReactNativeTypes\\";
+"export type { HostInstance } from \\"./Libraries/Types/HostInstance\\";
+export type { HostComponent } from \\"./Libraries/Types/HostComponent\\";
 export { default as registerCallableModule } from \\"./Libraries/Core/registerCallableModule\\";
 export { default as AccessibilityInfo } from \\"./Libraries/Components/AccessibilityInfo/AccessibilityInfo\\";
 export { default as ActivityIndicator } from \\"./Libraries/Components/ActivityIndicator/ActivityIndicator\\";

packages/react-native/index.js.flow

@@ -17,10 +17,8 @@
 
 // TODO(T215317597): Reconsider the pre-existing grouping of these APIs
 
-export type {
-  HostComponent,
-  HostInstance,
-} from './Libraries/Renderer/shims/ReactNativeTypes';
+export type {HostInstance} from './Libraries/Types/HostInstance';
+export type {HostComponent} from './Libraries/Types/HostComponent';
 export {default as registerCallableModule} from './Libraries/Core/registerCallableModule';
 
 // #region Components

packages/react-native/src/private/webapis/dom/nodes/ReactNativeElement.js

@@ -10,16 +10,18 @@
 
 // flowlint unsafe-getters-setters:off
 
-import type {HostInstance} from '../../../../..';
 import type {
-  INativeMethods,
   InternalInstanceHandle,
-  MeasureInWindowOnSuccessCallback,
-  MeasureLayoutOnSuccessCallback,
-  MeasureOnSuccessCallback,
   Node as ShadowNode,
   ViewConfig,
 } from '../../../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {
+  HostInstance,
+  INativeMethods,
+  MeasureInWindowOnSuccessCallback,
+  MeasureLayoutOnSuccessCallback,
+  MeasureOnSuccessCallback,
+} from '../../../../../Libraries/Types/HostInstance';
 import type {InstanceHandle} from './internals/NodeInternals';
 import type ReactNativeDocument from './ReactNativeDocument';