Align to canonical *Instance types in component ref annotations

huntie · meta-codesync[bot] · commit 2bd18689778e · 2026-05-23T06:44:06.000-07:00
Summary:
Update all ref parameters, ref-returning props, and `useRef` calls in built-in components to use the canonical `*Instance` types introduced in the previous diff.

#### Changes

- Replace inline `React.ElementRef&lt;typeof NativeComponent&gt;` patterns with the canonical `*Instance` type in each component declaration and its inline destructuring type.
- Replace `useRef&lt;React.ElementRef&lt;...&gt;&gt;` with `useRef&lt;*Instance&gt;` (Pressable, Switch).
- Replace `hostRef` prop types with the component `*Instance` type (TouchableHighlight, TouchableOpacity).
- Update `ModalBaseProps.modalRef` and `ModalRefProps.ref` from deprecated `PublicModalInstance` to `ModalInstance`.

#### Removed aliases

- `ButtonRef` (Button.js) — inlined into `ButtonInstance`
- `SwitchRef` (Switch.js) — replaced by `SwitchInstance`
- `TextForwardRef` (Text.js) — replaced by `TextInstance`
- `type Instance` (Pressable.js) — replaced by `PressableInstance`
- `HostComponent&lt;empty&gt;` import (ActivityIndicator.js) — no longer needed
- `ProgressBarAndroidNativeComponentType` typeof import (ProgressBarAndroid.js) — no longer needed

Changelog: [Internal]

Differential Revision: D106144380
diff --git a/packages/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js b/packages/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js
@@ -9,7 +9,6 @@
  */
 
 'use strict';
-import type {HostComponent} from '../../../src/private/types/HostComponent';
 import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ViewProps} from '../View/ViewPropTypes';
 
