Add basic definition of DOM APIs in legacy TypeScript types (#54124)

rubennorte · meta-codesync[bot] · commit 05ec7e0ad13c · 2025-10-20T11:38:35.000-07:00
Summary: Pull Request resolved: #54124 Changelog: [General][Fixed] Fixed missing type definitions for new DOM APIs in legacy TypeScript types. Fixes #54103. Reviewed By: huntie Differential Revision: D84363784 fbshipit-source-id: f92362c78c72da986b26ea18c673f90fd4b48fca
diff --git a/packages/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.d.ts b/packages/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.d.ts
@@ -9,7 +9,7 @@
 
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
 import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
 import {LayoutChangeEvent} from '../../Types/CoreEventTypes';
@@ -46,7 +46,7 @@ export interface ActivityIndicatorProps extends ViewProps {
 }
 
 declare class ActivityIndicatorComponent extends React.Component<ActivityIndicatorProps> {}
-declare const ActivityIndicatorBase: Constructor<NativeMethods> &
+declare const ActivityIndicatorBase: Constructor<HostInstance> &
   typeof ActivityIndicatorComponent;
 export class ActivityIndicator extends ActivityIndicatorBase {}
 
diff --git a/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.d.ts b/packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.d.ts
@@ -9,7 +9,7 @@
 
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ColorValue} from '../../StyleSheet/StyleSheet';
 import {
   NativeSyntheticEvent,
@@ -121,7 +121,7 @@ interface DrawerPosition {
 }
 
 declare class DrawerLayoutAndroidComponent extends React.Component<DrawerLayoutAndroidProps> {}
-declare const DrawerLayoutAndroidBase: Constructor<NativeMethods> &
+declare const DrawerLayoutAndroidBase: Constructor<HostInstance> &
   typeof DrawerLayoutAndroidComponent;
 export class DrawerLayoutAndroid extends DrawerLayoutAndroidBase {
   /**
diff --git a/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.d.ts b/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.d.ts
@@ -9,7 +9,7 @@
 
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ColorValue} from '../../StyleSheet/StyleSheet';
 import {ViewProps} from '../View/ViewPropTypes';
 
@@ -72,7 +72,7 @@ export interface ProgressBarAndroidProps extends ViewProps {
  * that the app is loading or there is some activity in the app.
  */
 declare class ProgressBarAndroidComponent extends React.Component<ProgressBarAndroidProps> {}
-declare const ProgressBarAndroidBase: Constructor<NativeMethods> &
+declare const ProgressBarAndroidBase: Constructor<HostInstance> &
   typeof ProgressBarAndroidComponent;
 /**
  * ProgressBarAndroid has been extracted from react-native core and will be removed in a future release.
diff --git a/packages/react-native/Libraries/Components/RefreshControl/RefreshControl.d.ts b/packages/react-native/Libraries/Components/RefreshControl/RefreshControl.d.ts
@@ -9,7 +9,7 @@
 
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ColorValue} from '../../StyleSheet/StyleSheet';
 import {ViewProps} from '../View/ViewPropTypes';
 
@@ -80,7 +80,7 @@ export interface RefreshControlProps
  * in the `onRefresh` function otherwise the refresh indicator will stop immediately.
  */
 declare class RefreshControlComponent extends React.Component<RefreshControlProps> {}
-declare const RefreshControlBase: Constructor<NativeMethods> &
+declare const RefreshControlBase: Constructor<HostInstance> &
   typeof RefreshControlComponent;
 export class RefreshControl extends RefreshControlBase {
   static SIZE: Object; // Undocumented
diff --git a/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.d.ts b/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.d.ts
@@ -9,7 +9,7 @@
 
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ViewProps} from '../View/ViewPropTypes';
 
 /**
@@ -23,7 +23,7 @@ import {ViewProps} from '../View/ViewPropTypes';
  */
 declare class SafeAreaViewComponent extends React.Component<ViewProps> {}
 
-declare const SafeAreaViewBase: Constructor<NativeMethods> &
+declare const SafeAreaViewBase: Constructor<HostInstance> &
   typeof SafeAreaViewComponent;
 
 /**
diff --git a/packages/react-native/Libraries/Components/Switch/Switch.d.ts b/packages/react-native/Libraries/Components/Switch/Switch.d.ts
@@ -9,7 +9,7 @@
 
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
 import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
 import {ViewProps} from '../View/ViewPropTypes';
@@ -114,5 +114,5 @@ export interface SwitchProps extends SwitchPropsIOS {
  * the supplied `value` prop instead of the expected result of any user actions.
  */
 declare class SwitchComponent extends React.Component<SwitchProps> {}
-declare const SwitchBase: Constructor<NativeMethods> & typeof SwitchComponent;
+declare const SwitchBase: Constructor<HostInstance> & typeof SwitchComponent;
 export class Switch extends SwitchBase {}
diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts b/packages/react-native/Libraries/Components/TextInput/TextInput.d.ts
@@ -10,10 +10,7 @@
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
 import {TimerMixin} from '../../../types/private/TimerMixin';
-import {
-  HostInstance,
-  NativeMethods,
-} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
 import {TextStyle} from '../../StyleSheet/StyleSheetTypes';
 import {
@@ -1029,7 +1026,7 @@ interface TextInputState {
  * @see https://reactnative.dev/docs/textinput#methods
  */
 declare class TextInputComponent extends React.Component<TextInputProps> {}
-declare const TextInputBase: Constructor<NativeMethods> &
+declare const TextInputBase: Constructor<HostInstance> &
   Constructor<TimerMixin> &
   typeof TextInputComponent;
 export class TextInput extends TextInputBase {
diff --git a/packages/react-native/Libraries/Components/View/View.d.ts b/packages/react-native/Libraries/Components/View/View.d.ts
@@ -10,7 +10,7 @@
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
 import {ViewProps} from './ViewPropTypes';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 
 /**
  * The most fundamental component for building UI, View is a container that supports layout with flexbox, style, some touch handling,
@@ -19,7 +19,7 @@ import {NativeMethods} from '../../../types/public/ReactNativeTypes';
  * whether that is a UIView, <div>, android.view, etc.
  */
 declare class ViewComponent extends React.Component<ViewProps> {}
-declare const ViewBase: Constructor<NativeMethods> & typeof ViewComponent;
+declare const ViewBase: Constructor<HostInstance> & typeof ViewComponent;
 export class View extends ViewBase {
   /**
    * Is 3D Touch / Force Touch available (i.e. will touch events include `force`)
diff --git a/packages/react-native/Libraries/Image/Image.d.ts b/packages/react-native/Libraries/Image/Image.d.ts
@@ -11,7 +11,7 @@ import * as React from 'react';
 import {Constructor} from '../../types/private/Utilities';
 import {AccessibilityProps} from '../Components/View/ViewAccessibility';
 import {Insets} from '../../types/public/Insets';
-import {NativeMethods} from '../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../StyleSheet/StyleSheet';
 import {ImageStyle, ViewStyle} from '../StyleSheet/StyleSheetTypes';
 import {LayoutChangeEvent, NativeSyntheticEvent} from '../Types/CoreEventTypes';
@@ -338,7 +338,7 @@ export interface ImageSize {
 }
 
 declare class ImageComponent extends React.Component<ImageProps> {}
-declare const ImageBase: Constructor<NativeMethods> & typeof ImageComponent;
+declare const ImageBase: Constructor<HostInstance> & typeof ImageComponent;
 export class Image extends ImageBase {
   static getSize(uri: string): Promise<ImageSize>;
   static getSize(
@@ -384,6 +384,6 @@ export interface ImageBackgroundProps extends ImagePropsBase {
 }
 
 declare class ImageBackgroundComponent extends React.Component<ImageBackgroundProps> {}
-declare const ImageBackgroundBase: Constructor<NativeMethods> &
+declare const ImageBackgroundBase: Constructor<HostInstance> &
   typeof ImageBackgroundComponent;
 export class ImageBackground extends ImageBackgroundBase {}
diff --git a/packages/react-native/Libraries/Text/Text.d.ts b/packages/react-native/Libraries/Text/Text.d.ts
@@ -10,7 +10,7 @@
 import type * as React from 'react';
 import {Constructor} from '../../types/private/Utilities';
 import {AccessibilityProps} from '../Components/View/ViewAccessibility';
-import {NativeMethods} from '../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../StyleSheet/StyleSheet';
 import {TextStyle, ViewStyle} from '../StyleSheet/StyleSheetTypes';
 import {
@@ -224,7 +224,7 @@ export interface TextProps
  * A React component for displaying text which supports nesting, styling, and touch handling.
  */
 declare class TextComponent extends React.Component<TextProps> {}
-declare const TextBase: Constructor<NativeMethods> & typeof TextComponent;
+declare const TextBase: Constructor<HostInstance> & typeof TextComponent;
 export class Text extends TextBase {}
 
 export const unstable_TextAncestorContext: React.Context<boolean>;
diff --git a/packages/react-native/types/public/ReactNativeTypes.d.ts b/packages/react-native/types/public/ReactNativeTypes.d.ts
@@ -120,8 +120,6 @@ export type NativeMethodsMixin = NativeMethods;
  */
 export type NativeMethodsMixinType = NativeMethods;
 
-export type HostInstance = NativeMethods;
-
 /**
  * Represents a native component, such as those returned from `requireNativeComponent`.
  *
@@ -137,3 +135,118 @@ export interface HostComponent<P>
   > {
   new (props: P, context?: any): React.Component<P> & HostInstance;
 }
+
+export interface ArrayLike<T> extends Iterable<T> {
+  [indexer: number]: T;
+  readonly length: number;
+}
+
+export interface HTMLCollection<T> extends Iterable<T>, ArrayLike<T> {
+  [index: number]: T;
+  readonly length: number;
+  item(index: number): null | T;
+  namedItem(name: string): null | T;
+  [Symbol.iterator](): Iterator<T>;
+}
+
+export interface NodeList<T> extends Iterable<T>, ArrayLike<T> {
+  [index: number]: T;
+  readonly length: number;
+  entries(): Iterator<[number, T]>;
+  forEach<ThisType>(
+    callbackFn: (value: T, index: number, array: NodeList<T>) => unknown,
+    thisArg?: ThisType,
+  ): void;
+  item(index: number): null | T;
+  keys(): Iterator<number>;
+  values(): Iterator<T>;
+  [Symbol.iterator](): Iterator<T>;
+}
+
+export interface ReadOnlyNode {
+  get childNodes(): NodeList<ReadOnlyNode>;
+  compareDocumentPosition(otherNode: ReadOnlyNode): number;
+  contains(otherNode: ReadOnlyNode): boolean;
+  get firstChild(): null | ReadOnlyNode;
+  getRootNode(): ReadOnlyNode;
+  hasChildNodes(): boolean;
+  get isConnected(): boolean;
+  get lastChild(): null | ReadOnlyNode;
+  get nextSibling(): null | ReadOnlyNode;
+  get nodeName(): string;
+  get nodeType(): number;
+  get nodeValue(): null | string;
+  get ownerDocument(): null | ReactNativeDocument;
+  get parentElement(): null | ReadOnlyElement;
+  get parentNode(): null | ReadOnlyNode;
+  get previousSibling(): null | ReadOnlyNode;
+  get textContent(): string;
+}
+
+export interface ReactNativeDocument extends ReadOnlyNode {
+  get childElementCount(): number;
+  get children(): HTMLCollection<ReadOnlyElement>;
+  get documentElement(): ReactNativeElement;
+  get firstElementChild(): null | ReadOnlyElement;
+  getElementById(id: string): null | ReadOnlyElement;
+  get lastElementChild(): null | ReadOnlyElement;
+  get nodeName(): string;
+  get nodeType(): number;
+  get nodeValue(): null;
+}
+
+export interface ReadOnlyElement extends ReadOnlyNode {
+  get childElementCount(): number;
+  get children(): HTMLCollection<ReadOnlyElement>;
+  get clientHeight(): number;
+  get clientLeft(): number;
+  get clientTop(): number;
+  get clientWidth(): number;
+  get firstElementChild(): null | ReadOnlyElement;
+  getBoundingClientRect(): DOMRect;
+  hasPointerCapture(pointerId: number): boolean;
+  get id(): string;
+  get lastElementChild(): null | ReadOnlyElement;
+  get nextElementSibling(): null | ReadOnlyElement;
+  get nodeName(): string;
+  get nodeType(): number;
+  get nodeValue(): null | string;
+  set nodeValue(value: string);
+  get previousElementSibling(): null | ReadOnlyElement;
+  releasePointerCapture(pointerId: number): void;
+  get scrollHeight(): number;
+  get scrollLeft(): number;
+  get scrollTop(): number;
+  get scrollWidth(): number;
+  setPointerCapture(pointerId: number): void;
+  get tagName(): string;
+  get textContent(): string;
+}
+
+export interface ReactNativeElement extends ReadOnlyElement, NativeMethods {
+  blur(): void;
+  focus(): void;
+  get offsetHeight(): number;
+  get offsetLeft(): number;
+  get offsetParent(): null | ReadOnlyElement;
+  get offsetTop(): number;
+  get offsetWidth(): number;
+  setNativeProps(nativeProps: {}): void;
+}
+
+export interface ReadOnlyCharacterData extends ReadOnlyNode {
+  get data(): string;
+  get length(): number;
+  get nextElementSibling(): null | ReadOnlyElement;
+  get nodeValue(): string;
+  get previousElementSibling(): null | ReadOnlyElement;
+  substringData(offset: number, count: number): string;
+  get textContent(): string;
+}
+
+export interface ReadOnlyText extends ReadOnlyCharacterData {
+  get nodeName(): string;
+  get nodeType(): number;
+}
+
+export type HostInstance = ReactNativeElement;
