From ebbb241bf8d177e48f209743bb2637bb15e908e3 Mon Sep 17 00:00:00 2001 From: Jakub Piasecki Date: Tue, 18 Feb 2025 07:26:13 -0800 Subject: [PATCH] Align layout event names with OSS (#49423) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/49423 Changelog: [Internal] Reviewed By: huntie Differential Revision: D69655570 fbshipit-source-id: bd9b3dbc70b93c5be49e6a2b1b0487d11bf5b3f1 --- .../Components/Pressable/Pressable.js | 4 +-- .../Components/ScrollView/ScrollView.js | 12 ++++--- .../ScrollView/ScrollViewStickyHeader.js | 6 ++-- .../Touchable/TouchableWithoutFeedback.js | 4 +-- .../Components/View/ViewPropTypes.js | 10 +++--- .../Libraries/Image/ImageProps.js | 4 +-- .../react-native/Libraries/Text/TextProps.js | 4 +-- .../Libraries/Types/CoreEventTypes.js | 20 +++++------ .../__snapshots__/public-api-test.js.snap | 35 +++++++++---------- .../IntegrationTests/LayoutEventsTest.js | 24 +++++++------ ...PointerEventAttributesHoverablePointers.js | 4 +-- .../PointerEventAttributesNoHoverPointers.js | 4 +-- .../js/examples/Image/ImageExample.js | 4 +-- .../Lists/ListMetricsAggregator.js | 9 +++-- .../Lists/VirtualizedList.js | 14 ++++---- .../Lists/VirtualizedListCellRenderer.js | 10 ++++-- .../Lists/VirtualizedListProps.js | 4 +-- 17 files changed, 93 insertions(+), 79 deletions(-) diff --git a/packages/react-native/Libraries/Components/Pressable/Pressable.js b/packages/react-native/Libraries/Components/Pressable/Pressable.js index 33cec67727c..ff591825559 100644 --- a/packages/react-native/Libraries/Components/Pressable/Pressable.js +++ b/packages/react-native/Libraries/Components/Pressable/Pressable.js @@ -9,7 +9,7 @@ */ import type { - LayoutEvent, + LayoutChangeEvent, MouseEvent, PressEvent, } from '../../Types/CoreEventTypes'; @@ -126,7 +126,7 @@ type Props = $ReadOnly<{ /** * Called when this view's layout changes. */ - onLayout?: ?(event: LayoutEvent) => mixed, + onLayout?: ?(event: LayoutChangeEvent) => mixed, /** * Called when the hover is activated to provide visual feedback. diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollView.js b/packages/react-native/Libraries/Components/ScrollView/ScrollView.js index d4c973dcd69..8c8b87dc712 100644 --- a/packages/react-native/Libraries/Components/ScrollView/ScrollView.js +++ b/packages/react-native/Libraries/Components/ScrollView/ScrollView.js @@ -14,7 +14,7 @@ import type {PointProp} from '../../StyleSheet/PointPropType'; import type {ViewStyleProp} from '../../StyleSheet/StyleSheet'; import type {ColorValue} from '../../StyleSheet/StyleSheet'; import type { - LayoutEvent, + LayoutChangeEvent, PressEvent, ScrollEvent, } from '../../Types/CoreEventTypes'; @@ -1105,7 +1105,11 @@ class ScrollView extends React.Component { } } - _onStickyHeaderLayout(index: number, event: LayoutEvent, key: React.Key) { + _onStickyHeaderLayout( + index: number, + event: LayoutChangeEvent, + key: React.Key, + ) { const {stickyHeaderIndices} = this.props; if (!stickyHeaderIndices) { return; @@ -1136,7 +1140,7 @@ class ScrollView extends React.Component { this.props.onScroll && this.props.onScroll(e); }; - _handleLayout = (e: LayoutEvent) => { + _handleLayout = (e: LayoutChangeEvent) => { if (this.props.invertStickyHeaders === true) { this.setState({layoutHeight: e.nativeEvent.layout.height}); } @@ -1145,7 +1149,7 @@ class ScrollView extends React.Component { } }; - _handleContentOnLayout = (e: LayoutEvent) => { + _handleContentOnLayout = (e: LayoutChangeEvent) => { const {width, height} = e.nativeEvent.layout; this.props.onContentSizeChange && this.props.onContentSizeChange(width, height); diff --git a/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js b/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js index 2c11d50c849..4136447ade6 100644 --- a/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js +++ b/packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js @@ -8,7 +8,7 @@ * @format */ -import type {LayoutEvent} from '../../Types/CoreEventTypes'; +import type {LayoutChangeEvent} from '../../Types/CoreEventTypes'; import Animated from '../../Animated/Animated'; import {isPublicInstance as isFabricPublicInstance} from '../../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils'; @@ -21,7 +21,7 @@ import {useCallback, useEffect, useMemo, useRef, useState} from 'react'; export type Props = $ReadOnly<{ children?: React.Node, nextHeaderLayoutY: ?number, - onLayout: (event: LayoutEvent) => void, + onLayout: (event: LayoutChangeEvent) => void, scrollAnimatedValue: Animated.Value, // Will cause sticky headers to stick at the bottom of the ScrollView instead // of the top. @@ -253,7 +253,7 @@ const ScrollViewStickyHeaderWithForwardedRef: component( isFabric, ]); - const _onLayout = (event: LayoutEvent) => { + const _onLayout = (event: LayoutChangeEvent) => { setLayoutY(event.nativeEvent.layout.y); setLayoutHeight(event.nativeEvent.layout.height); setMeasured(true); diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js index 52bda2e44db..91d84db4bbe 100755 --- a/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js @@ -19,7 +19,7 @@ import type {EdgeInsetsOrSizeProp} from '../../StyleSheet/EdgeInsetsPropType'; import type { BlurEvent, FocusEvent, - LayoutEvent, + LayoutChangeEvent, PressEvent, } from '../../Types/CoreEventTypes'; @@ -73,7 +73,7 @@ type Props = $ReadOnly<{ onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, onBlur?: ?(event: BlurEvent) => mixed, onFocus?: ?(event: FocusEvent) => mixed, - onLayout?: ?(event: LayoutEvent) => mixed, + onLayout?: ?(event: LayoutChangeEvent) => mixed, onLongPress?: ?(event: PressEvent) => mixed, onPress?: ?(event: PressEvent) => mixed, onPressIn?: ?(event: PressEvent) => mixed, diff --git a/packages/react-native/Libraries/Components/View/ViewPropTypes.js b/packages/react-native/Libraries/Components/View/ViewPropTypes.js index f4f7f7269fb..ac5599f1374 100644 --- a/packages/react-native/Libraries/Components/View/ViewPropTypes.js +++ b/packages/react-native/Libraries/Components/View/ViewPropTypes.js @@ -15,8 +15,8 @@ import type {ViewStyleProp} from '../../StyleSheet/StyleSheet'; import type { BlurEvent, FocusEvent, - Layout, - LayoutEvent, + LayoutChangeEvent, + LayoutRectangle, MouseEvent, PointerEvent, PressEvent, @@ -27,8 +27,8 @@ import type { } from './ViewAccessibility'; import type {Node} from 'react'; -export type ViewLayout = Layout; -export type ViewLayoutEvent = LayoutEvent; +export type ViewLayout = LayoutRectangle; +export type ViewLayoutEvent = LayoutChangeEvent; type DirectEventProps = $ReadOnly<{ /** @@ -57,7 +57,7 @@ type DirectEventProps = $ReadOnly<{ * * See https://reactnative.dev/docs/view#onlayout */ - onLayout?: ?(event: LayoutEvent) => mixed, + onLayout?: ?(event: LayoutChangeEvent) => mixed, /** * When `accessible` is `true`, the system will invoke this function when the diff --git a/packages/react-native/Libraries/Image/ImageProps.js b/packages/react-native/Libraries/Image/ImageProps.js index b26fbdb7c8a..a9e25dfe9a8 100644 --- a/packages/react-native/Libraries/Image/ImageProps.js +++ b/packages/react-native/Libraries/Image/ImageProps.js @@ -17,7 +17,7 @@ import type { ImageStyleProp, ViewStyleProp, } from '../StyleSheet/StyleSheet'; -import type {LayoutEvent, SyntheticEvent} from '../Types/CoreEventTypes'; +import type {LayoutChangeEvent, SyntheticEvent} from '../Types/CoreEventTypes'; import typeof Image from './Image'; import type {ImageResizeMode} from './ImageResizeMode'; import type {ImageSource} from './ImageSource'; @@ -177,7 +177,7 @@ export type ImageProps = $ReadOnly<{ * See https://reactnative.dev/docs/image#onlayout */ - onLayout?: ?(event: LayoutEvent) => mixed, + onLayout?: ?(event: LayoutChangeEvent) => mixed, /** * Invoked when load completes successfully. diff --git a/packages/react-native/Libraries/Text/TextProps.js b/packages/react-native/Libraries/Text/TextProps.js index 0ab804181b5..85e9423e392 100644 --- a/packages/react-native/Libraries/Text/TextProps.js +++ b/packages/react-native/Libraries/Text/TextProps.js @@ -19,7 +19,7 @@ import type { } from '../Components/View/ViewAccessibility'; import type {ColorValue, TextStyleProp} from '../StyleSheet/StyleSheet'; import type { - LayoutEvent, + LayoutChangeEvent, PointerEvent, PressEvent, TextLayoutEvent, @@ -142,7 +142,7 @@ export type TextProps = $ReadOnly<{ * * See https://reactnative.dev/docs/text#onlayout */ - onLayout?: ?(event: LayoutEvent) => mixed, + onLayout?: ?(event: LayoutChangeEvent) => mixed, /** * This function is called on long press. diff --git a/packages/react-native/Libraries/Types/CoreEventTypes.js b/packages/react-native/Libraries/Types/CoreEventTypes.js index 1e807f4e66b..e9df3acfa00 100644 --- a/packages/react-native/Libraries/Types/CoreEventTypes.js +++ b/packages/react-native/Libraries/Types/CoreEventTypes.js @@ -54,15 +54,15 @@ export type ResponderSyntheticEvent = $ReadOnly<{ }>, }>; -export type Layout = $ReadOnly<{ +export type LayoutRectangle = $ReadOnly<{ x: number, y: number, width: number, height: number, }>; -export type TextLayout = $ReadOnly<{ - ...Layout, +export type TextLayoutLine = $ReadOnly<{ + ...LayoutRectangle, ascender: number, capHeight: number, descender: number, @@ -70,17 +70,17 @@ export type TextLayout = $ReadOnly<{ xHeight: number, }>; -export type LayoutEvent = SyntheticEvent< +export type LayoutChangeEvent = SyntheticEvent< $ReadOnly<{ - layout: Layout, + layout: LayoutRectangle, }>, >; -export type TextLayoutEvent = SyntheticEvent< - $ReadOnly<{ - lines: Array, - }>, ->; +export type TextLayoutEventData = $ReadOnly<{ + lines: Array, +}>; + +export type TextLayoutEvent = SyntheticEvent; /** * https://developer.mozilla.org/en-US/docs/Web/API/UIEvent 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 16dc15fa450..d27933e81b0 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 @@ -1616,7 +1616,7 @@ type Props = $ReadOnly<{ disabled?: ?boolean, hitSlop?: ?RectOrSize, pressRetentionOffset?: ?RectOrSize, - onLayout?: ?(event: LayoutEvent) => mixed, + onLayout?: ?(event: LayoutChangeEvent) => mixed, onHoverIn?: ?(event: MouseEvent) => mixed, onHoverOut?: ?(event: MouseEvent) => mixed, onLongPress?: ?(event: PressEvent) => mixed, @@ -2053,7 +2053,7 @@ exports[`public API should not change unintentionally Libraries/Components/Scrol "export type Props = $ReadOnly<{ children?: React.Node, nextHeaderLayoutY: ?number, - onLayout: (event: LayoutEvent) => void, + onLayout: (event: LayoutChangeEvent) => void, scrollAnimatedValue: Animated.Value, inverted: ?boolean, scrollViewHeight: ?number, @@ -3505,7 +3505,7 @@ exports[`public API should not change unintentionally Libraries/Components/Touch onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, onBlur?: ?(event: BlurEvent) => mixed, onFocus?: ?(event: FocusEvent) => mixed, - onLayout?: ?(event: LayoutEvent) => mixed, + onLayout?: ?(event: LayoutChangeEvent) => mixed, onLongPress?: ?(event: PressEvent) => mixed, onPress?: ?(event: PressEvent) => mixed, onPressIn?: ?(event: PressEvent) => mixed, @@ -3784,12 +3784,12 @@ export type ViewNativeComponentType = HostComponent; `; exports[`public API should not change unintentionally Libraries/Components/View/ViewPropTypes.js 1`] = ` -"export type ViewLayout = Layout; -export type ViewLayoutEvent = LayoutEvent; +"export type ViewLayout = LayoutRectangle; +export type ViewLayoutEvent = LayoutChangeEvent; type DirectEventProps = $ReadOnly<{ onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, onAccessibilityTap?: ?() => mixed, - onLayout?: ?(event: LayoutEvent) => mixed, + onLayout?: ?(event: LayoutChangeEvent) => mixed, onMagicTap?: ?() => mixed, onAccessibilityEscape?: ?() => mixed, }>; @@ -4476,7 +4476,7 @@ export type ImageProps = $ReadOnly<{ }>, > ) => void, - onLayout?: ?(event: LayoutEvent) => mixed, + onLayout?: ?(event: LayoutChangeEvent) => mixed, onLoad?: ?(event: ImageLoadEvent) => void, onLoadEnd?: ?() => void, onLoadStart?: ?() => void, @@ -7784,7 +7784,7 @@ export type TextProps = $ReadOnly<{ maxFontSizeMultiplier?: ?number, nativeID?: ?string, numberOfLines?: ?number, - onLayout?: ?(event: LayoutEvent) => mixed, + onLayout?: ?(event: LayoutChangeEvent) => mixed, onLongPress?: ?(event: PressEvent) => mixed, onPress?: ?(event: PressEvent) => mixed, onPressIn?: ?(event: PressEvent) => mixed, @@ -7911,30 +7911,29 @@ export type ResponderSyntheticEvent = $ReadOnly<{ >, }>, }>; -export type Layout = $ReadOnly<{ +export type LayoutRectangle = $ReadOnly<{ x: number, y: number, width: number, height: number, }>; -export type TextLayout = $ReadOnly<{ - ...Layout, +export type TextLayoutLine = $ReadOnly<{ + ...LayoutRectangle, ascender: number, capHeight: number, descender: number, text: string, xHeight: number, }>; -export type LayoutEvent = SyntheticEvent< +export type LayoutChangeEvent = SyntheticEvent< $ReadOnly<{ - layout: Layout, - }>, ->; -export type TextLayoutEvent = SyntheticEvent< - $ReadOnly<{ - lines: Array, + layout: LayoutRectangle, }>, >; +export type TextLayoutEventData = $ReadOnly<{ + lines: Array, +}>; +export type TextLayoutEvent = SyntheticEvent; export interface NativeUIEvent { +detail: number; } diff --git a/packages/rn-tester/IntegrationTests/LayoutEventsTest.js b/packages/rn-tester/IntegrationTests/LayoutEventsTest.js index f903ff8fac3..dc27d3ec95e 100644 --- a/packages/rn-tester/IntegrationTests/LayoutEventsTest.js +++ b/packages/rn-tester/IntegrationTests/LayoutEventsTest.js @@ -12,8 +12,8 @@ import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'; import type { - Layout, - LayoutEvent, + LayoutChangeEvent, + LayoutRectangle, } from 'react-native/Libraries/Types/CoreEventTypes'; const React = require('react'); @@ -23,7 +23,7 @@ const deepDiffer = const {Image, LayoutAnimation, StyleSheet, Text, View} = ReactNative; const {TestModule} = ReactNative.NativeModules; -function debug(...args: Array) { +function debug(...args: Array) { // console.log.apply(null, arguments); } @@ -32,9 +32,9 @@ type Props = $ReadOnly<{}>; type State = { didAnimation: boolean, extraText?: string, - imageLayout?: Layout, - textLayout?: Layout, - viewLayout?: Layout, + imageLayout?: LayoutRectangle, + textLayout?: LayoutRectangle, + viewLayout?: LayoutRectangle, viewStyle?: ViewStyleProp, containerStyle?: ViewStyleProp, ... @@ -106,7 +106,11 @@ class LayoutEventsTest extends React.Component { }); }; - compare(node: string, measured: Layout, onLayout?: ?Layout): void { + compare( + node: string, + measured: LayoutRectangle, + onLayout?: ?LayoutRectangle, + ): void { if (deepDiffer(measured, onLayout)) { const data = {measured, onLayout}; throw new Error( @@ -117,19 +121,19 @@ class LayoutEventsTest extends React.Component { } } - onViewLayout: (e: LayoutEvent) => void = (e: LayoutEvent) => { + onViewLayout: (e: LayoutChangeEvent) => void = (e: LayoutChangeEvent) => { // $FlowFixMe[incompatible-call] debug('received view layout event\n', e.nativeEvent); this.setState({viewLayout: e.nativeEvent.layout}, this.checkLayout); }; - onTextLayout: (e: LayoutEvent) => void = (e: LayoutEvent) => { + onTextLayout: (e: LayoutChangeEvent) => void = (e: LayoutChangeEvent) => { // $FlowFixMe[incompatible-call] debug('received text layout event\n', e.nativeEvent); this.setState({textLayout: e.nativeEvent.layout}, this.checkLayout); }; - onImageLayout: (e: LayoutEvent) => void = (e: LayoutEvent) => { + onImageLayout: (e: LayoutChangeEvent) => void = (e: LayoutChangeEvent) => { // $FlowFixMe[incompatible-call] debug('received image layout event\n', e.nativeEvent); this.setState({imageLayout: e.nativeEvent.layout}, this.checkLayout); diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesHoverablePointers.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesHoverablePointers.js index 9ce24a3fa0c..9db7be46222 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesHoverablePointers.js +++ b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesHoverablePointers.js @@ -11,7 +11,7 @@ import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes'; import type {HostInstance} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; import type { - Layout, + LayoutRectangle, PointerEvent, } from 'react-native/Libraries/Types/CoreEventTypes'; @@ -48,7 +48,7 @@ function PointerEventAttributesHoverablePointersTestCase( ( event: PointerEvent, eventType: string, - targetLayout: Layout, + targetLayout: LayoutRectangle, testNamePrefix: string, expectedPointerType: string, ) => { diff --git a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesNoHoverPointers.js b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesNoHoverPointers.js index f8214cf49dc..96bdecd2d75 100644 --- a/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesNoHoverPointers.js +++ b/packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesNoHoverPointers.js @@ -11,7 +11,7 @@ import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes'; import type {HostInstance} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; import type { - Layout, + LayoutRectangle, PointerEvent, } from 'react-native/Libraries/Types/CoreEventTypes'; @@ -47,7 +47,7 @@ function PointerEventAttributesNoHoverPointersTestCase( ( event: PointerEvent, eventType: string, - targetLayout: Layout, + targetLayout: LayoutRectangle, testNamePrefix: string, expectedPointerType: string, ) => { diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js index b770485f63f..57d687a6b02 100644 --- a/packages/rn-tester/js/examples/Image/ImageExample.js +++ b/packages/rn-tester/js/examples/Image/ImageExample.js @@ -12,7 +12,7 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; import type {ImageProps} from 'react-native/Libraries/Image/ImageProps'; -import type {LayoutEvent} from 'react-native/Libraries/Types/CoreEventTypes'; +import type {LayoutChangeEvent} from 'react-native/Libraries/Types/CoreEventTypes'; import RNTesterButton from '../../components/RNTesterButton'; import RNTesterText from '../../components/RNTesterText'; @@ -463,7 +463,7 @@ class OnLayoutExample extends React.Component< layoutHandlerMessage: 'No Message', }; - onLayoutHandler = (event: LayoutEvent) => { + onLayoutHandler = (event: LayoutChangeEvent) => { this.setState({ width: this.state.width, height: this.state.height, diff --git a/packages/virtualized-lists/Lists/ListMetricsAggregator.js b/packages/virtualized-lists/Lists/ListMetricsAggregator.js index 8d31576cb50..d746de02aab 100644 --- a/packages/virtualized-lists/Lists/ListMetricsAggregator.js +++ b/packages/virtualized-lists/Lists/ListMetricsAggregator.js @@ -9,7 +9,7 @@ */ import type {VirtualizedListProps} from './VirtualizedListProps'; -import type {Layout} from 'react-native/Libraries/Types/CoreEventTypes'; +import type {LayoutRectangle} from 'react-native/Libraries/Types/CoreEventTypes'; import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils'; import invariant from 'invariant'; @@ -82,7 +82,7 @@ export default class ListMetricsAggregator { cellIndex: number, cellKey: string, orientation: ListOrientation, - layout: Layout, + layout: LayoutRectangle, }): boolean { this._invalidateIfOrientationChanged(orientation); @@ -264,7 +264,10 @@ export default class ListMetricsAggregator { * Finds the flow-relative offset (e.g. starting from the left in LTR, but * right in RTL) from a layout box. */ - flowRelativeOffset(layout: Layout, referenceContentLength?: ?number): number { + flowRelativeOffset( + layout: LayoutRectangle, + referenceContentLength?: ?number, + ): number { const {horizontal, rtl} = this._orientation; if (horizontal && rtl) { diff --git a/packages/virtualized-lists/Lists/VirtualizedList.js b/packages/virtualized-lists/Lists/VirtualizedList.js index 0f66e56a43d..42ad202c090 100644 --- a/packages/virtualized-lists/Lists/VirtualizedList.js +++ b/packages/virtualized-lists/Lists/VirtualizedList.js @@ -20,7 +20,7 @@ import type { import type {ScrollResponderType} from 'react-native/Libraries/Components/ScrollView/ScrollView'; import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'; import type { - LayoutEvent, + LayoutChangeEvent, ScrollEvent, } from 'react-native/Libraries/Types/CoreEventTypes'; @@ -955,7 +955,7 @@ class VirtualizedList extends StateSafePureComponent< cellKey={this._getCellKey() + '-empty'} key="$empty"> {React.cloneElement(element, { - onLayout: (event: LayoutEvent) => { + onLayout: (event: LayoutChangeEvent) => { this._onLayoutEmpty(event); // $FlowFixMe[prop-missing] React.Element internal inspection if (element.props.onLayout) { @@ -1292,7 +1292,7 @@ class VirtualizedList extends StateSafePureComponent< }; _onCellLayout = ( - e: LayoutEvent, + e: LayoutChangeEvent, cellKey: string, cellIndex: number, ): void => { @@ -1379,7 +1379,7 @@ class VirtualizedList extends StateSafePureComponent< } } - _onLayout = (e: LayoutEvent) => { + _onLayout = (e: LayoutChangeEvent) => { if (this._isNestedWithSameOrientation()) { // Need to adjust our scroll metrics to be relative to our containing // VirtualizedList before we can make claims about list item viewability @@ -1394,7 +1394,7 @@ class VirtualizedList extends StateSafePureComponent< this._maybeCallOnEdgeReached(); }; - _onLayoutEmpty = (e: LayoutEvent) => { + _onLayoutEmpty = (e: LayoutChangeEvent) => { this.props.onLayout && this.props.onLayout(e); }; @@ -1402,12 +1402,12 @@ class VirtualizedList extends StateSafePureComponent< return this._getCellKey() + '-footer'; } - _onLayoutFooter = (e: LayoutEvent) => { + _onLayoutFooter = (e: LayoutChangeEvent) => { this._triggerRemeasureForChildListsInCell(this._getFooterCellKey()); this._footerLength = this._selectLength(e.nativeEvent.layout); }; - _onLayoutHeader = (e: LayoutEvent) => { + _onLayoutHeader = (e: LayoutChangeEvent) => { this._headerLength = this._selectLength(e.nativeEvent.layout); }; diff --git a/packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js b/packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js index ad69cf664b0..cc49f322707 100644 --- a/packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js +++ b/packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js @@ -12,7 +12,7 @@ import type {CellRendererProps, ListRenderItem} from './VirtualizedListProps'; import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'; import type { FocusEvent, - LayoutEvent, + LayoutChangeEvent, } from 'react-native/Libraries/Types/CoreEventTypes'; import {VirtualizedListCellContextProvider} from './VirtualizedListContext.js'; @@ -31,7 +31,11 @@ export type Props = { index: number, inversionStyle: ViewStyleProp, item: ItemT, - onCellLayout?: (event: LayoutEvent, cellKey: string, index: number) => void, + onCellLayout?: ( + event: LayoutChangeEvent, + cellKey: string, + index: number, + ) => void, onCellFocusCapture?: (cellKey: string) => void, onUnmount: (cellKey: string) => void, onUpdateSeparators: ( @@ -117,7 +121,7 @@ export default class CellRenderer extends React.PureComponent< this.props.onUnmount(this.props.cellKey); } - _onLayout = (nativeEvent: LayoutEvent): void => { + _onLayout = (nativeEvent: LayoutChangeEvent): void => { this.props.onCellLayout?.( nativeEvent, this.props.cellKey, diff --git a/packages/virtualized-lists/Lists/VirtualizedListProps.js b/packages/virtualized-lists/Lists/VirtualizedListProps.js index e20cfaa2baf..18d8febc0b5 100644 --- a/packages/virtualized-lists/Lists/VirtualizedListProps.js +++ b/packages/virtualized-lists/Lists/VirtualizedListProps.js @@ -16,7 +16,7 @@ import type { import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'; import type { FocusEvent, - LayoutEvent, + LayoutChangeEvent, } from 'react-native/Libraries/Types/CoreEventTypes'; import * as React from 'react'; @@ -44,7 +44,7 @@ export type CellRendererProps = $ReadOnly<{ index: number, item: ItemT, onFocusCapture?: (event: FocusEvent) => void, - onLayout?: (event: LayoutEvent) => void, + onLayout?: (event: LayoutChangeEvent) => void, style: ViewStyleProp, }>;