From c34693f2a9530d8e2cbe0b916f923ca6ea8123f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rub=C3=A9n=20Norte?= Date: Mon, 20 Oct 2025 06:27:19 -0700 Subject: [PATCH] Add basic definition of DOM APIs in legacy TypeScript types (#54124) Summary: Changelog: [General][Fixed] Fixed missing type definitions for new DOM APIs in legacy TypeScript types. Fixes https://github.com/facebook/react-native/issues/54103. Reviewed By: huntie Differential Revision: D84363784 --- .../ActivityIndicator/ActivityIndicator.d.ts | 4 +- .../DrawerAndroid/DrawerLayoutAndroid.d.ts | 4 +- .../ProgressBarAndroid.d.ts | 4 +- .../RefreshControl/RefreshControl.d.ts | 4 +- .../Components/SafeAreaView/SafeAreaView.d.ts | 4 +- .../Libraries/Components/Switch/Switch.d.ts | 4 +- .../Components/TextInput/TextInput.d.ts | 7 +- .../Libraries/Components/View/View.d.ts | 4 +- .../react-native/Libraries/Image/Image.d.ts | 6 +- .../react-native/Libraries/Text/Text.d.ts | 4 +- .../types/public/ReactNativeTypes.d.ts | 117 +++++++++++++++++- 11 files changed, 136 insertions(+), 26 deletions(-) diff --git a/packages/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.d.ts b/packages/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.d.ts index f1a4b246dd44fe..717e4312c7d806 100644 --- 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 {} -declare const ActivityIndicatorBase: Constructor & +declare const ActivityIndicatorBase: Constructor & 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 index e6756ffadaae0b..2f2e08efc1e2fc 100644 --- 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 {} -declare const DrawerLayoutAndroidBase: Constructor & +declare const DrawerLayoutAndroidBase: Constructor & 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 index a368adfb075689..f7f4995703d4d6 100644 --- 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 {} -declare const ProgressBarAndroidBase: Constructor & +declare const ProgressBarAndroidBase: Constructor & 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 index 7ceec2697f5429..5fc0711b47c053 100644 --- 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 {} -declare const RefreshControlBase: Constructor & +declare const RefreshControlBase: Constructor & 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 index 6fa77f5f3c5647..03c5dced183f2e 100644 --- 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 {} -declare const SafeAreaViewBase: Constructor & +declare const SafeAreaViewBase: Constructor & typeof SafeAreaViewComponent; /** diff --git a/packages/react-native/Libraries/Components/Switch/Switch.d.ts b/packages/react-native/Libraries/Components/Switch/Switch.d.ts index c875390930b841..7ffe96e663f6fa 100644 --- 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 {} -declare const SwitchBase: Constructor & typeof SwitchComponent; +declare const SwitchBase: Constructor & 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 index b3ca1560c224f5..25c814232a7860 100644 --- 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 {} -declare const TextInputBase: Constructor & +declare const TextInputBase: Constructor & Constructor & 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 index 5fbb52928e5a23..8a0556dfd030cc 100644 --- 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,
, android.view, etc. */ declare class ViewComponent extends React.Component {} -declare const ViewBase: Constructor & typeof ViewComponent; +declare const ViewBase: Constructor & 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 index 4ebf9eb1685ec1..03e70b518173f0 100644 --- 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 {} -declare const ImageBase: Constructor & typeof ImageComponent; +declare const ImageBase: Constructor & typeof ImageComponent; export class Image extends ImageBase { static getSize(uri: string): Promise; static getSize( @@ -384,6 +384,6 @@ export interface ImageBackgroundProps extends ImagePropsBase { } declare class ImageBackgroundComponent extends React.Component {} -declare const ImageBackgroundBase: Constructor & +declare const ImageBackgroundBase: Constructor & 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 index 9133cecaf3d88b..fe77abfcc43c2e 100644 --- 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 {} -declare const TextBase: Constructor & typeof TextComponent; +declare const TextBase: Constructor & typeof TextComponent; export class Text extends TextBase {} export const unstable_TextAncestorContext: React.Context; diff --git a/packages/react-native/types/public/ReactNativeTypes.d.ts b/packages/react-native/types/public/ReactNativeTypes.d.ts index ef8bc118ad2836..3feb5b2d718df8 100644 --- 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

> { new (props: P, context?: any): React.Component

& HostInstance; } + +export interface ArrayLike extends Iterable { + [indexer: number]: T; + readonly length: number; +} + +export interface HTMLCollection extends Iterable, ArrayLike { + [index: number]: T; + readonly length: number; + item(index: number): null | T; + namedItem(name: string): null | T; + [Symbol.iterator](): Iterator; +} + +export interface NodeList extends Iterable, ArrayLike { + [index: number]: T; + readonly length: number; + entries(): Iterator<[number, T]>; + forEach( + callbackFn: (value: T, index: number, array: NodeList) => unknown, + thisArg?: ThisType, + ): void; + item(index: number): null | T; + keys(): Iterator; + values(): Iterator; + [Symbol.iterator](): Iterator; +} + +export interface ReadOnlyNode { + get childNodes(): NodeList; + 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; + 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; + 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;