From 036e4f64c49d6460bfc2d1da8aa974c713038683 Mon Sep 17 00:00:00 2001 From: Sam Zhou Date: Mon, 21 Oct 2024 19:10:42 -0700 Subject: [PATCH] Eliminate 2 more remaining `React.AbstractComponent<...>` in react native Summary: In order to adopt react 19's ref-as-prop model, we need to eliminate all the places where they are treated differently. `React.AbstractComponent` is the worst example of this, and we need to eliminate it. This diff replaces 2 more remaining ones in react-native. Now the only remaining one is the one synced from react repo. Changelog: [Internal] Reviewed By: alexmckenley Differential Revision: D64722899 fbshipit-source-id: 2b2484c385fc5d6c173253f9bee66dfc736368a5 --- .../Libraries/Animated/createAnimatedComponent.js | 14 +++++++------- .../ScrollView/ScrollViewStickyHeader.js | 4 ++-- .../Components/Touchable/TouchableBounce.js | 1 + .../Components/Touchable/TouchableOpacity.js | 1 + .../Libraries/Lists/SectionListModern.js | 2 +- .../__snapshots__/public-api-test.js.snap | 8 ++++---- 6 files changed, 16 insertions(+), 14 deletions(-) diff --git a/packages/react-native/Libraries/Animated/createAnimatedComponent.js b/packages/react-native/Libraries/Animated/createAnimatedComponent.js index fc9153f27cb..cef22cd810f 100644 --- a/packages/react-native/Libraries/Animated/createAnimatedComponent.js +++ b/packages/react-native/Libraries/Animated/createAnimatedComponent.js @@ -35,18 +35,18 @@ export type StrictAnimatedProps = $ReadOnly<{ passthroughAnimatedPropExplicitValues?: ?Props, }>; -export type AnimatedComponentType< - Props: {...}, - +Instance = mixed, -> = React.AbstractComponent, Instance>; +export type AnimatedComponentType = component( + ref: React.RefSetter, + ...AnimatedProps +); export type StrictAnimatedComponentType< Props: {...}, +Instance = mixed, -> = React.AbstractComponent, Instance>; +> = component(ref: React.RefSetter, ...StrictAnimatedProps); export default function createAnimatedComponent( - Component: React.AbstractComponent, + Component: component(ref: React.RefSetter, ...TProps), ): AnimatedComponentType { return unstable_createAnimatedComponentWithAllowlist(Component, null); } @@ -55,7 +55,7 @@ export function unstable_createAnimatedComponentWithAllowlist< TProps: {...}, TInstance, >( - Component: React.AbstractComponent, + Component: component(ref: React.RefSetter, ...TProps), allowlist: ?AnimatedPropsAllowlist, ): StrictAnimatedComponentType { const AnimatedComponent = React.forwardRef< diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js b/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js index d60e87f4ec7..d83abfe57a2 100644 --- a/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js +++ b/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js @@ -275,12 +275,12 @@ const ScrollViewStickyHeaderWithForwardedRef: component( : null; return ( - /* $FlowFixMe[prop-missing] passthroughAnimatedPropExplicitValues isn't properly - included in the Animated.View flow type. */ { this.props.onPress !== undefined && !this.props.disabled } + // $FlowFixMe[prop-missing] ref={this.props.hostRef} {...eventHandlersWithoutBlurAndFocus}> {this.props.children} diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js index 92eea6cb3fc..ef9b2572b69 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js @@ -291,6 +291,7 @@ class TouchableOpacity extends React.Component { this.props.onPress !== undefined && !this.props.disabled } + // $FlowFixMe[prop-missing] ref={this.props.hostRef} {...eventHandlersWithoutBlurAndFocus}> {this.props.children} diff --git a/packages/react-native/Libraries/Lists/SectionListModern.js b/packages/react-native/Libraries/Lists/SectionListModern.js index 2d4318f27da..788eead2c91 100644 --- a/packages/react-native/Libraries/Lists/SectionListModern.js +++ b/packages/react-native/Libraries/Lists/SectionListModern.js @@ -16,7 +16,7 @@ import type { SectionBase as _SectionBase, VirtualizedSectionListProps, } from '@react-native/virtualized-lists'; -import type {AbstractComponent, ElementRef} from 'react'; +import type {ElementRef} from 'react'; import Platform from '../Utilities/Platform'; import {VirtualizedSectionList} from '@react-native/virtualized-lists'; diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index 8e7ddf43314..b64fde6390c 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -744,22 +744,22 @@ export type StrictAnimatedProps = $ReadOnly<{ export type AnimatedComponentType< Props: { ... }, +Instance = mixed, -> = React.AbstractComponent, Instance>; +> = component(ref: React.RefSetter, ...AnimatedProps); export type StrictAnimatedComponentType< Props: { ... }, +Instance = mixed, -> = React.AbstractComponent, Instance>; +> = component(ref: React.RefSetter, ...StrictAnimatedProps); declare export default function createAnimatedComponent< TProps: { ... }, TInstance, >( - Component: React.AbstractComponent + Component: component(ref: React.RefSetter, ...TProps) ): AnimatedComponentType; declare export function unstable_createAnimatedComponentWithAllowlist< TProps: { ... }, TInstance, >( - Component: React.AbstractComponent, + Component: component(ref: React.RefSetter, ...TProps), allowlist: ?AnimatedPropsAllowlist ): StrictAnimatedComponentType; "