Replace all exact React.Element type in react-native with ExactReactE…

…lement_DEPRECATED (facebook#45998) Summary: Pull Request resolved: facebook#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
rozele · Aug 13, 2024 · a622a43 · a622a43
1 parent 5f88c65
commit a622a43
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 19 deletions.
diff --git 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<typeof ScrollView>,
       // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
-      refreshControl: React.Element<any>,
+      refreshControl: ExactReactElement_DEPRECATED<any>,
     },
     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<typeof RefreshControl> =
+    const refreshControl: ExactReactElement_DEPRECATED<typeof RefreshControl> =
       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
@@ -643,7 +643,7 @@ export type Props = $ReadOnly<{|
    */
   /* $FlowFixMe[unclear-type] - how to handle generic type without existential
    * operator? */
-  refreshControl?: ?React.Element<any>,
+  refreshControl?: ?ExactReactElement_DEPRECATED<any>,
   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<Props, State> {
     this.props.onTouchMove && this.props.onTouchMove(e);
   };
 
-  render(): React.Node | React.Element<string> {
+  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
@@ -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
@@ -33,7 +33,7 @@ type RequiredProps<SectionT: SectionBase<any>> = {|
    *
    *     sections: $ReadOnlyArray<{
    *       data: $ReadOnlyArray<SectionItem>,
-   *       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
@@ -34,7 +34,7 @@ type RequiredProps<SectionT: SectionBase<any>> = {|
    *
    *     sections: $ReadOnlyArray<{
    *       data: $ReadOnlyArray<SectionItem>,
-   *       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
@@ -2147,7 +2147,7 @@ export type Props = $ReadOnly<{|
   snapToStart?: ?boolean,
   snapToEnd?: ?boolean,
   removeClippedSubviews?: ?boolean,
-  refreshControl?: ?React.Element<any>,
+  refreshControl?: ?ExactReactElement_DEPRECATED<any>,
   children?: React.Node,
   innerViewRef?: React.RefSetter<InnerViewInstance>,
   scrollViewRef?: React.RefSetter<PublicScrollViewInstance>,
@@ -2268,7 +2268,7 @@ declare class ScrollView extends React.Component<Props, State> {
   _handleTouchCancel: (e: PressEvent) => void;
   _handleTouchStart: (e: PressEvent) => void;
   _handleTouchMove: (e: PressEvent) => void;
-  render(): React.Node | React.Element<string>;
+  render(): React.Node;
 }
 type RefForwarder<TNativeInstance, TPublicInstance> = {
   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
@@ -63,9 +63,9 @@ class EnableDisableList extends React.Component<{}, {scrollEnabled: boolean}> {
 let AppendingListItemCount = 6;
 class AppendingList extends React.Component<
   {},
-  {items: Array<React.Element<Class<Item>>>},
+  {items: Array<ExactReactElement_DEPRECATED<Class<Item>>>},
 > {
-  state: {items: Array<React.Element<Class<Item>>>} = {
+  state: {items: Array<ExactReactElement_DEPRECATED<Class<Item>>>} = {
     items: [...Array(AppendingListItemCount)].map((_, ii) => (
       <Item msg={`Item ${ii}`} />
     )),

diff --git a/packages/virtualized-lists/Lists/VirtualizedList.js b/packages/virtualized-lists/Lists/VirtualizedList.js
@@ -939,7 +939,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     // 2a. Add a cell for ListEmptyComponent if applicable
     const itemCount = this.props.getItemCount(data);
     if (itemCount === 0 && ListEmptyComponent) {
-      const element: React.Element<any> = ((React.isValidElement(
+      const element: ExactReactElement_DEPRECATED<any> = ((React.isValidElement(
         ListEmptyComponent,
       ) ? (
         ListEmptyComponent

diff --git 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<any> | React.Element<any>),
+  ListItemComponent?: ?(
+    | React.ComponentType<any>
+    | ExactReactElement_DEPRECATED<any>
+  ),
   /**
    * Rendered when the list is empty. Can be a React Component Class, a render function, or
    * a rendered element.
    */
-  ListEmptyComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  ListEmptyComponent?: ?(
+    | React.ComponentType<any>
+    | ExactReactElement_DEPRECATED<any>
+  ),
   /**
    * Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
    * a rendered element.
    */
-  ListFooterComponent?: ?(React.ComponentType<any> | React.Element<any>),
+  ListFooterComponent?: ?(
+    | React.ComponentType<any>
+    | ExactReactElement_DEPRECATED<any>
+  ),
   /**
    * 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<any> | React.Element<any>),
+  ListHeaderComponent?: ?(
+    | React.ComponentType<any>
+    | ExactReactElement_DEPRECATED<any>
+  ),
   /**
    * Styling for internal View for ListHeaderComponent
    */
@@ -244,7 +256,7 @@ type OptionalProps = {|
    * <RefreshControl> component built internally. The onRefresh and refreshing
    * props are also ignored. Only works for vertical VirtualizedList.
    */
-  refreshControl?: ?React.Element<any>,
+  refreshControl?: ?ExactReactElement_DEPRECATED<any>,
   /**
    * 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<any>,
+  renderScrollComponent?: (props: Object) => ExactReactElement_DEPRECATED<any>,
   /**
    * 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`.