Add *Instance type exports for all built-in components

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

@@ -9,9 +9,12 @@
  */
 
 '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';

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

@@ -286,6 +286,8 @@ const NativeTouchable:
 
 type ButtonRef = React.ElementRef<typeof NativeTouchable>;
 
+export type ButtonInstance = ButtonRef;
+
 const Button: component(
   ref?: React.RefSetter<ButtonRef>,
   ...props: ButtonProps

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';

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};

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

@@ -10,11 +10,14 @@
 
 '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';
 
+export type ProgressBarAndroidInstance = HostInstance;
+
 export type {ProgressBarAndroidProps};
 
 // A utility type to preserve the semantics of the union uses in the definition

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';

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';

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

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

packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js

@@ -8,10 +8,13 @@
  * @format
  */
 
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {AccessibilityState} from '../View/ViewAccessibility';
 import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
+export type TouchableHighlightInstance = HostInstance;
+
 import View from '../../Components/View/View';
 import Pressability, {
   type PressabilityConfig,

packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -409,4 +409,6 @@ const getBackgroundProp =
 
 TouchableNativeFeedback.displayName = 'TouchableNativeFeedback';
 
+export type TouchableNativeFeedbackInstance = TouchableNativeFeedback;
+
 export default TouchableNativeFeedback;

packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js

@@ -8,9 +8,12 @@
  * @format
  */
 
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
+export type TouchableOpacityInstance = HostInstance;
+
 import Animated from '../../Animated/Animated';
 import Easing from '../../Animated/Easing';
 import Pressability, {

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

@@ -8,10 +8,13 @@
  * @format
  */
 
+import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {ViewProps} from './ViewPropTypes';
 
 import TextAncestorContext from '../../Text/TextAncestorContext';
 import ViewNativeComponent from './ViewNativeComponent';
+
+export type ViewInstance = HostInstance;
 import * as React from 'react';
 import {use} from 'react';
 

packages/react-native/Libraries/Image/Image.android.js

@@ -8,12 +8,14 @@
  * @format
  */
 
 import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {ImageProps} from './ImageProps';
 import type {AbstractImageAndroid, ImageAndroid} from './ImageTypes.flow';
 
+export type ImageInstance = HostInstance;
+
 import flattenStyle from '../StyleSheet/flattenStyle';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';

packages/react-native/Libraries/Image/Image.ios.js

@@ -8,13 +8,15 @@
  * @format
  */
 
 import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {ImageProps} from './ImageProps';
 import type {AbstractImageIOS, ImageIOS} from './ImageTypes.flow';
 import type {ImageSize} from './NativeImageLoaderAndroid';
 
+export type ImageInstance = HostInstance;
+
 import {createRootTag} from '../ReactNative/RootTag';
 import flattenStyle from '../StyleSheet/flattenStyle';
 import StyleSheet from '../StyleSheet/StyleSheet';

packages/react-native/Libraries/Image/ImageBackground.js

@@ -105,4 +105,6 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
   }
 }
 
+export type ImageBackgroundInstance = ImageBackground;
+
 export default ImageBackground;

packages/react-native/Libraries/Image/ImageTypes.flow.js

@@ -10,6 +10,8 @@
 
 import type {HostInstance} from '../..';
 import type {RootTag} from '../Types/RootTagTypes';
+
+export type ImageInstance = HostInstance;
 import type {ResolvedAssetSource} from './AssetSourceResolver';
 import type {ImageProps as ImagePropsType} from './ImageProps';
 import type {ImageSource} from './ImageSource';

packages/react-native/Libraries/Lists/FlatList.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {PublicScrollViewInstance} from '../Components/ScrollView/ScrollView';
+import type {ScrollViewInstance} from '../Components/ScrollView/ScrollView';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {
   ListRenderItem,
@@ -398,7 +398,7 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
   /**
    * Provides a reference to the underlying host component
    */
-  getNativeScrollRef(): ?PublicScrollViewInstance {
+  getNativeScrollRef(): ?ScrollViewInstance {
     if (this._listRef) {
       return this._listRef.getScrollRef();
     }
@@ -706,4 +706,6 @@ const styles = StyleSheet.create({
   row: {flexDirection: 'row'},
 });
 
+export type FlatListInstance = FlatList<>;
+
 export default FlatList;

packages/react-native/Libraries/Lists/SectionList.js

@@ -265,3 +265,5 @@ export default class SectionList<
     this._wrapperListRef = ref;
   };
 }
+
+export type SectionListInstance = SectionList<>;

packages/react-native/Libraries/Lists/VirtualizedList.js

@@ -11,11 +11,14 @@
 'use strict';
 
 import VirtualizedLists from '@react-native/virtualized-lists';
+import * as React from 'react';
 
 type VirtualizedListType = typeof VirtualizedLists.VirtualizedList;
 const VirtualizedListComponent: VirtualizedListType =
   VirtualizedLists.VirtualizedList;
 
+export type VirtualizedListInstance = React.ElementRef<VirtualizedListType>;
+
 export type {
   ListRenderItemInfo,
   ListRenderItem,

packages/react-native/Libraries/Lists/VirtualizedSectionList.js

@@ -11,12 +11,16 @@
 'use strict';
 
 import VirtualizedLists from '@react-native/virtualized-lists';
+import * as React from 'react';
 
 type VirtualizedSectionListType =
   typeof VirtualizedLists.VirtualizedSectionList;
 const VirtualizedSectionList: VirtualizedSectionListType =
   VirtualizedLists.VirtualizedSectionList;
 
+export type VirtualizedSectionListInstance =
+  React.ElementRef<VirtualizedSectionListType>;
+
 export type {
   SectionBase,
   ScrollToLocationParamsType,