RN: Migrate to HostInstance Type (#46742)

Summary:
Pull Request resolved: #46742

Migrates type definitions in React Native to use the newly created `HostInstance` type instead of `NativeMethods` and `React.ElementRef<HostComponent<T>>`.

Changelog:
[General][Changed] - Simplified Flow types to use `HostInstance` (which changing nominal types).

Reviewed By: NickGerleman

Differential Revision: D63646763

fbshipit-source-id: 904894dc40da4d2e70bcb6df47018fc6248ea972

packages/react-native-popup-menu-android/js/PopupMenuAndroid.android.js

@@ -9,7 +9,7 @@
  */
 
 import type {RefObject} from 'react';
-import type {HostComponent} from 'react-native';
+import type {HostInstance} from 'react-native';
 import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 
 import PopupMenuAndroidNativeComponent, {
@@ -46,7 +46,7 @@ export default function PopupMenuAndroid({
   children,
   instanceRef,
 }: Props): React.Node {
-  const nativeRef = useRef<React.ElementRef<HostComponent<mixed>> | null>(null);
+  const nativeRef = useRef<HostInstance | null>(null);
   const _onSelectionChange = useCallback(
     (event: PopupMenuSelectionEvent) => {
       onSelectionChange(event.nativeEvent.item);

packages/react-native-popup-menu-android/js/PopupMenuAndroid.d.ts

@@ -8,18 +8,17 @@
  */
 
 import type * as React from 'react';
-import {HostComponent} from 'react-native';
 
 type PopupMenuAndroidInstance = {
-  show: () => void;
+  readonly show: () => void;
 };
 
 type Props = {
   menuItems: Array<string>;
   onSelectionChange: (number) => void;
   onDismiss: () => void;
   children: React.ReactNode | undefined;
-  instanceRef: React.ElementRef<HostComponent<PopupMenuAndroidInstance>>;
+  instanceRef: React.RefObject<PopupMenuAndroidInstance>;
 };
 
 declare class PopupMenuAndroid extends React.Component<Props> {}

packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.d.ts

@@ -7,8 +7,7 @@
  * @format
  */
 
-import type * as React from 'react';
-import {HostComponent} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {EmitterSubscription} from '../../vendor/emitter/EventEmitter';
 
 type AccessibilityChangeEventName =
@@ -157,7 +156,7 @@ export interface AccessibilityInfoStatic {
    */
   getRecommendedTimeoutMillis: (originalTimeout: number) => Promise<number>;
   sendAccessibilityEvent: (
-    handle: React.ElementRef<HostComponent<unknown>>,
+    handle: HostInstance,
     eventType: AccessibilityEventTypes,
   ) => void;
 }

packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js

@@ -8,9 +8,8 @@
  * @format
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
 import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
-import type {ElementRef} from 'react';
 
 import RCTDeviceEventEmitter from '../../EventEmitter/RCTDeviceEventEmitter';
 import {sendAccessibilityEvent} from '../../ReactNative/RendererProxy';
@@ -375,7 +374,7 @@ const AccessibilityInfo = {
    * Send a named accessibility event to a HostComponent.
    */
   sendAccessibilityEvent(
-    handle: ElementRef<HostComponent<mixed>>,
+    handle: HostInstance,
     eventType: AccessibilityEventTypes,
   ) {
     // iOS only supports 'focus' event types

packages/react-native/Libraries/Components/ScrollView/ScrollView.js

@@ -12,7 +12,7 @@ import type {
   TScrollViewNativeComponentInstance,
   TScrollViewNativeImperativeHandle,
 } from '../../../src/private/components/useSyncOnScroll';
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {PointProp} from '../../StyleSheet/PointPropType';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
@@ -961,12 +961,12 @@ class ScrollView extends React.Component<Props, State> {
    * @param {bool} preventNegativeScrolling Whether to allow pulling the content
    *        down to make it meet the keyboard's top. Default is false.
    */
-  scrollResponderScrollNativeHandleToKeyboard: <T>(
-    nodeHandle: number | React.ElementRef<HostComponent<T>>,
+  scrollResponderScrollNativeHandleToKeyboard: (
+    nodeHandle: number | HostInstance,
     additionalOffset?: number,
     preventNegativeScrollOffset?: boolean,
-  ) => void = <T>(
-    nodeHandle: number | React.ElementRef<HostComponent<T>>,
+  ) => void = (
+    nodeHandle: number | HostInstance,
     additionalOffset?: number,
     preventNegativeScrollOffset?: boolean,
   ) => {

packages/react-native/Libraries/Components/TextInput/TextInput.d.ts

@@ -11,7 +11,7 @@ import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
 import {TimerMixin} from '../../../types/private/TimerMixin';
 import {
-  HostComponent,
+  HostInstance,
   NativeMethods,
 } from '../../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
@@ -956,21 +956,21 @@ interface TextInputState {
    * Returns the ref of the currently focused text field, if one exists
    * If no text field is focused it returns null
    */
-  currentlyFocusedInput(): React.ElementRef<HostComponent<unknown>>;
+  currentlyFocusedInput(): HostInstance;
 
   /**
    * @param textField ref of the text field to focus
    * Focuses the specified text field
    * noop if the text field was already focused
    */
-  focusTextInput(textField?: React.ElementRef<HostComponent<unknown>>): void;
+  focusTextInput(textField?: HostInstance): void;
 
   /**
    * @param textField ref of the text field to focus
    * Unfocuses the specified text field
    * noop if it wasn't focused
    */
-  blurTextInput(textField?: React.ElementRef<HostComponent<unknown>>): void;
+  blurTextInput(textField?: HostInstance): void;
 }
 
 /**

packages/react-native/Libraries/Components/TextInput/TextInput.flow.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
 import type {
   PressEvent,
   ScrollEvent,
@@ -22,7 +22,6 @@ import {
   type ViewStyleProp,
 } from '../../StyleSheet/StyleSheet';
 import * as React from 'react';
-type ComponentRef = React.ElementRef<HostComponent<mixed>>;
 
 type ReactRefSetter<T> = {current: null | T, ...} | ((ref: null | T) => mixed);
 
@@ -624,9 +623,7 @@ export type Props = $ReadOnly<{|
    */
   editable?: ?boolean,
 
-  forwardedRef?: ?ReactRefSetter<
-    React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
-  >,
+  forwardedRef?: ?ReactRefSetter<HostInstance & ImperativeMethods>,
 
   /**
    * `enterKeyHint` defines what action label (or icon) to present for the enter key on virtual keyboards.
@@ -972,7 +969,7 @@ export type Props = $ReadOnly<{|
 type ImperativeMethods = $ReadOnly<{|
   clear: () => void,
   isFocused: () => boolean,
-  getNativeRef: () => ?React.ElementRef<HostComponent<mixed>>,
+  getNativeRef: () => ?HostInstance,
   setSelection: (start: number, end: number) => void,
 |}>;
 
@@ -1091,17 +1088,17 @@ type InternalTextInput = (props: Props) => React.Node;
 
 export type TextInputComponentStatics = $ReadOnly<{|
   State: $ReadOnly<{|
-    currentlyFocusedInput: () => ?ComponentRef,
+    currentlyFocusedInput: () => ?HostInstance,
     currentlyFocusedField: () => ?number,
-    focusTextInput: (textField: ?ComponentRef) => void,
-    blurTextInput: (textField: ?ComponentRef) => void,
+    focusTextInput: (textField: ?HostInstance) => void,
+    blurTextInput: (textField: ?HostInstance) => void,
   |}>,
 |}>;
 
 export type TextInputType = React.AbstractComponent<
   React.ElementConfig<InternalTextInput>,
   $ReadOnly<{|
-    ...React.ElementRef<HostComponent<mixed>>,
+    ...HostInstance,
     ...ImperativeMethods,
   |}>,
 > &

packages/react-native/Libraries/Components/TextInput/TextInput.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../Renderer/shims/ReactNativeTypes';
 import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
   PressEvent,
@@ -37,10 +37,10 @@ import * as React from 'react';
 import {useCallback, useLayoutEffect, useRef, useState} from 'react';
 
 type ReactRefSetter<T> = {current: null | T, ...} | ((ref: null | T) => mixed);
-type TextInputInstance = React.ElementRef<HostComponent<mixed>> & {
+type TextInputInstance = HostInstance & {
   +clear: () => void,
   +isFocused: () => boolean,
-  +getNativeRef: () => ?React.ElementRef<HostComponent<mixed>>,
+  +getNativeRef: () => ?HostInstance,
   +setSelection: (start: number, end: number) => void,
 };
 
@@ -1004,7 +1004,7 @@ function useTextInputStateSynchronization_STATE({
   props: Props,
   mostRecentEventCount: number,
   selection: ?Selection,
-  inputRef: React.RefObject<null | React.ElementRef<HostComponent<mixed>>>,
+  inputRef: React.RefObject<null | HostInstance>,
   text: string,
   viewCommands: ViewCommands,
 }): {
@@ -1085,7 +1085,7 @@ function useTextInputStateSynchronization_REFS({
   props: Props,
   mostRecentEventCount: number,
   selection: ?Selection,
-  inputRef: React.RefObject<null | React.ElementRef<HostComponent<mixed>>>,
+  inputRef: React.RefObject<null | HostInstance>,
   text: string,
   viewCommands: ViewCommands,
 }): {
@@ -1285,7 +1285,7 @@ function InternalTextInput(props: Props): React.Node {
     ...otherProps
   } = props;
 
-  const inputRef = useRef<null | React.ElementRef<HostComponent<mixed>>>(null);
+  const inputRef = useRef<null | HostInstance>(null);
 
   const selection: ?Selection =
     propsSelection == null
@@ -1383,7 +1383,7 @@ function InternalTextInput(props: Props): React.Node {
           isFocused(): boolean {
             return TextInputState.currentlyFocusedInput() === inputRef.current;
           },
-          getNativeRef(): ?React.ElementRef<HostComponent<mixed>> {
+          getNativeRef(): ?HostInstance {
             return inputRef.current;
           },
           setSelection(start: number, end: number): void {

packages/react-native/Libraries/Components/TextInput/TextInputState.js

@@ -13,7 +13,7 @@
 // through here.
 
 import type {
-  HostComponent,
+  HostInstance,
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
@@ -24,24 +24,22 @@ import {Commands as iOSTextInputCommands} from '../../Components/TextInput/RCTSi
 
 const {findNodeHandle} = require('../../ReactNative/RendererProxy');
 const Platform = require('../../Utilities/Platform');
-const React = require('react');
-type ComponentRef = React.ElementRef<HostComponent<mixed>>;
 
-let currentlyFocusedInputRef: ?ComponentRef = null;
+let currentlyFocusedInputRef: ?HostInstance = null;
 const inputs = new Set<{
   blur(): void,
   focus(): void,
   measure(callback: MeasureOnSuccessCallback): void,
   measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
   measureLayout(
-    relativeToNativeNode: number | React.ElementRef<HostComponent<mixed>>,
+    relativeToNativeNode: number | HostInstance,
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void,
   ): void,
   setNativeProps(nativeProps: {...}): void,
 }>();
 
-function currentlyFocusedInput(): ?ComponentRef {
+function currentlyFocusedInput(): ?HostInstance {
   return currentlyFocusedInputRef;
 }
 
@@ -59,13 +57,13 @@ function currentlyFocusedField(): ?number {
   return findNodeHandle(currentlyFocusedInputRef);
 }
 
-function focusInput(textField: ?ComponentRef): void {
+function focusInput(textField: ?HostInstance): void {
   if (currentlyFocusedInputRef !== textField && textField != null) {
     currentlyFocusedInputRef = textField;
   }
 }
 
-function blurInput(textField: ?ComponentRef): void {
+function blurInput(textField: ?HostInstance): void {
   if (currentlyFocusedInputRef === textField && textField != null) {
     currentlyFocusedInputRef = null;
   }
@@ -92,7 +90,7 @@ function blurField(textFieldID: ?number) {
  * Focuses the specified text field
  * noop if the text field was already focused or if the field is not editable
  */
-function focusTextInput(textField: ?ComponentRef) {
+function focusTextInput(textField: ?HostInstance) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
@@ -131,7 +129,7 @@ function focusTextInput(textField: ?ComponentRef) {
  * Unfocuses the specified text field
  * noop if it wasn't focused
  */
-function blurTextInput(textField: ?ComponentRef) {
+function blurTextInput(textField: ?HostInstance) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
@@ -157,7 +155,7 @@ function blurTextInput(textField: ?ComponentRef) {
   }
 }
 
-function registerInput(textField: ComponentRef) {
+function registerInput(textField: HostInstance) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
@@ -171,7 +169,7 @@ function registerInput(textField: ComponentRef) {
   inputs.add(textField);
 }
 
-function unregisterInput(textField: ComponentRef) {
+function unregisterInput(textField: HostInstance) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
@@ -184,7 +182,7 @@ function unregisterInput(textField: ComponentRef) {
   inputs.delete(textField);
 }
 
-function isTextInput(textField: ComponentRef): boolean {
+function isTextInput(textField: HostInstance): boolean {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(

packages/react-native/Libraries/Components/View/ViewNativeComponent.js

@@ -10,14 +10,14 @@
 
 import type {
   HostComponent,
+  HostInstance,
   PartialViewConfig,
 } from '../../Renderer/shims/ReactNativeTypes';
 
 import * as NativeComponentRegistry from '../../NativeComponent/NativeComponentRegistry';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import Platform from '../../Utilities/Platform';
 import {type ViewProps as Props} from './ViewPropTypes';
-import * as React from 'react';
 
 export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
   Platform.OS === 'android'
@@ -108,15 +108,8 @@ const ViewNativeComponent: HostComponent<Props> =
   NativeComponentRegistry.get<Props>('RCTView', () => __INTERNAL_VIEW_CONFIG);
 
 interface NativeCommands {
-  +hotspotUpdate: (
-    viewRef: React.ElementRef<HostComponent<mixed>>,
-    x: number,
-    y: number,
-  ) => void;
-  +setPressed: (
-    viewRef: React.ElementRef<HostComponent<mixed>>,
-    pressed: boolean,
-  ) => void;
+  +hotspotUpdate: (viewRef: HostInstance, x: number, y: number) => void;
+  +setPressed: (viewRef: HostInstance, pressed: boolean) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({