@@ -65,7 +64,7 @@ export type ActivityIndicatorProps = Readonly<{
 }>;
 
 const ActivityIndicator: component(
-  ref?: React.RefSetter<HostComponent<empty>>,
+  ref?: React.RefSetter<ActivityIndicatorInstance>,
   ...props: ActivityIndicatorProps
 ) = ({
   ref: forwardedRef,
diff --git a/packages/react-native/Libraries/Components/Button.js b/packages/react-native/Libraries/Components/Button.js
@@ -284,14 +284,18 @@ const NativeTouchable:
   | typeof TouchableOpacity =
   Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
 
-type ButtonRef = React.ElementRef<typeof NativeTouchable>;
-
-export type ButtonInstance = ButtonRef;
+export type ButtonInstance = React.ElementRef<typeof NativeTouchable>;
 
 const Button: component(
-  ref?: React.RefSetter<ButtonRef>,
+  ref?: React.RefSetter<ButtonInstance>,
   ...props: ButtonProps
-) = ({ref, ...props}: {ref?: React.RefSetter<ButtonRef>, ...ButtonProps}) => {
+) = ({
+  ref,
+  ...props
+}: {
+  ref?: React.RefSetter<ButtonInstance>,
+  ...ButtonProps,
+}) => {
   const {
     accessibilityLabel,
     accessibilityState,
diff --git a/packages/react-native/Libraries/Components/Pressable/Pressable.js b/packages/react-native/Libraries/Components/Pressable/Pressable.js
@@ -168,8 +168,6 @@ export type PressableProps = Readonly<{
   ...PressableBaseProps,
 }>;
 
-type Instance = React.ElementRef<typeof View>;
-
 /**
  * Component used to build display components that should respond to whether the
  * component is currently pressed or not.
@@ -178,7 +176,7 @@ function Pressable({
   ref: forwardedRef,
   ...props
 }: {
-  ref?: React.RefSetter<Instance>,
+  ref?: React.RefSetter<PressableInstance>,
   ...PressableProps,
 }): React.Node {
   const {
@@ -218,7 +216,7 @@ function Pressable({
     ...restProps
   } = props;
 
-  const viewRef = useRef<Instance | null>(null);
+  const viewRef = useRef<PressableInstance | null>(null);
   const mergedRef = useMergeRefs(forwardedRef, viewRef);
 
   const android_rippleConfig = useAndroidRippleForView(android_ripple, viewRef);
@@ -357,6 +355,6 @@ const MemoedPressable = memo(Pressable);
 MemoedPressable.displayName = 'Pressable';
 
 export default MemoedPressable as component(
-  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ref?: React.RefSetter<PressableInstance>,
   ...props: PressableProps
 );
diff --git a/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js b/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js
@@ -43,9 +43,7 @@ export type {ProgressBarAndroidProps};
  * ```
  */
 const ProgressBarAndroid: component(
-  ref?: React.RefSetter<
-    React.ElementRef<typeof ProgressBarAndroidNativeComponent>,
-  >,
+  ref?: React.RefSetter<ProgressBarAndroidInstance>,
   ...props: ProgressBarAndroidProps
 ) = function ProgressBarAndroid({
   ref: forwardedRef,
@@ -55,9 +53,7 @@ const ProgressBarAndroid: component(
   animating = true,
   ...restProps
 }: {
-  ref?: React.RefSetter<
-    React.ElementRef<typeof ProgressBarAndroidNativeComponent>,
-  >,
+  ref?: React.RefSetter<ProgressBarAndroidInstance>,
   ...ProgressBarAndroidProps,
 }) {
   return (
diff --git a/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js b/packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js
@@ -11,7 +11,6 @@
 'use strict';
 
 import type {HostInstance} from '../../../src/private/types/HostInstance';
-import typeof ProgressBarAndroidNativeComponentType from './ProgressBarAndroidNativeComponent';
 import type {ProgressBarAndroidProps} from './ProgressBarAndroidTypes';
 
 import Platform from '../../Utilities/Platform';
@@ -33,9 +32,7 @@ type Omit<T, K> = T extends any ? Pick<T, Exclude<keyof T, K>> : T;
  * @deprecated
  */
 let ProgressBarAndroid: component(
-  ref?: React.RefSetter<
-    React.ElementRef<ProgressBarAndroidNativeComponentType>,
-  >,
+  ref?: React.RefSetter<ProgressBarAndroidInstance>,
   ...props: Omit<ProgressBarAndroidProps, empty>
 );
 
diff --git a/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.js b/packages/react-native/Libraries/Components/SafeAreaView/SafeAreaView.js
@@ -28,7 +28,7 @@ import * as React from 'react';
  * @deprecated Use `react-native-safe-area-context` instead. This component will be removed in a future release.
  */
 const SafeAreaView: component(
-  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ref?: React.RefSetter<SafeAreaViewInstance>,
   ...props: ViewProps
 ) = Platform.select({
   ios: require('./RCTSafeAreaViewNativeComponent').default,
diff --git a/packages/react-native/Libraries/Components/Switch/Switch.js b/packages/react-native/Libraries/Components/Switch/Switch.js
@@ -122,10 +122,6 @@ export type SwitchProps = Readonly<{
 const returnsFalse = () => false;
 const returnsTrue = () => true;
 
-type SwitchRef = React.ElementRef<
-  typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
->;
-
 /**
   Renders a boolean input.
 
@@ -168,13 +164,13 @@ type SwitchRef = React.ElementRef<
   ```
  */
 const Switch: component(
-  ref?: React.RefSetter<SwitchRef>,
+  ref?: React.RefSetter<SwitchInstance>,
   ...props: SwitchProps
 ) = function Switch({
   ref: forwardedRef,
   ...props
 }: {
-  ref?: React.RefSetter<SwitchRef>,
+  ref?: React.RefSetter<SwitchInstance>,
   ...SwitchProps,
 }): React.Node {
   const {
@@ -191,9 +187,7 @@ const Switch: component(
   const trackColorForFalse = trackColor?.false;
   const trackColorForTrue = trackColor?.true;
 
-  const nativeSwitchRef = useRef<React.ElementRef<
-    typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
-  > | null>(null);
+  const nativeSwitchRef = useRef<SwitchInstance | null>(null);
 
   const ref = useMergeRefs(nativeSwitchRef, forwardedRef);
 
diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js b/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js
@@ -63,7 +63,7 @@ type TouchableHighlightBaseProps = Readonly<{
   onHideUnderlay?: ?() => void,
   testOnly_pressed?: ?boolean,
 
-  hostRef?: React.RefSetter<React.ElementRef<typeof View>>,
+  hostRef?: React.RefSetter<TouchableHighlightInstance>,
 }>;
 
 /** @build-types emit-as-interface Uniwind compatibility */
@@ -415,13 +415,13 @@ class TouchableHighlightImpl extends React.Component<
 }
 
 const TouchableHighlight: component(
-  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ref?: React.RefSetter<TouchableHighlightInstance>,
   ...props: Readonly<Omit<TouchableHighlightProps, 'hostRef'>>
 ) = ({
   ref: hostRef,
   ...props
 }: {
-  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ref?: React.RefSetter<TouchableHighlightInstance>,
   ...Readonly<Omit<TouchableHighlightProps, 'hostRef'>>,
 }) => <TouchableHighlightImpl {...props} hostRef={hostRef} />;
 
diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js
@@ -77,7 +77,7 @@ type TouchableOpacityBaseProps = Readonly<{
   activeOpacity?: ?number,
   style?: ?Animated.WithAnimatedValue<ViewStyleProp>,
 
-  hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
+  hostRef?: ?React.RefSetter<TouchableOpacityInstance>,
 }>;
 
 export type TouchableOpacityProps = Readonly<{
@@ -381,13 +381,13 @@ class TouchableOpacity extends React.Component<
 }
 
 const Touchable: component(
-  ref?: React.RefSetter<React.ElementRef<typeof Animated.View>>,
+  ref?: React.RefSetter<TouchableOpacityInstance>,
   ...props: TouchableOpacityProps
 ) = ({
   ref,
   ...props
 }: {
-  ref?: React.RefSetter<React.ElementRef<typeof Animated.View>>,
+  ref?: React.RefSetter<TouchableOpacityInstance>,
   ...TouchableOpacityProps,
 }) => <TouchableOpacity {...props} hostRef={ref} />;
 
diff --git a/packages/react-native/Libraries/Components/View/View.js b/packages/react-native/Libraries/Components/View/View.js
@@ -25,10 +25,7 @@ import {use} from 'react';
  *
  * @see https://reactnative.dev/docs/view
  */
-component View(
-  ref?: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
-  ...props: ViewProps
-) {
+component View(ref?: React.RefSetter<ViewInstance>, ...props: ViewProps) {
   const hasTextAncestor = use(TextAncestorContext);
 
   const {
diff --git a/packages/react-native/Libraries/Image/Image.android.js b/packages/react-native/Libraries/Image/Image.android.js
@@ -169,7 +169,7 @@ let BaseImage: AbstractImageAndroid = ({
   resizeMode,
   ...restProps
 }: {
-  ref?: React.RefSetter<HostInstance>,
+  ref?: React.RefSetter<ImageInstance>,
   ...ImageProps,
 }) => {
   let source_ =
diff --git a/packages/react-native/Libraries/Image/Image.ios.js b/packages/react-native/Libraries/Image/Image.ios.js
@@ -113,7 +113,7 @@ let BaseImage: AbstractImageIOS = ({
   ref: forwardedRef,
   ...props
 }: {
-  ref?: React.RefSetter<HostInstance>,
+  ref?: React.RefSetter<ImageInstance>,
   ...ImageProps,
 }) => {
   const source = getImageSourcesFromImageProps(props) || {
diff --git a/packages/react-native/Libraries/Modal/Modal.js b/packages/react-native/Libraries/Modal/Modal.js
@@ -111,7 +111,7 @@ export type ModalBaseProps = {
   /**
    * A ref to the native Modal component.
    */
-  modalRef?: React.RefSetter<PublicModalInstance>,
+  modalRef?: React.RefSetter<ModalInstance>,
 };
 
 export type ModalPropsIOS = {
@@ -393,7 +393,7 @@ const styles = StyleSheet.create({
 });
 
 type ModalRefProps = Readonly<{
-  ref?: React.RefSetter<PublicModalInstance>,
+  ref?: React.RefSetter<ModalInstance>,
 }>;
 
 // NOTE: This wrapper component is necessary because `Modal` is a class
diff --git a/packages/react-native/Libraries/Text/Text.js b/packages/react-native/Libraries/Text/Text.js
@@ -35,17 +35,13 @@ import {useContext, useMemo, useState} from 'react';
 
 export type {TextProps} from './TextProps';
 
-type TextForwardRef = React.ElementRef<
-  typeof NativeText | typeof NativeVirtualText | typeof NativeSelectableText,
->;
-
 /**
  * Text is the fundamental component for displaying text.
  *
  * @see https://reactnative.dev/docs/text
  */
 const TextImpl: component(
-  ref?: React.RefSetter<TextForwardRef>,
+  ref?: React.RefSetter<TextInstance>,
   ...props: TextProps
 ) = ({
   ref: forwardedRef,
@@ -85,7 +81,7 @@ const TextImpl: component(
   style,
   ...restProps
 }: {
-  ref?: React.RefSetter<TextForwardRef>,
+  ref?: React.RefSetter<TextInstance>,
   ...TextProps,
 }) => {
   const processedProps = restProps as {
@@ -483,7 +479,7 @@ function useTextPressability({
  * expensive pressability logic to be only initialized when needed.
  */
 component PressableVirtualText(
-  ref?: React.RefSetter<TextForwardRef>,
+  ref?: React.RefSetter<TextInstance>,
   textProps: NativeTextProps,
   textPressabilityProps: TextPressabilityProps,
 ) {
@@ -509,7 +505,7 @@ component PressableVirtualText(
  * expensive pressability logic to be only initialized when needed.
  */
 component PressableText(
-  ref?: React.RefSetter<TextForwardRef>,
+  ref?: React.RefSetter<TextInstance>,
   selectable?: ?boolean,
   textProps: NativeTextProps,
   textPressabilityProps: TextPressabilityProps,
diff --git a/packages/react-native/ReactNativeApi.d.ts b/packages/react-native/ReactNativeApi.d.ts
