Align to canonical *Instance types in component ref annotations

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

@@ -9,9 +9,11 @@
  */
 
 'use strict';
-import type {HostComponent} from '../../../src/private/types/HostComponent';
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ViewProps} from '../View/ViewPropTypes';
 
+export type ActivityIndicatorInstance = HostInstance;
+
 import StyleSheet, {type ColorValue} from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import View from '../View/View';
@@ -62,7 +64,7 @@
 }>;
 
 const ActivityIndicator: component(
-  ref?: React.RefSetter<HostComponent<empty>>,
+  ref?: React.RefSetter<ActivityIndicatorInstance>,
   ...props: ActivityIndicatorProps
 ) = ({
   ref: forwardedRef,

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

@@ -284,12 +284,18 @@ const NativeTouchable:
   | typeof TouchableOpacity =
   Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
 
-type ButtonRef = React.ElementRef<typeof NativeTouchable>;
+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,

packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -302,4 +302,6 @@ const styles = StyleSheet.create({
   },
 });
 
+export type DrawerLayoutAndroidInstance = DrawerLayoutAndroid;
+
 export default DrawerLayoutAndroid as $FlowFixMe;

packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.ios.js

@@ -12,4 +12,6 @@
 
 import DrawerLayoutAndroidFallback from './DrawerLayoutAndroidFallback';
 
+export type DrawerLayoutAndroidInstance = DrawerLayoutAndroidFallback;
+
 export default DrawerLayoutAndroidFallback;

packages/react-native/Libraries/Components/DrawerAndroid/DrawerLayoutAndroidTypes.js

@@ -136,3 +136,5 @@ export interface DrawerLayoutAndroidMethods {
   ): void;
   setNativeProps(nativeProps: Object): void;
 }
+
+export type DrawerLayoutAndroidInstance = DrawerLayoutAndroidMethods;

packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -298,4 +298,6 @@ class KeyboardAvoidingView extends React.Component<
   }
 }
 
+export type KeyboardAvoidingViewInstance = KeyboardAvoidingView;
+
 export default KeyboardAvoidingView;

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

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {
   GestureResponderEvent,
@@ -16,6 +17,8 @@
 } from '../../Types/CoreEventTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
 
+export type PressableInstance = HostInstance;
+
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
 import {type RectOrSize} from '../../StyleSheet/Rect';
@@ -165,8 +168,6 @@
   ...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.
@@ -175,7 +176,7 @@
   ref: forwardedRef,
   ...props
 }: {
-  ref?: React.RefSetter<Instance>,
+  ref?: React.RefSetter<PressableInstance>,
   ...PressableProps,
 }): React.Node {
   const {
@@ -215,7 +216,7 @@
     ...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);
@@ -354,6 +355,6 @@
 MemoedPressable.displayName = 'Pressable';
 
 export default MemoedPressable as component(
-  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ref?: React.RefSetter<PressableInstance>,
   ...props: PressableProps
 );

packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -8,10 +8,13 @@
  * @format
  */
 
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ProgressBarAndroidProps} from './ProgressBarAndroidTypes';
 
 import ProgressBarAndroidNativeComponent from './ProgressBarAndroidNativeComponent';
 
+export type ProgressBarAndroidInstance = HostInstance;
+
 const React = require('react');
 
 export type {ProgressBarAndroidProps};
