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

Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/49601 Changelog: [internal] This creates a new module in React Native to define some of the types related to `HostInstance` that are currently defined in `ReactNativeTypes` (synced from the React repo). We want to remove the types from `ReactNativeTypes` so this is a necessary initial step. Reviewed By: huntie Differential Revision: D69996010 fbshipit-source-id: 21cfed4c222e22332936e56aca895fe578809792
2025-11-01 09:14:26 +00:00 · 2025-02-24 05:32:43 -08:00
parent 14b0c27045
commit e630b2ca18
82 changed files with 269 additions and 186 deletions
@@ -8,9 +8,9 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {
  DimensionValue,
@@ -8,8 +8,8 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {WithDefault} from 'react-native/Libraries/Types/CodegenTypes';

 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
@@ -8,8 +8,8 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';

 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
@@ -8,8 +8,8 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {DimensionValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';

 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
@@ -8,8 +8,8 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';

 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

@@ -8,8 +8,8 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {WithDefault} from 'react-native/Libraries/Types/CodegenTypes';

 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
@@ -8,8 +8,8 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {
  BubblingEventHandler,
  Int32,
@@ -8,8 +8,8 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {
  BubblingEventHandler,
  DirectEventHandler,
@@ -8,8 +8,8 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {
  Float,
  WithDefault,
@@ -8,9 +8,9 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';

 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

@@ -8,8 +8,8 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {
  Int32,
  WithDefault,
@@ -8,8 +8,8 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {
  BubblingEventHandler,
  WithDefault,
@@ -8,8 +8,8 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {UnsafeMixed} from 'react-native/Libraries/Types/CodegenTypes';

 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
@@ -8,9 +8,9 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {PointValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';

@@ -8,8 +8,8 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';

 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

@@ -8,9 +8,9 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {PointValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
 import type {
@@ -8,8 +8,8 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {PointValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';

 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
@@ -8,8 +8,8 @@
 * @flow strict-local
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {WithDefault} from 'react-native/Libraries/Types/CodegenTypes';

 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
@@ -8,8 +8,8 @@
 * @format
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {
  DirectEventHandler,
  Int32,
@@ -8,8 +8,8 @@
 * @format
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {
  BubblingEventHandler,
  Double,
@@ -8,7 +8,7 @@
 * @format
 */

-import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';

 import RCTDeviceEventEmitter from '../../EventEmitter/RCTDeviceEventEmitter';
@@ -9,7 +9,7 @@
 */

 'use strict';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../../src/private/types/HostComponent';
 import type {ViewProps} from '../View/ViewPropTypes';

 import StyleSheet, {type ColorValue} from '../../StyleSheet/StyleSheet';
@@ -8,12 +8,12 @@
 * @format
 */

-import type {AccessibilityRole} from '../../Components/View/ViewAccessibility';
 import type {
  MeasureInWindowOnSuccessCallback,
  MeasureLayoutOnSuccessCallback,
  MeasureOnSuccessCallback,
-} from '../../Renderer/shims/ReactNativeTypes';
+} from '../../../src/private/types/HostInstance';
+import type {AccessibilityRole} from '../../Components/View/ViewAccessibility';
 import type {ColorValue, ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {DirectEventHandler} from '../../Types/CodegenTypes';

@@ -8,7 +8,7 @@
 * @format
 */

-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../../src/private/types/HostComponent';
 import type {ViewProps} from '../View/ViewPropTypes';

 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
@@ -9,7 +9,8 @@
 */

 'use strict';
-import type {HostComponent} from '../../../Renderer/shims/ReactNativeTypes';
+
+import type {HostComponent} from '../../../../src/private/types/HostComponent';

 import requireNativeComponent from '../../../ReactNative/requireNativeComponent';
 import * as React from 'react';
@@ -8,10 +8,8 @@
 * @format
 */

-import type {
-  HostComponent,
-  PartialViewConfig,
-} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../../src/private/types/HostComponent';
+import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';

 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
@@ -8,10 +8,8 @@
 * @flow strict-local
 */

-import type {
-  HostComponent,
-  PartialViewConfig,
-} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../../src/private/types/HostComponent';
+import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 import type {ViewProps as Props} from '../View/ViewPropTypes';

 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
@@ -8,7 +8,7 @@
 * @flow strict-local
 */

-import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {PointProp} from '../../StyleSheet/PointPropType';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
@@ -8,7 +8,7 @@
 * @flow strict-local
 */

-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../../src/private/types/HostComponent';
 import type {Double} from '../../Types/CodegenTypes';

 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
@@ -8,10 +8,8 @@
 * @format
 */

-import type {
-  HostComponent,
-  PartialViewConfig,
-} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../../src/private/types/HostComponent';
+import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 import type {ScrollViewNativeProps as Props} from './ScrollViewNativeComponentType';

 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
@@ -8,10 +8,8 @@
 * @format
 */

-import type {
-  HostComponent,
-  PartialViewConfig,
-} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../../src/private/types/HostComponent';
+import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 import type {
  ColorValue,
  TextStyleProp,
@@ -8,10 +8,8 @@
 * @format
 */

-import type {
-  HostComponent,
-  PartialViewConfig,
-} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../../src/private/types/HostComponent';
+import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 import type {TextInputNativeCommands} from './TextInputNativeCommands';

 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
@@ -8,10 +8,8 @@
 * @format
 */

-import type {
-  HostComponent,
-  PartialViewConfig,
-} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../../src/private/types/HostComponent';
+import type {PartialViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 import type {TextInputNativeCommands} from './TextInputNativeCommands';

 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
@@ -8,11 +8,11 @@
 * @format
 */

-import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {
  GestureResponderEvent,
-  ScrollEvent,
  NativeSyntheticEvent,
+  ScrollEvent,
 } from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';

@@ -8,12 +8,12 @@
 * @format
 */

-import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
  GestureResponderEvent,
-  ScrollEvent,
  NativeSyntheticEvent,
+  ScrollEvent,
 } from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {TextInputType} from './TextInput.flow';
@@ -12,12 +12,7 @@
 // TextInputs. All calls relating to the keyboard should be funneled
 // through here.

-import type {
-  HostInstance,
-  MeasureInWindowOnSuccessCallback,
-  MeasureLayoutOnSuccessCallback,
-  MeasureOnSuccessCallback,
-} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../../src/private/types/HostInstance';

 import {Commands as AndroidTextInputCommands} from '../../Components/TextInput/AndroidTextInputNativeComponent';
 import {Commands as iOSTextInputCommands} from '../../Components/TextInput/RCTSingelineTextInputNativeComponent';
@@ -26,18 +21,7 @@ const {findNodeHandle} = require('../../ReactNative/RendererProxy');
 const Platform = require('../../Utilities/Platform').default;

 let currentlyFocusedInputRef: ?HostInstance = null;
-const inputs = new Set<{
-  blur(): void,
-  focus(): void,
-  measure(callback: MeasureOnSuccessCallback): void,
-  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
-  measureLayout(
-    relativeToNativeNode: number | HostInstance,
-    onSuccess: MeasureLayoutOnSuccessCallback,
-    onFail?: () => void,
-  ): void,
-  setNativeProps(nativeProps: {...}): void,
-}>();
+const inputs = new Set<HostInstance>();

 function currentlyFocusedInput(): ?HostInstance {
  return currentlyFocusedInputRef;
@@ -8,10 +8,8 @@
 * @format
 */

-import type {
-  HostComponent,
-  HostInstance,
-} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../../src/private/types/HostComponent';
+import type {HostInstance} from '../../../src/private/types/HostInstance';

 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
@@ -9,13 +9,13 @@
 * @oncall react_native
 */

+import type {HostInstance} from '../../src/private/types/HostInstance';
 import type ReactNativeElement from '../../src/private/webapis/dom/nodes/ReactNativeElement';
 import type ReadOnlyElement from '../../src/private/webapis/dom/nodes/ReadOnlyElement';
 import type {
  AppContainerRootViewRef,
  DebuggingOverlayRef,
 } from '../ReactNative/AppContainer-dev';
-import type {NativeMethods} from '../Renderer/shims/ReactNativeTypes';
 import type {
  InstanceFromReactDevTools,
  ReactDevToolsAgent,
@@ -51,7 +51,7 @@ type ModernNodeUpdate = {

 type LegacyNodeUpdate = {
  id: number,
-  instance: NativeMethods,
+  instance: HostInstance,
  color: string,
 };

@@ -95,7 +95,7 @@ class DebuggingOverlayRegistry {

  #getPublicInstanceFromInstance = (
    instanceHandle: InstanceFromReactDevTools,
-  ): NativeMethods | null => {
+  ): HostInstance | null => {
    // `canonical.publicInstance` => Fabric
    if (instanceHandle.canonical?.publicInstance != null) {
      return instanceHandle.canonical?.publicInstance;
@@ -134,7 +134,7 @@ class DebuggingOverlayRegistry {
  }

  #findLowestParentFromRegistryForInstanceLegacy(
-    instance: NativeMethods,
+    instance: HostInstance,
  ): ?DebuggingOverlayRegistrySubscriberProtocol {
    const candidates: Array<DebuggingOverlayRegistrySubscriberProtocol> = [];

@@ -374,7 +374,7 @@ class DebuggingOverlayRegistry {
      require('../../src/private/webapis/dom/nodes/ReactNativeElement').default;

    const reactNativeElements: Array<ReactNativeElement> = [];
-    const legacyPublicInstances: Array<NativeMethods> = [];
+    const legacyPublicInstances: Array<HostInstance> = [];

    for (const node of nodes) {
      const publicInstance = this.#getPublicInstanceFromInstance(node);
@@ -442,10 +442,10 @@ class DebuggingOverlayRegistry {
  }

  // TODO: remove once DOM Node APIs are opt-in by default and Paper is no longer supported.
-  #onHighlightElementsLegacy(elements: Array<NativeMethods>): void {
+  #onHighlightElementsLegacy(elements: Array<HostInstance>): void {
    const parentToElementsMap = new Map<
      DebuggingOverlayRegistrySubscriberProtocol,
-      Array<NativeMethods>,
+      Array<HostInstance>,
    >();

    for (const element of elements) {
@@ -8,7 +8,7 @@
 * @format
 */

-import type {HostInstance} from '../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {ImageBackgroundProps} from './ImageProps';

 import View from '../Components/View/View';
@@ -8,12 +8,10 @@
 * @format
 */

+import type {HostComponent} from '../../src/private/types/HostComponent';
+import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {ViewProps} from '../Components/View/ViewPropTypes';
-import type {
-  HostComponent,
-  HostInstance,
-  PartialViewConfig,
-} from '../Renderer/shims/ReactNativeTypes';
+import type {PartialViewConfig} from '../Renderer/shims/ReactNativeTypes';
 import type {
  ColorValue,
  DangerouslyImpreciseStyle,
@@ -10,11 +10,9 @@

 'use strict';

+import type {HostComponent} from '../../src/private/types/HostComponent';
 import type {ViewProps} from '../Components/View/ViewPropTypes';
-import type {
-  HostComponent,
-  PartialViewConfig,
-} from '../Renderer/shims/ReactNativeTypes';
+import type {PartialViewConfig} from '../Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from '../StyleSheet/StyleSheet';
 import type {ImageResizeMode} from './ImageResizeMode';

@@ -8,8 +8,8 @@
 * @format
 */

+import type {HostComponent} from '../../src/private/types/HostComponent';
 import type {
-  HostComponent,
  PartialViewConfig,
  ViewConfig,
 } from '../Renderer/shims/ReactNativeTypes';
@@ -8,12 +8,12 @@
 * @format
 */

-import type {HostInstance} from '../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {
  BlurEvent,
  FocusEvent,
-  MouseEvent,
  GestureResponderEvent,
+  MouseEvent,
 } from '../Types/CoreEventTypes';

 import SoundManager from '../Components/Sound/SoundManager';
@@ -10,13 +10,15 @@

 'use strict';

+import type {
+  MeasureInWindowOnSuccessCallback,
+  MeasureLayoutOnSuccessCallback,
+  MeasureOnSuccessCallback,
+} from '../../src/private/types/HostInstance';
 import type {NativeElementReference} from '../../src/private/webapis/dom/nodes/specs/NativeDOM';
 import type {
  InternalInstanceHandle,
  LayoutAnimationConfig,
-  MeasureInWindowOnSuccessCallback,
-  MeasureLayoutOnSuccessCallback,
-  MeasureOnSuccessCallback,
  Node,
 } from '../Renderer/shims/ReactNativeTypes';
 import type {RootTag} from '../Types/RootTagTypes';
@@ -11,10 +11,12 @@
 import type {
  HostInstance,
  INativeMethods,
-  InternalInstanceHandle,
  MeasureInWindowOnSuccessCallback,
  MeasureLayoutOnSuccessCallback,
  MeasureOnSuccessCallback,
+} from '../../../src/private/types/HostInstance';
+import type {
+  InternalInstanceHandle,
  ViewConfig,
 } from '../../Renderer/shims/ReactNativeTypes';

@@ -8,9 +8,9 @@
 * @flow strict-local
 */

+import type {HostComponent} from '../../src/private/types/HostComponent';
+import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {
-  HostComponent,
-  HostInstance,
  InternalInstanceHandle,
  Node,
 } from '../Renderer/shims/ReactNativeTypes';
@@ -10,7 +10,7 @@

 'use strict';

-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../src/private/types/HostComponent';

 const createReactNativeComponentClass =
  require('../Renderer/shims/createReactNativeComponentClass').default;
@@ -8,7 +8,7 @@
 * @format
 */

-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../src/private/types/HostComponent';
 import type {ProcessedColorValue} from '../StyleSheet/processColor';
 import type {GestureResponderEvent} from '../Types/CoreEventTypes';
 import type {TextProps} from './TextProps';
@@ -8,7 +8,7 @@
 * @format
 */

-import type {HostInstance} from '../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../src/private/types/HostInstance';

 export type NativeSyntheticEvent<+T> = $ReadOnly<{
  bubbles: ?boolean,
@@ -9,19 +9,15 @@
 * @oncall react_native
 */

-import type {NativeMethods} from '../Renderer/shims/ReactNativeTypes';
-
-type PublicInstance = {
-  ...NativeMethods,
-};
+import type {HostInstance} from '../../src/private/types/HostInstance';

 export type InstanceFromReactDevTools =
-  | PublicInstance
+  | HostInstance
  | {
      canonical?:
-        | PublicInstance // TODO: remove this variant when syncing the new version of the renderer from React to React Native.
+        | HostInstance
        | {
-            publicInstance?: PublicInstance,
+            publicInstance?: HostInstance,
          },
    };

@@ -9,7 +9,7 @@
 * @oncall react_native
 */

-import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ReactTestRenderer} from 'react-test-renderer';

 import View from '../../Components/View/View';
@@ -9,12 +9,7 @@
 * @oncall react_native
 */

-import type {
-  HostInstance,
-  MeasureInWindowOnSuccessCallback,
-  MeasureLayoutOnSuccessCallback,
-  MeasureOnSuccessCallback,
-} from '../../Renderer/shims/ReactNativeTypes.js';
+import type {HostInstance} from '../../../src/private/types/HostInstance';

 import View from '../../Components/View/View';
 import useRefEffect from '../useRefEffect';
@@ -31,18 +26,7 @@ function TestView({
  childKey: ?string,
  effect: () => (() => void) | void,
 }) {
-  const ref = useRefEffect<{
-    blur(): void,
-    focus(): void,
-    measure(callback: MeasureOnSuccessCallback): void,
-    measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
-    measureLayout(
-      relativeToNativeNode: number | HostInstance,
-      onSuccess: MeasureLayoutOnSuccessCallback,
-      onFail?: () => void,
-    ): void,
-    setNativeProps(nativeProps: {...}): void,
-  }>(effect);
+  const ref = useRefEffect<?HostInstance>(effect);
  return <View key={childKey} ref={ref} testID={childKey} />;
 }

@@ -10,7 +10,7 @@

 // TODO: move this file to shims/ReactNative (requires React update and sync)

-import type {HostComponent} from '../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../src/private/types/HostComponent';

 import requireNativeComponent from '../../Libraries/ReactNative/requireNativeComponent';
 import UIManager from '../ReactNative/UIManager';
@@ -8,10 +8,8 @@
 * @format
 */

-import type {
-  HostComponent,
-  HostInstance,
-} from '../Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../src/private/types/HostComponent';
+import type {HostInstance} from '../../src/private/types/HostInstance';

 import * as React from 'react';

@@ -8100,16 +8100,13 @@ export type MouseEvent = NativeSyntheticEvent<
 `;

 exports[`public API should not change unintentionally Libraries/Types/ReactDevToolsTypes.js 1`] = `
-"type PublicInstance = {
-  ...NativeMethods,
-};
-export type InstanceFromReactDevTools =
-  | PublicInstance
+"export type InstanceFromReactDevTools =
+  | HostInstance
  | {
      canonical?:
-        | PublicInstance
+        | HostInstance
        | {
-            publicInstance?: PublicInstance,
+            publicInstance?: HostInstance,
          },
    };
 export type ReactDevToolsAgentEvents = {
@@ -9016,10 +9013,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 \\"./src/private/types/HostInstance\\";
+export type { HostComponent } from \\"./src/private/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\\";
@@ -9122,6 +9117,63 @@ exports[`public API should not change unintentionally src/private/setup/setUpPer
 "
 `;

+exports[`public API should not change unintentionally src/private/types/HostComponent.js 1`] = `
+"export type HostComponent<Config: { ... }> = component(
+  ref: React$RefSetter<HostInstance>,
+  ...Config
+);
+"
+`;
+
+exports[`public API should not change unintentionally src/private/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 src/private/webapis/dom/nodes/ReactNativeDocument.js 1`] = `
 "declare export default class ReactNativeDocument extends ReadOnlyNode {
  constructor(
@@ -44,6 +44,7 @@ const JS_LIBRARIES_FILES_IGNORE_PATTERNS = [
 const JS_PRIVATE_FILES_INCLUDE_PATTERNS = [
  'setup/**/*.js',
  'specs/**/*.js',
+  'types/**/*.js',
  'webapis/dom/geometry/*.js',
  'webapis/dom/nodes/*.js',
  'webapis/dom/oldstylecollections/*.js',
@@ -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 './src/private/types/HostInstance';
+export type {HostComponent} from './src/private/types/HostComponent';
 export {default as registerCallableModule} from './Libraries/Core/registerCallableModule';

 // #region Components
@@ -11,7 +11,7 @@

 import type {ScrollViewNativeProps} from '../../../Libraries/Components/ScrollView/ScrollViewNativeComponentType';
 import type {ViewProps} from '../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../types/HostComponent';

 import AndroidHorizontalScrollViewNativeComponent from '../../../Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent';
 import ScrollContentViewNativeComponent from '../../../Libraries/Components/ScrollView/ScrollContentViewNativeComponent';
@@ -11,7 +11,7 @@

 import type {ScrollViewNativeProps} from '../../../Libraries/Components/ScrollView/ScrollViewNativeComponentType';
 import type {ViewProps} from '../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../types/HostComponent';

 import ScrollContentViewNativeComponent from '../../../Libraries/Components/ScrollView/ScrollContentViewNativeComponent';
 import ScrollViewNativeComponent from '../../../Libraries/Components/ScrollView/ScrollViewNativeComponent';
@@ -8,10 +8,8 @@
 * @flow
 */

-import type {
-  HostInstance,
-  TouchedViewDataAtPoint,
-} from '../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {TouchedViewDataAtPoint} from '../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../types/HostInstance';

 const invariant = require('invariant');

@@ -9,9 +9,9 @@
 */

 import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from '../../../../Libraries/StyleSheet/StyleSheet';
 import type {WithDefault} from '../../../../Libraries/Types/CodegenTypes';
+import type {HostComponent} from '../../types/HostComponent';

 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';

@@ -9,7 +9,6 @@
 */

 import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from '../../../../Libraries/StyleSheet/StyleSheet';
 import type {
  DirectEventHandler,
@@ -17,6 +16,7 @@ import type {
  Int32,
  WithDefault,
 } from '../../../../Libraries/Types/CodegenTypes';
+import type {HostComponent} from '../../types/HostComponent';

 import codegenNativeCommands from '../../../../Libraries/Utilities/codegenNativeCommands';
 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';
@@ -9,7 +9,7 @@
 */

 import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../types/HostComponent';

 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';

@@ -9,13 +9,13 @@
 */

 import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from '../../../../Libraries/StyleSheet/StyleSheet';
 import type {
  DirectEventHandler,
  Float,
  WithDefault,
 } from '../../../../Libraries/Types/CodegenTypes';
+import type {HostComponent} from '../../types/HostComponent';

 import codegenNativeCommands from '../../../../Libraries/Utilities/codegenNativeCommands';
 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';
@@ -9,13 +9,13 @@
 */

 import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from '../../../../Libraries/StyleSheet/StyleSheet';
 import type {
  BubblingEventHandler,
  Int32,
  WithDefault,
 } from '../../../../Libraries/Types/CodegenTypes';
+import type {HostComponent} from '../../types/HostComponent';

 import codegenNativeCommands from '../../../../Libraries/Utilities/codegenNativeCommands';
 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';
@@ -9,8 +9,8 @@
 */

 import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
 import type {ProcessedColorValue} from '../../../../Libraries/StyleSheet/processColor';
+import type {HostComponent} from '../../types/HostComponent';

 import codegenNativeCommands from '../../../../Libraries/Utilities/codegenNativeCommands';
 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';
@@ -9,12 +9,12 @@
 */

 import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from '../../../../Libraries/StyleSheet/StyleSheet';
 import type {
  Double,
  WithDefault,
 } from '../../../../Libraries/Types/CodegenTypes';
+import type {HostComponent} from '../../types/HostComponent';

 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';

@@ -9,13 +9,13 @@
 */

 import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from '../../../../Libraries/StyleSheet/StyleSheet';
 import type {
  DirectEventHandler,
  Float,
  WithDefault,
 } from '../../../../Libraries/Types/CodegenTypes';
+import type {HostComponent} from '../../types/HostComponent';

 import codegenNativeCommands from '../../../../Libraries/Utilities/codegenNativeCommands';
 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';
@@ -9,8 +9,8 @@
 */

 import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from '../../../../Libraries/StyleSheet/StyleSheet';
+import type {HostComponent} from '../../types/HostComponent';

 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';

@@ -9,12 +9,12 @@
 */

 import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
 import type {
  DirectEventHandler,
  Int32,
  WithDefault,
 } from '../../../../Libraries/Types/CodegenTypes';
+import type {HostComponent} from '../../types/HostComponent';

 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';

@@ -9,7 +9,7 @@
 */

 import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {HostComponent} from '../../types/HostComponent';

 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';

@@ -9,13 +9,13 @@
 */

 import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
 import type {ColorValue} from '../../../../Libraries/StyleSheet/StyleSheet';
 import type {
  BubblingEventHandler,
  Int32,
  WithDefault,
 } from '../../../../Libraries/Types/CodegenTypes';
+import type {HostComponent} from '../../types/HostComponent';

 import codegenNativeCommands from '../../../../Libraries/Utilities/codegenNativeCommands';
 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';
@@ -9,8 +9,8 @@
 */

 import type {ViewProps} from '../../../../Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from '../../../../Libraries/Renderer/shims/ReactNativeTypes';
 import type {WithDefault} from '../../../../Libraries/Types/CodegenTypes';
+import type {HostComponent} from '../../types/HostComponent';

 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';

@@ -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
+);
@@ -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;
@@ -11,15 +11,17 @@
 // flowlint unsafe-getters-setters:off

 import type {
-  HostInstance,
-  INativeMethods,
  InternalInstanceHandle,
-  MeasureInWindowOnSuccessCallback,
-  MeasureLayoutOnSuccessCallback,
-  MeasureOnSuccessCallback,
  Node as ShadowNode,
  ViewConfig,
 } from '../../../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {
+  HostInstance,
+  INativeMethods,
+  MeasureInWindowOnSuccessCallback,
+  MeasureLayoutOnSuccessCallback,
+  MeasureOnSuccessCallback,
+} from '../../../types/HostInstance';
 import type {InstanceHandle} from './internals/NodeInternals';
 import type ReactNativeDocument from './ReactNativeDocument';

@@ -8,8 +8,8 @@
 * @format
 */

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {
  BubblingEventHandler,
  Double,
@@ -10,8 +10,8 @@

 'use strict';

+import type {HostComponent} from 'react-native';
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
 import type {NativeSyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';

 const {requireNativeComponent} = require('react-native');
@@ -10,7 +10,7 @@

 'use strict';

-import type {NativeMethods} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from 'react-native';

 import {RNTesterThemeContext} from '../../components/RNTesterTheme';

@@ -207,7 +207,7 @@ class ActionSheetAnchorExample extends React.Component<
    clicked: 'none',
  };

-  anchorRef: {current: null | $Exact<NativeMethods>} = React.createRef();
+  anchorRef: {current: null | HostInstance} = React.createRef();

  render(): React.Node {
    return (
@@ -434,7 +434,7 @@ class ShareScreenshotAnchorExample extends React.Component<
    text: '',
  };

-  anchorRef: {current: null | $Exact<NativeMethods>} = React.createRef();
+  anchorRef: {current: null | HostInstance} = React.createRef();

  render(): React.Node {
    return (
@@ -9,7 +9,7 @@
 */

 import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes';
-import type {HostInstance} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from 'react-native';
 import type {
  LayoutRectangle,
  PointerEvent,
@@ -9,7 +9,7 @@
 */

 import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes';
-import type {HostInstance} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from 'react-native';
 import type {
  LayoutRectangle,
  PointerEvent,
@@ -9,7 +9,7 @@
 */

 import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes';
-import type {HostInstance} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from 'react-native';
 import type {PointerEvent} from 'react-native/Libraries/Types/CoreEventTypes';

 import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest';