Replace most of the remaining React.AbstractComponent in react-native

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

@@ -371,10 +371,10 @@ type AndroidProps = $ReadOnly<{|
   fadingEdgeLength?: ?number,
 |}>;
 
-type StickyHeaderComponentType = React.AbstractComponent<
-  ScrollViewStickyHeaderProps,
-  $ReadOnly<interface {setNextHeaderY: number => void}>,
->;
+type StickyHeaderComponentType = component(
+  ref?: React.RefSetter<$ReadOnly<interface {setNextHeaderY: number => void}>>,
+  ...ScrollViewStickyHeaderProps
+);
 
 export type Props = $ReadOnly<{|
   ...ViewProps,

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

@@ -87,7 +87,7 @@ type Props = $ReadOnly<{|
   backgroundColor?: ?ColorValue,
 |}>;
 
-const InputAccessoryView: React.AbstractComponent<Props> = (props: Props) => {
+const InputAccessoryView: React.ComponentType<Props> = (props: Props) => {
   const {width} = useWindowDimensions();
 
   if (Platform.OS === 'ios') {

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

@@ -1086,7 +1086,10 @@ type ImperativeMethods = $ReadOnly<{|
  * or control this param programmatically with native code.
  *
  */
-type InternalTextInput = (props: Props) => React.Node;
+type InternalTextInput = component(
+  ref: React.RefSetter<$ReadOnly<{...HostInstance, ...ImperativeMethods}>>,
+  ...Props
+);
 
 export type TextInputComponentStatics = $ReadOnly<{|
   State: $ReadOnly<{|
@@ -1097,11 +1100,4 @@ export type TextInputComponentStatics = $ReadOnly<{|
   |}>,
 |}>;
 
-export type TextInputType = React.AbstractComponent<
-  React.ElementConfig<InternalTextInput>,
-  $ReadOnly<{|
-    ...HostInstance,
-    ...ImperativeMethods,
-  |}>,
-> &
-  TextInputComponentStatics;
+export type TextInputType = InternalTextInput & TextInputComponentStatics;

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

@@ -16,7 +16,7 @@
   SectionBase as _SectionBase,
   VirtualizedSectionListProps,
 } from '@react-native/virtualized-lists';
 import type {AbstractComponent, ElementRef} from 'react';
 
 import Platform from '../Utilities/Platform';
 import {VirtualizedSectionList} from '@react-native/virtualized-lists';
@@ -93,7 +93,7 @@
   removeClippedSubviews?: boolean,
 |};
 
-export type Props<SectionT> = {|
+export type Props<SectionT: SectionBase<any>> = $ReadOnly<{|
   ...$Diff<
     VirtualizedSectionListProps<SectionT>,
     {
@@ -115,7 +115,7 @@
   >,
   ...RequiredProps<SectionT>,
   ...OptionalProps<SectionT>,
-|};
+|}>;
 
 /**
  * A performant interface for rendering sectioned lists, supporting the most handy features:
@@ -172,10 +172,10 @@
  *   Alternatively, you can provide a custom `keyExtractor` prop.
  *
  */
-const SectionList: AbstractComponent<Props<SectionBase<any>>, any> = forwardRef<
-  Props<SectionBase<any>>,
-  any,
->((props, ref) => {
+const SectionList: component(
+  ref?: React.RefSetter<any>,
+  ...Props<SectionBase<any>>
+) = forwardRef<Props<SectionBase<any>>, any>((props, ref) => {
   const propsWithDefaults = {
     stickySectionHeadersEnabled: Platform.OS === 'ios',
     ...props,

packages/react-native/Libraries/LogBox/Data/LogBoxData.js

@@ -421,7 +421,7 @@ type State = $ReadOnly<{|
   selectedLogIndex: number,
 |}>;
 
-type SubscribedComponent = React.AbstractComponent<
+type SubscribedComponent = React.ComponentType<
   $ReadOnly<{|
     logs: $ReadOnlyArray<LogBoxLog>,
     isDisabled: boolean,
@@ -431,7 +431,7 @@ type SubscribedComponent = React.AbstractComponent<
 
 export function withSubscription(
   WrappedComponent: SubscribedComponent,
-): React.AbstractComponent<{||}> {
+): React.ComponentType<{||}> {
   class LogBoxStateSubscription extends React.Component<Props, State> {
     static getDerivedStateFromError(): {hasError: boolean} {
       return {hasError: true};

packages/react-native/Libraries/LogBox/LogBoxInspectorContainer.js

@@ -65,4 +65,4 @@ export class _LogBoxInspectorContainer extends React.Component<Props> {
 
 export default (LogBoxData.withSubscription(
   _LogBoxInspectorContainer,
-): React.AbstractComponent<{||}>);
+): React.ComponentType<{||}>);

packages/react-native/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -102,4 +102,4 @@ const styles = StyleSheet.create({
 
 export default (LogBoxData.withSubscription(
   _LogBoxNotificationContainer,
-): React.AbstractComponent<{||}>);
+): React.ComponentType<{||}>);

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -27,7 +27,7 @@ type Props = $ReadOnly<{
   level: LogLevel,
 }>;
 
-const LogBoxInspectorHeaderSafeArea: React.AbstractComponent<ViewProps> =
+const LogBoxInspectorHeaderSafeArea: React.ComponentType<ViewProps> =
   Platform.OS === 'android' ? View : SafeAreaView;
 
 export default function LogBoxInspectorHeader(props: Props): React.Node {

packages/react-native/Libraries/Modal/Modal.js

@@ -342,8 +342,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const ExportedModal: React.AbstractComponent<
-  React.ElementConfig<typeof Modal>,
-> = ModalInjection.unstable_Modal ?? Modal;
+const ExportedModal: React.ComponentType<React.ElementConfig<typeof Modal>> =
+  ModalInjection.unstable_Modal ?? Modal;
 
 module.exports = ExportedModal;

packages/react-native/Libraries/NativeComponent/NativeComponentRegistry.js

@@ -124,7 +124,7 @@ export function get<Config>(
 export function getWithFallback_DEPRECATED<Config>(
   name: string,
   viewConfigProvider: () => PartialViewConfig,
-): React.AbstractComponent<Config> {
+): React.ComponentType<Config> {
   if (getRuntimeConfig == null) {
     // `getRuntimeConfig == null` when static view configs are disabled
     // If `setRuntimeConfigProvider` is not configured, use native reflection.

packages/react-native/Libraries/ReactNative/AppContainer.js

@@ -24,7 +24,7 @@ export type Props = $ReadOnly<{|
   internal_excludeInspector?: boolean,
 |}>;
 
-const AppContainer: React.AbstractComponent<Props> = __DEV__
+const AppContainer: component(...Props) = __DEV__
   ? require('./AppContainer-dev').default
   : require('./AppContainer-prod').default;
 

packages/react-native/Libraries/ReactNative/getCachedComponentWithDebugName.js

@@ -8,11 +8,9 @@
  * @format
  */
 
-import type {AbstractComponent} from 'react';
-
 import * as React from 'react';
 
-type NoopComponent = AbstractComponent<{children: React.Node}>;
+type NoopComponent = component(children: React.Node);
 
 const cache: Map<
   string, // displayName

packages/react-native/Libraries/ReactNative/renderApplication.js

@@ -23,10 +23,12 @@ import * as React from 'react';
 // require BackHandler so it sets the default handler that exits the app if no listeners respond
 import '../Utilities/BackHandler';
 
-type ActivityType = React.AbstractComponent<{
-  mode: 'visible' | 'hidden',
-  children: React.Node,
-}>;
+type ActivityType = component(
+  ...{
+    mode: 'visible' | 'hidden',
+    children: React.Node,
+  }
+);
 
 export default function renderApplication<Props: Object>(
   RootComponent: React.ComponentType<Props>,

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -2084,10 +2084,12 @@ type AndroidProps = $ReadOnly<{|
   persistentScrollbar?: ?boolean,
   fadingEdgeLength?: ?number,
 |}>;
-type StickyHeaderComponentType = React.AbstractComponent<
-  ScrollViewStickyHeaderProps,
-  $ReadOnly<interface { setNextHeaderY: (number) => void }>,
->;
+type StickyHeaderComponentType = component(
+  ref?: React.RefSetter<
+    $ReadOnly<interface { setNextHeaderY: (number) => void }>,
+  >,
+  ...ScrollViewStickyHeaderProps
+);
 export type Props = $ReadOnly<{|
   ...ViewProps,
   ...IOSProps,
@@ -2751,7 +2753,7 @@ exports[`public API should not change unintentionally Libraries/Components/TextI
   style?: ?ViewStyleProp,
   backgroundColor?: ?ColorValue,
 |}>;
-declare const InputAccessoryView: React.AbstractComponent<Props>;
+declare const InputAccessoryView: React.ComponentType<Props>;
 declare export default typeof InputAccessoryView;
 "
 `;
@@ -3119,7 +3121,10 @@ type ImperativeMethods = $ReadOnly<{|
   getNativeRef: () => ?HostInstance,
   setSelection: (start: number, end: number) => void,
 |}>;
-type InternalTextInput = (props: Props) => React.Node;
+type InternalTextInput = component(
+  ref: React.RefSetter<$ReadOnly<{ ...HostInstance, ...ImperativeMethods }>>,
+  ...Props
+);
 export type TextInputComponentStatics = $ReadOnly<{|
   State: $ReadOnly<{|
     currentlyFocusedInput: () => ?HostInstance,
@@ -3128,14 +3133,7 @@ export type TextInputComponentStatics = $ReadOnly<{|
     blurTextInput: (textField: ?HostInstance) => void,
   |}>,
 |}>;
-export type TextInputType = React.AbstractComponent<
-  React.ElementConfig<InternalTextInput>,
-  $ReadOnly<{|
-    ...HostInstance,
-    ...ImperativeMethods,
-  |}>,
-> &
-  TextInputComponentStatics;
+export type TextInputType = InternalTextInput & TextInputComponentStatics;
 "
 `;
 
@@ -5842,7 +5840,7 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
   onEndReached?: ?(info: { distanceFromEnd: number, ... }) => void,
   removeClippedSubviews?: boolean,
 |};
-export type Props<SectionT> = {|
+export type Props<SectionT: SectionBase<any>> = $ReadOnly<{|
   ...$Diff<
     VirtualizedSectionListProps<SectionT>,
     {
@@ -5864,8 +5862,11 @@ export type Props<SectionT> = {|
   >,
   ...RequiredProps<SectionT>,
   ...OptionalProps<SectionT>,
-|};
-declare const SectionList: AbstractComponent<Props<SectionBase<any>>, any>;
+|}>;
+declare const SectionList: component(
+  ref?: React.RefSetter<any>,
+  ...Props<SectionBase<any>>
+);
 declare export default typeof SectionList;
 "
 `;
@@ -5979,7 +5980,7 @@ declare export function addIgnorePatterns(
 declare export function setDisabled(value: boolean): void;
 declare export function isDisabled(): boolean;
 declare export function observe(observer: Observer): Subscription;
-type SubscribedComponent = React.AbstractComponent<
+type SubscribedComponent = React.ComponentType<
   $ReadOnly<{|
     logs: $ReadOnlyArray<LogBoxLog>,
     isDisabled: boolean,
@@ -5988,7 +5989,7 @@ type SubscribedComponent = React.AbstractComponent<
 >;
 declare export function withSubscription(
   WrappedComponent: SubscribedComponent
-): React.AbstractComponent<{||}>;
+): React.ComponentType<{||}>;
 "
 `;
 
@@ -6148,7 +6149,7 @@ declare export class _LogBoxInspectorContainer extends React.Component<Props> {
   _handleMinimize: $FlowFixMe;
   _handleSetSelectedLog: $FlowFixMe;
 }
-declare export default React.AbstractComponent<{||}>;
+declare export default React.ComponentType<{||}>;
 "
 `;
 
@@ -6159,7 +6160,7 @@ exports[`public API should not change unintentionally Libraries/LogBox/LogBoxNot
   isDisabled?: ?boolean,
 |}>;
 declare export function _LogBoxNotificationContainer(props: Props): React.Node;
-declare export default React.AbstractComponent<{||}>;
+declare export default React.ComponentType<{||}>;
 "
 `;
 
@@ -6441,7 +6442,7 @@ declare class Modal extends React.Component<Props, State> {
   render(): React.Node;
   _shouldSetResponder(): boolean;
 }
-declare const ExportedModal: React.AbstractComponent<
+declare const ExportedModal: React.ComponentType<
   React.ElementConfig<typeof Modal>,
 >;
 declare module.exports: ExportedModal;
@@ -6485,7 +6486,7 @@ declare export function get<Config>(
 declare export function getWithFallback_DEPRECATED<Config>(
   name: string,
   viewConfigProvider: () => PartialViewConfig
-): React.AbstractComponent<Config>;
+): React.ComponentType<Config>;
 declare export function unstable_hasStaticViewConfig(name: string): boolean;
 "
 `;
@@ -7304,7 +7305,7 @@ exports[`public API should not change unintentionally Libraries/ReactNative/AppC
   internal_excludeLogBox?: boolean,
   internal_excludeInspector?: boolean,
 |}>;
-declare const AppContainer: React.AbstractComponent<Props>;
+declare const AppContainer: component(...Props);
 declare module.exports: AppContainer;
 "
 `;
@@ -7694,7 +7695,7 @@ exports[`public API should not change unintentionally Libraries/ReactNative/UIMa
 `;
 
 exports[`public API should not change unintentionally Libraries/ReactNative/getCachedComponentWithDebugName.js 1`] = `
-"type NoopComponent = AbstractComponent<{ children: React.Node }>;
+"type NoopComponent = component(children: React.Node);
 declare export default function getCachedComponentWithDisplayName(
   displayName: string
 ): NoopComponent;

packages/react-native/src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE.js

@@ -16,10 +16,10 @@ import UIManager from '../../../Libraries/ReactNative/UIManager';
 import Platform from '../../../Libraries/Utilities/Platform';
 import * as React from 'react';
 
-const exported: React.AbstractComponent<
-  ViewProps,
-  React.ElementRef<typeof View>,
-> = Platform.select({
+const exported: component(
+  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ...ViewProps
+) = Platform.select({
   ios: require('../../../src/private/specs/components/RCTSafeAreaViewNativeComponent')
     .default,
   android: UIManager.hasViewManagerConfig('RCTSafeAreaView')

packages/rn-tester/js/examples/Experimental/W3CPointerEventsExample.js

@@ -103,7 +103,7 @@ function RelativeChildExample({log}: {log: string => void}) {
 function PointerEventScaffolding({
   Example,
 }: {
-  Example: React.AbstractComponent<{log: string => void}>,
+  Example: component(log: (string) => void),
 }) {
   const [eventsLog, setEventsLog] = React.useState('');
   const clear = () => setEventsLog('');