Align layout event names with OSS (facebook#49423)

Summary:

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D69655570

Author: j-piasecki

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.

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<Props, State> {
     }
   }
 
-  _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<Props, State> {
     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<Props, State> {
     }
   };
 
-  _handleContentOnLayout = (e: LayoutEvent) => {
+  _handleContentOnLayout = (e: LayoutChangeEvent) => {
     const {width, height} = e.nativeEvent.layout;
     this.props.onContentSizeChange &&
       this.props.onContentSizeChange(width, height);

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);

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,

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

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.

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.

packages/react-native/Libraries/Types/CoreEventTypes.js

@@ -54,33 +54,33 @@ export type ResponderSyntheticEvent<T> = $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,
+    layout: LayoutRectangle,
   }>,
 >;
 
-export type TextLayoutEvent = SyntheticEvent<
-  $ReadOnly<{
-    lines: Array<TextLayout>,
-  }>,
->;
+export type TextLayoutEventData = $ReadOnly<{
+  lines: Array<TextLayoutLine>,
+}>;
+
+export type TextLayoutEvent = SyntheticEvent<TextLayoutEventData>;
 
 /**
  * https://developer.mozilla.org/en-US/docs/Web/API/UIEvent

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<Props>;
 `;
 
 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,
@@ -7770,7 +7770,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,
@@ -7897,30 +7897,29 @@ export type ResponderSyntheticEvent<T> = $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<TextLayout>,
+    layout: LayoutRectangle,
   }>,
 >;
+export type TextLayoutEventData = $ReadOnly<{
+  lines: Array<TextLayoutLine>,
+}>;
+export type TextLayoutEvent = SyntheticEvent<TextLayoutEventData>;
 export interface NativeUIEvent {
   +detail: number;
 }

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<void | Layout | string>) {
+function debug(...args: Array<void | LayoutRectangle | string>) {
   // 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<Props, State> {
     });
   };
 
-  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<Props, State> {
     }
   }
 
-  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);