Align layout event names with OSS (#49423)

Summary:

Changelog: [Internal]

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,
@@ -31,8 +31,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<{
   /**
@@ -61,7 +61,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/Renderer/shims/ReactNativeTypes.js

@@ -103,17 +103,75 @@ export type PartialViewConfig = $ReadOnly<{
 
 /**
  * Current usages should migrate to this definition
+ *
+ * NativeMethods provides methods to access the underlying native component directly.
+ * This can be useful in cases when you want to focus a view or measure its on-screen dimensions,
+ * for example.
+ * The methods described here are available on most of the default components provided by React Native.
+ * Note, however, that they are not available on composite components that aren't directly backed by a
+ * native view. This will generally include most components that you define in your own app.
  */
 export interface INativeMethods {
+  /**
+   * Requests focus for the given input or view. The exact behavior triggered
+   * will depend on the platform and type of view.
+   */
   blur(): void;
+  /**
+   * Removes focus from an input or view. This is the opposite of `focus()`.
+   */
   focus(): void;
+  /**
+   * Determines the location on screen, width, and height of the given view and
+   * returns the values via an async callback. If successful, the callback will
+   * be called with the following arguments:
+   *
+   *  - x
+   *  - y
+   *  - width
+   *  - height
+   *  - pageX
+   *  - pageY
+   *
+   * Note that these measurements are not available until after the rendering
+   * has been completed in native. If you need the measurements as soon as
+   * possible, consider using the [`onLayout`
+   * prop](docs/view.html#onlayout) instead.
+   */
   measure(callback: MeasureOnSuccessCallback): void;
+  /**
+   * Determines the location of the given view in the window and returns the
+   * values via an async callback. If the React root view is embedded in
+   * another native view, this will give you the absolute coordinates. If
+   * successful, the callback will be called with the following
+   * arguments:
+   *
+   *  - x
+   *  - y
+   *  - width
+   *  - height
+   *
+   * Note that these measurements are not available until after the rendering
+   * has been completed in native.
+   */
   measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
+  /**
+   * Like [`measure()`](#measure), but measures the view relative an ancestor,
+   * specified as `relativeToNativeComponentRef`. This means that the returned x, y
+   * are relative to the origin x, y of the ancestor view.
+   * _Can also be called with a relativeNativeNodeHandle but is deprecated._
+   */
   measureLayout(
     relativeToNativeNode: number | HostInstance,
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void,
   ): void;
+  /**
+   * This function sends props straight to native. They will not participate in
+   * future diff process - this means that if you do not include them in the
+   * next render, they will remain active (see [Direct
+   * Manipulation](https://reactnative.dev/docs/direct-manipulation)).
+   */
   setNativeProps(nativeProps: {...}): void;
 }
 
@@ -166,6 +224,7 @@ export type InspectorData = $ReadOnly<{
 }>;
 
 export type TouchedViewDataAtPoint = $ReadOnly<{
+  ...InspectorData,
   pointerY: number,
   touchedViewTag?: number,
   frame: $ReadOnly<{
@@ -175,7 +234,6 @@ export type TouchedViewDataAtPoint = $ReadOnly<{
     height: number,
   }>,
   closestPublicInstance?: PublicInstance,
-  ...InspectorData,
 }>;
 
 export type RenderRootOptions = {

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