@@ -40,9 +43,7 @@
  * ```
  */
 const ProgressBarAndroid: component(
-  ref?: React.RefSetter<
-    React.ElementRef<typeof ProgressBarAndroidNativeComponent>,
-  >,
+  ref?: React.RefSetter<ProgressBarAndroidInstance>,
   ...props: ProgressBarAndroidProps
 ) = function ProgressBarAndroid({
   ref: forwardedRef,
@@ -52,9 +53,7 @@
   animating = true,
   ...restProps
 }: {
-  ref?: React.RefSetter<
-    React.ElementRef<typeof ProgressBarAndroidNativeComponent>,
-  >,
+  ref?: React.RefSetter<ProgressBarAndroidInstance>,
   ...ProgressBarAndroidProps,
 }) {
   return (

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

@@ -10,11 +10,13 @@
 
 'use strict';
 
-import typeof ProgressBarAndroidNativeComponentType from './ProgressBarAndroidNativeComponent';
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ProgressBarAndroidProps} from './ProgressBarAndroidTypes';
 
 import Platform from '../../Utilities/Platform';
 
+export type ProgressBarAndroidInstance = HostInstance;
+
 export type {ProgressBarAndroidProps};
 
 // A utility type to preserve the semantics of the union uses in the definition
@@ -30,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>
 );
 

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

@@ -205,4 +205,6 @@ class RefreshControl extends React.Component<RefreshControlProps> {
   };
 }
 
+export type RefreshControlInstance = RefreshControl;
+
 export default RefreshControl;

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

@@ -8,8 +8,11 @@
  * @format
  */
 
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ViewProps} from '../View/ViewPropTypes';
 
+export type SafeAreaViewInstance = HostInstance;
+
 import Platform from '../../Utilities/Platform';
 import View from '../View/View';
 import * as React from 'react';
@@ -25,7 +28,7 @@
  * @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,

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

@@ -139,7 +139,7 @@ export interface ScrollViewImperativeMethods {
   readonly getScrollableNode: () => ?number;
   readonly getInnerViewNode: () => ?number;
   readonly getInnerViewRef: () => InnerViewInstance | null;
-  readonly getNativeScrollRef: () => PublicScrollViewInstance | null;
+  readonly getNativeScrollRef: () => ScrollViewInstance | null;
   readonly scrollTo: (
     options?: ScrollViewScrollToOptions | number,
     deprecatedX?: number,
@@ -167,10 +167,13 @@ export interface ScrollViewImperativeMethods {
 export type DecelerationRateType = 'fast' | 'normal' | number;
 export type ScrollResponderType = ScrollViewImperativeMethods;
 
-export interface PublicScrollViewInstance
+export interface ScrollViewInstance
   extends HostInstance,
     ScrollViewImperativeMethods {}
 
+/** @deprecated Use ScrollViewInstance instead */
+export type PublicScrollViewInstance = ScrollViewInstance;
+
 type InnerViewInstance = React.ElementRef<typeof View>;
 
 export type ScrollViewPropsIOS = Readonly<{
@@ -677,7 +680,7 @@ type ScrollViewBaseProps = Readonly<{
    * all of ScrollView's public methods, in addition to native methods like
    * measure, measureLayout, etc.
    */
-  scrollViewRef?: React.RefSetter<PublicScrollViewInstance>,
+  scrollViewRef?: React.RefSetter<ScrollViewInstance>,
 }>;
 
 /** @build-types emit-as-interface Nativewind compatibility */
@@ -874,7 +877,7 @@ class ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
   getNativeScrollRef: ScrollViewImperativeMethods['getNativeScrollRef'] =
     () => {
       // Object.assign in _scrollView's mutator augments nativeInstance in place,
-      // so it is already a PublicScrollViewInstance at runtime.
+      // so it is already a ScrollViewInstance at runtime.
       // $FlowFixMe[incompatible-type]
       return this._scrollView.nativeInstance;
     };
@@ -1170,7 +1173,7 @@ class ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
       (instance: InnerViewInstance): InnerViewInstance => instance,
     );
 
-  _scrollView: RefForwarder<HostInstance, PublicScrollViewInstance | null> =
+  _scrollView: RefForwarder<HostInstance, ScrollViewInstance | null> =
     createRefForwarder(nativeInstance => {
       // This is a hack. Ideally we would forwardRef  to the underlying
       // host component. However, since ScrollView has it's own methods that can be
@@ -1183,22 +1186,19 @@ class ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
       // $FlowFixMe[prop-missing] - Known issue with appending custom methods.
       // $FlowFixMe[incompatible-type]
       // $FlowFixMe[unsafe-object-assign]
-      const publicInstance: PublicScrollViewInstance = Object.assign(
-        nativeInstance,
-        {
-          getScrollResponder: this.getScrollResponder,
-          getScrollableNode: this.getScrollableNode,
-          getInnerViewNode: this.getInnerViewNode,
-          getInnerViewRef: this.getInnerViewRef,
-          getNativeScrollRef: this.getNativeScrollRef,
-          scrollTo: this.scrollTo,
-          scrollToEnd: this.scrollToEnd,
-          flashScrollIndicators: this.flashScrollIndicators,
-          scrollResponderZoomTo: this.scrollResponderZoomTo,
-          scrollResponderScrollNativeHandleToKeyboard:
-            this.scrollResponderScrollNativeHandleToKeyboard,
-        },
-      );
+      const publicInstance: ScrollViewInstance = Object.assign(nativeInstance, {
+        getScrollResponder: this.getScrollResponder,
+        getScrollableNode: this.getScrollableNode,
+        getInnerViewNode: this.getInnerViewNode,
+        getInnerViewRef: this.getInnerViewRef,
+        getNativeScrollRef: this.getNativeScrollRef,
+        scrollTo: this.scrollTo,
+        scrollToEnd: this.scrollToEnd,
+        flashScrollIndicators: this.flashScrollIndicators,
+        scrollResponderZoomTo: this.scrollResponderZoomTo,
+        scrollResponderScrollNativeHandleToKeyboard:
+          this.scrollResponderScrollNativeHandleToKeyboard,
+      });
 
       return publicInstance;
     });
@@ -1935,13 +1935,13 @@ function createRefForwarder<TNativeInstance, TPublicInstance>(
 // component and we need to map `ref` to a differently named prop. This can be
 // removed when `ScrollView` is a functional component.
 const ScrollViewWrapper: component(
-  ref?: React.RefSetter<PublicScrollViewInstance>,
+  ref?: React.RefSetter<ScrollViewInstance>,
   ...props: ScrollViewProps
 ) = function Wrapper({
   ref,
   ...props
 }: {
-  ref?: React.RefSetter<PublicScrollViewInstance>,
+  ref?: React.RefSetter<ScrollViewInstance>,
   ...ScrollViewProps,
 }): React.Node {
   return ref == null ? (

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

@@ -509,4 +509,6 @@ class StatusBar extends React.Component<StatusBarProps> {
   }
 }
 
+export type StatusBarInstance = StatusBar;
+
 export default StatusBar;

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

@@ -8,11 +8,14 @@
  * @format
  */
 
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {NativeSyntheticEvent} from '../../Types/CoreEventTypes';
 import type {AccessibilityState} from '../View/ViewAccessibility';
 import type {ViewProps} from '../View/ViewPropTypes';
 
+export type SwitchInstance = HostInstance;
+
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import useMergeRefs from '../../Utilities/useMergeRefs';
@@ -119,10 +122,6 @@
 const returnsFalse = () => false;
 const returnsTrue = () => true;
 
-type SwitchRef = React.ElementRef<
-  typeof SwitchNativeComponent | typeof AndroidSwitchNativeComponent,
->;
-
 /**
   Renders a boolean input.
 
@@ -165,13 +164,13 @@
   ```
  */
 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 {
@@ -188,9 +187,7 @@
   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);
 

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

@@ -117,6 +117,7 @@ export type {
   TextInputKeyPressEvent,
   TextInputProps,
   TextInputSelectionChangeEvent,
+  TextInputInstance,
   TextInputSubmitEditingEvent,
 };