From a622a4376403526f4872a451777b67d0eb2220e4 Mon Sep 17 00:00:00 2001 From: Sam Zhou Date: Tue, 13 Aug 2024 09:08:44 -0700 Subject: [PATCH] Replace all exact React.Element type in react-native with ExactReactElement_DEPRECATED (#45998) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/45998 The exact `React.Element` type is deprecated and will be removed in a future version of Flow. Changelog: [Internal] Reviewed By: gkz Differential Revision: D61205640 fbshipit-source-id: a029a3a46c7d8d9f94b0b931b991b2ce461151b2 --- .../Animated/components/AnimatedScrollView.js | 4 ++-- .../Components/ScrollView/ScrollView.js | 4 ++-- .../ScrollView/ScrollViewStickyHeader.js | 2 +- .../Libraries/Lists/SectionList.js | 2 +- .../Libraries/Lists/SectionListModern.js | 2 +- .../__snapshots__/public-api-test.js.snap | 6 ++--- .../examples/ScrollView/ScrollViewExample.js | 4 ++-- .../Lists/VirtualizedList.js | 2 +- .../Lists/VirtualizedListProps.js | 24 ++++++++++++++----- 9 files changed, 31 insertions(+), 19 deletions(-) diff --git a/packages/react-native/Libraries/Animated/components/AnimatedScrollView.js b/packages/react-native/Libraries/Animated/components/AnimatedScrollView.js index 029563d4bb9059..f5375653125367 100644 --- a/packages/react-native/Libraries/Animated/components/AnimatedScrollView.js +++ b/packages/react-native/Libraries/Animated/components/AnimatedScrollView.js @@ -71,7 +71,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef( props: { ...React.ElementConfig, // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView - refreshControl: React.Element, + refreshControl: ExactReactElement_DEPRECATED, }, forwardedRef: | {current: Instance | null, ...} @@ -97,7 +97,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef( >(intermediatePropsForRefreshControl); // NOTE: Assumes that refreshControl.ref` and `refreshControl.style` can be // safely clobbered. - const refreshControl: React.Element = + const refreshControl: ExactReactElement_DEPRECATED = React.cloneElement(props.refreshControl, { ...refreshControlAnimatedProps, ref: refreshControlRef, diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollView.js b/packages/react-native/Libraries/Components/ScrollView/ScrollView.js index 2a6dd0ff4e8ca6..fc330dfd5c5726 100644 --- a/packages/react-native/Libraries/Components/ScrollView/ScrollView.js +++ b/packages/react-native/Libraries/Components/ScrollView/ScrollView.js @@ -643,7 +643,7 @@ export type Props = $ReadOnly<{| */ /* $FlowFixMe[unclear-type] - how to handle generic type without existential * operator? */ - refreshControl?: ?React.Element, + refreshControl?: ?ExactReactElement_DEPRECATED, children?: React.Node, /** * A ref to the inner View element of the ScrollView. This should be used @@ -1648,7 +1648,7 @@ class ScrollView extends React.Component { this.props.onTouchMove && this.props.onTouchMove(e); }; - render(): React.Node | React.Element { + render(): React.Node { const horizontal = this.props.horizontal === true; const NativeScrollView = horizontal diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js b/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js index f22831ff7e0d24..052f01eb164d0e 100644 --- a/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js +++ b/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js @@ -19,7 +19,7 @@ import * as React from 'react'; import {useCallback, useEffect, useMemo, useRef, useState} from 'react'; export type Props = $ReadOnly<{ - children?: React.Element<$FlowFixMe>, + children?: ExactReactElement_DEPRECATED<$FlowFixMe>, nextHeaderLayoutY: ?number, onLayout: (event: LayoutEvent) => void, scrollAnimatedValue: Animated.Value, diff --git a/packages/react-native/Libraries/Lists/SectionList.js b/packages/react-native/Libraries/Lists/SectionList.js index 2f870241ea7f97..26ad34fce49f7f 100644 --- a/packages/react-native/Libraries/Lists/SectionList.js +++ b/packages/react-native/Libraries/Lists/SectionList.js @@ -33,7 +33,7 @@ type RequiredProps> = {| * * sections: $ReadOnlyArray<{ * data: $ReadOnlyArray, - * renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>, + * renderItem?: ({item: SectionItem, ...}) => ?React.MixedElement, * ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>, * }> */ diff --git a/packages/react-native/Libraries/Lists/SectionListModern.js b/packages/react-native/Libraries/Lists/SectionListModern.js index d9676f106f8cfc..45772d0049ebf0 100644 --- a/packages/react-native/Libraries/Lists/SectionListModern.js +++ b/packages/react-native/Libraries/Lists/SectionListModern.js @@ -34,7 +34,7 @@ type RequiredProps> = {| * * sections: $ReadOnlyArray<{ * data: $ReadOnlyArray, - * renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>, + * renderItem?: ({item: SectionItem, ...}) => ?React.MixedElement, * ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>, * }> */ 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 528f1c7eaadd86..beab205c536f38 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 @@ -2147,7 +2147,7 @@ export type Props = $ReadOnly<{| snapToStart?: ?boolean, snapToEnd?: ?boolean, removeClippedSubviews?: ?boolean, - refreshControl?: ?React.Element, + refreshControl?: ?ExactReactElement_DEPRECATED, children?: React.Node, innerViewRef?: React.RefSetter, scrollViewRef?: React.RefSetter, @@ -2268,7 +2268,7 @@ declare class ScrollView extends React.Component { _handleTouchCancel: (e: PressEvent) => void; _handleTouchStart: (e: PressEvent) => void; _handleTouchMove: (e: PressEvent) => void; - render(): React.Node | React.Element; + render(): React.Node; } type RefForwarder = { getForwardingRef: ( @@ -2401,7 +2401,7 @@ exports[`public API should not change unintentionally Libraries/Components/Scrol exports[`public API should not change unintentionally Libraries/Components/ScrollView/ScrollViewStickyHeader.js 1`] = ` "export type Props = $ReadOnly<{ - children?: React.Element<$FlowFixMe>, + children?: ExactReactElement_DEPRECATED<$FlowFixMe>, nextHeaderLayoutY: ?number, onLayout: (event: LayoutEvent) => void, scrollAnimatedValue: Animated.Value, diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js index a3ff659c67a170..a67ba9766d6c0e 100644 --- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js +++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js @@ -63,9 +63,9 @@ class EnableDisableList extends React.Component<{}, {scrollEnabled: boolean}> { let AppendingListItemCount = 6; class AppendingList extends React.Component< {}, - {items: Array>>}, + {items: Array>>}, > { - state: {items: Array>>} = { + state: {items: Array>>} = { items: [...Array(AppendingListItemCount)].map((_, ii) => ( )), diff --git a/packages/virtualized-lists/Lists/VirtualizedList.js b/packages/virtualized-lists/Lists/VirtualizedList.js index 9f950916a2dfc0..588e3ed9d3883c 100644 --- a/packages/virtualized-lists/Lists/VirtualizedList.js +++ b/packages/virtualized-lists/Lists/VirtualizedList.js @@ -939,7 +939,7 @@ class VirtualizedList extends StateSafePureComponent { // 2a. Add a cell for ListEmptyComponent if applicable const itemCount = this.props.getItemCount(data); if (itemCount === 0 && ListEmptyComponent) { - const element: React.Element = ((React.isValidElement( + const element: ExactReactElement_DEPRECATED = ((React.isValidElement( ListEmptyComponent, ) ? ( ListEmptyComponent diff --git a/packages/virtualized-lists/Lists/VirtualizedListProps.js b/packages/virtualized-lists/Lists/VirtualizedListProps.js index 1a956ea64ca14b..0d2730185c1213 100644 --- a/packages/virtualized-lists/Lists/VirtualizedListProps.js +++ b/packages/virtualized-lists/Lists/VirtualizedListProps.js @@ -155,17 +155,26 @@ type OptionalProps = {| * `highlight` and `unhighlight` (which set the `highlighted: boolean` prop) are insufficient for * your use-case. */ - ListItemComponent?: ?(React.ComponentType | React.Element), + ListItemComponent?: ?( + | React.ComponentType + | ExactReactElement_DEPRECATED + ), /** * Rendered when the list is empty. Can be a React Component Class, a render function, or * a rendered element. */ - ListEmptyComponent?: ?(React.ComponentType | React.Element), + ListEmptyComponent?: ?( + | React.ComponentType + | ExactReactElement_DEPRECATED + ), /** * Rendered at the bottom of all the items. Can be a React Component Class, a render function, or * a rendered element. */ - ListFooterComponent?: ?(React.ComponentType | React.Element), + ListFooterComponent?: ?( + | React.ComponentType + | ExactReactElement_DEPRECATED + ), /** * Styling for internal View for ListFooterComponent */ @@ -174,7 +183,10 @@ type OptionalProps = {| * Rendered at the top of all the items. Can be a React Component Class, a render function, or * a rendered element. */ - ListHeaderComponent?: ?(React.ComponentType | React.Element), + ListHeaderComponent?: ?( + | React.ComponentType + | ExactReactElement_DEPRECATED + ), /** * Styling for internal View for ListHeaderComponent */ @@ -244,7 +256,7 @@ type OptionalProps = {| * component built internally. The onRefresh and refreshing * props are also ignored. Only works for vertical VirtualizedList. */ - refreshControl?: ?React.Element, + refreshControl?: ?ExactReactElement_DEPRECATED, /** * Set this true while waiting for new data from a refresh. */ @@ -258,7 +270,7 @@ type OptionalProps = {| /** * Render a custom scroll component, e.g. with a differently styled `RefreshControl`. */ - renderScrollComponent?: (props: Object) => React.Element, + renderScrollComponent?: (props: Object) => ExactReactElement_DEPRECATED, /** * Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off * screen. Similar fill rate/responsiveness tradeoff as `maxToRenderPerBatch`.