From fa89dd68b0f64acb68c45912d39fe9beed4e13cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rub=C3=A9n=20Norte?= Date: Thu, 16 Nov 2023 12:23:22 -0800 Subject: [PATCH] Define debugging name for multiple components (#41516) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/41516 This cleans up some dead code in animated components (some wrappers that actually don't do anything), which in this case leads to component names being properly defined for debugging in React DevTools, etc. Changelog: [internal] Reviewed By: sammy-SC Differential Revision: D51401568 fbshipit-source-id: 0de43f526b77a6b83e66e03f0ffa8d42c2b77112 --- .../Animated/components/AnimatedFlatList.js | 17 +--- .../Animated/components/AnimatedScrollView.js | 65 ++++++++------- .../components/AnimatedSectionList.js | 21 +---- .../Animated/createAnimatedComponent.js | 81 ++++++++++--------- ...ogBoxInspectorSourceMapStatus-test.js.snap | 4 +- 5 files changed, 82 insertions(+), 106 deletions(-) diff --git a/packages/react-native/Libraries/Animated/components/AnimatedFlatList.js b/packages/react-native/Libraries/Animated/components/AnimatedFlatList.js index a3a24355cba..adfb8639585 100644 --- a/packages/react-native/Libraries/Animated/components/AnimatedFlatList.js +++ b/packages/react-native/Libraries/Animated/components/AnimatedFlatList.js @@ -14,22 +14,7 @@ import FlatList from '../../Lists/FlatList'; import createAnimatedComponent from '../createAnimatedComponent'; import * as React from 'react'; -/** - * @see https://github.com/facebook/react-native/commit/b8c8562 - */ -const FlatListWithEventThrottle = React.forwardRef( - // $FlowFixMe[incompatible-call] - ( - props: React.ElementConfig, - ref: - | ((null | FlatList) => mixed) - | {current: null | FlatList, ...}, - ) => , -); - -export default (createAnimatedComponent( - FlatListWithEventThrottle, -): AnimatedComponentType< +export default (createAnimatedComponent(FlatList): AnimatedComponentType< React.ElementConfig, React.ElementRef, >); diff --git a/packages/react-native/Libraries/Animated/components/AnimatedScrollView.js b/packages/react-native/Libraries/Animated/components/AnimatedScrollView.js index e2b48d0ce9a..ee746c3b4e2 100644 --- a/packages/react-native/Libraries/Animated/components/AnimatedScrollView.js +++ b/packages/react-native/Libraries/Animated/components/AnimatedScrollView.js @@ -30,39 +30,44 @@ type Instance = React.ElementRef; * @see https://github.com/facebook/react-native/commit/b8c8562 */ const AnimatedScrollView: AnimatedComponentType = - React.forwardRef((props, forwardedRef) => { - // (Android only) When a ScrollView has a RefreshControl and - // any `style` property set with an Animated.Value, the CSS - // gets incorrectly applied twice. This is because ScrollView - // swaps the parent/child relationship of itself and the - // RefreshControl component (see ScrollView.js for more details). - if ( - Platform.OS === 'android' && - props.refreshControl != null && - props.style != null + React.forwardRef( + function AnimatedScrollViewWithOrWithoutInvertedRefreshControl( + props, + forwardedRef, ) { - return ( - - ); - } else { - return ( - - ); - } - }); + // (Android only) When a ScrollView has a RefreshControl and + // any `style` property set with an Animated.Value, the CSS + // gets incorrectly applied twice. This is because ScrollView + // swaps the parent/child relationship of itself and the + // RefreshControl component (see ScrollView.js for more details). + if ( + Platform.OS === 'android' && + props.refreshControl != null && + props.style != null + ) { + return ( + + ); + } else { + return ( + + ); + } + }, + ); const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef( // $FlowFixMe[incompatible-call] - ( + function AnimatedScrollViewWithInvertedRefreshControl( props: { ...React.ElementConfig, // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView @@ -71,7 +76,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef( forwardedRef: | {current: Instance | null, ...} | ((Instance | null) => mixed), - ) => { + ) { // Split `props` into the animate-able props for the parent (RefreshControl) // and child (ScrollView). const {intermediatePropsForRefreshControl, intermediatePropsForScrollView} = diff --git a/packages/react-native/Libraries/Animated/components/AnimatedSectionList.js b/packages/react-native/Libraries/Animated/components/AnimatedSectionList.js index 083d9be05eb..5b2f80c2c53 100644 --- a/packages/react-native/Libraries/Animated/components/AnimatedSectionList.js +++ b/packages/react-native/Libraries/Animated/components/AnimatedSectionList.js @@ -8,32 +8,13 @@ * @format */ -import type {SectionBase} from '../../Lists/SectionList'; import type {AnimatedComponentType} from '../createAnimatedComponent'; import SectionList from '../../Lists/SectionList'; import createAnimatedComponent from '../createAnimatedComponent'; import * as React from 'react'; -/** - * @see https://github.com/facebook/react-native/commit/b8c8562 - */ -const SectionListWithEventThrottle = React.forwardRef( - // $FlowFixMe[incompatible-call] - ( - props: React.ElementConfig, - ref: - | ((null | SectionList>) => mixed) - | { - current: null | SectionList>, - ... - }, - ) => , -); - -export default (createAnimatedComponent( - SectionListWithEventThrottle, -): AnimatedComponentType< +export default (createAnimatedComponent(SectionList): AnimatedComponentType< React.ElementConfig, React.ElementRef, >); diff --git a/packages/react-native/Libraries/Animated/createAnimatedComponent.js b/packages/react-native/Libraries/Animated/createAnimatedComponent.js index 878b1d34a43..78645a36f18 100644 --- a/packages/react-native/Libraries/Animated/createAnimatedComponent.js +++ b/packages/react-native/Libraries/Animated/createAnimatedComponent.js @@ -13,50 +13,55 @@ import useMergeRefs from '../Utilities/useMergeRefs'; import useAnimatedProps from './useAnimatedProps'; import * as React from 'react'; -export type AnimatedComponentType< - -Props: {+[string]: mixed, ...}, - +Instance = mixed, -> = React.AbstractComponent< - $ObjMap< - Props & - $ReadOnly<{ - passthroughAnimatedPropExplicitValues?: React.ElementConfig< - typeof View, - >, - }>, - () => any, - >, - Instance, +export type AnimatedProps = $ObjMap< + Props & + $ReadOnly<{ + passthroughAnimatedPropExplicitValues?: React.ElementConfig, + }>, + () => any, >; +export type AnimatedComponentType< + Props: {...}, + +Instance = mixed, +> = React.AbstractComponent, Instance>; + export default function createAnimatedComponent( Component: React.AbstractComponent, ): AnimatedComponentType { - return React.forwardRef((props, forwardedRef) => { - const [reducedProps, callbackRef] = useAnimatedProps( + const AnimatedComponent = React.forwardRef, TInstance>( + (props, forwardedRef) => { + const [reducedProps, callbackRef] = useAnimatedProps( + // $FlowFixMe[incompatible-call] + props, + ); // $FlowFixMe[incompatible-call] - props, - ); - // $FlowFixMe[incompatible-call] - const ref = useMergeRefs(callbackRef, forwardedRef); + const ref = useMergeRefs(callbackRef, forwardedRef); - // Some components require explicit passthrough values for animation - // to work properly. For example, if an animated component is - // transformed and Pressable, onPress will not work after transform - // without these passthrough values. - // $FlowFixMe[prop-missing] - const {passthroughAnimatedPropExplicitValues, style} = reducedProps; - const {style: passthroughStyle, ...passthroughProps} = - passthroughAnimatedPropExplicitValues ?? {}; - const mergedStyle = {...style, ...passthroughStyle}; + // Some components require explicit passthrough values for animation + // to work properly. For example, if an animated component is + // transformed and Pressable, onPress will not work after transform + // without these passthrough values. + // $FlowFixMe[prop-missing] + const {passthroughAnimatedPropExplicitValues, style} = reducedProps; + const {style: passthroughStyle, ...passthroughProps} = + passthroughAnimatedPropExplicitValues ?? {}; + const mergedStyle = {...style, ...passthroughStyle}; - return ( - - ); - }); + return ( + + ); + }, + ); + + AnimatedComponent.displayName = `Animated(${ + Component.displayName || 'Anonymous' + })`; + + return AnimatedComponent; } diff --git a/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorSourceMapStatus-test.js.snap b/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorSourceMapStatus-test.js.snap index d814a90fe50..612a75000e4 100644 --- a/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorSourceMapStatus-test.js.snap +++ b/packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorSourceMapStatus-test.js.snap @@ -27,7 +27,7 @@ exports[`LogBoxInspectorSourceMapStatus should render for failed 1`] = ` } } > - -