Merge branch 'next' into @mbert/docs-detector

Author: m-bert

packages/react-native-gesture-handler/shared/shadowNodes/react/renderer/components/rngesturehandler_codegen/RNGestureHandlerDetectorShadowNode.cpp

@@ -34,23 +34,34 @@ void RNGestureHandlerDetectorShadowNode::initialize() {
 }
 
 void RNGestureHandlerDetectorShadowNode::layout(LayoutContext layoutContext) {
-  YogaLayoutableShadowNode::layout(layoutContext);
   // TODO: consider allowing more than one child and doing bounding box
   react_native_assert(getChildren().size() == 1);
 
-  if (!this->yogaNode_.getHasNewLayout()) {
-    return;
-  }
-
   auto child = std::static_pointer_cast<const YogaLayoutableShadowNode>(
       getChildren()[0]);
+  auto childWithProtectedAccess =
+      std::static_pointer_cast<const RNGestureHandlerDetectorShadowNode>(child);
+
+  auto shouldSkipCustomLayout =
+      !childWithProtectedAccess->yogaNode_.getHasNewLayout();
+
+  // Do default layout after reading the new layout flag from the child.
+  // Default layout will reset the flag on the child nodes.
+  YogaLayoutableShadowNode::layout(layoutContext);
+
+  // The child node did not have its layout changed, we can reuse previous
+  // values
+  if (shouldSkipCustomLayout) {
+    react_native_assert(previousLayoutMetrics_.has_value());
+    setLayoutMetrics(previousLayoutMetrics_.value());
+    return;
+  }
 
   child->ensureUnsealed();
   auto mutableChild = std::const_pointer_cast<YogaLayoutableShadowNode>(child);
 
-  // TODO: figure out the correct way to setup metrics between detector and
-  // the child
   auto metrics = child->getLayoutMetrics();
+  metrics.frame = child->getLayoutMetrics().frame;
   setLayoutMetrics(metrics);
 
   auto childmetrics = child->getLayoutMetrics();

packages/react-native-gesture-handler/shared/shadowNodes/react/renderer/components/rngesturehandler_codegen/RNGestureHandlerDetectorShadowNode.h

@@ -45,13 +45,20 @@ class RNGestureHandlerDetectorShadowNode final
       const ShadowNode &sourceShadowNode,
       const ShadowNodeFragment &fragment)
       : ConcreteViewShadowNode(sourceShadowNode, fragment) {
+    const auto &sourceDetectorNode =
+        static_cast<const RNGestureHandlerDetectorShadowNode &>(
+            sourceShadowNode);
+    previousLayoutMetrics_ = sourceDetectorNode.getLayoutMetrics();
+
     initialize();
   }
 
   void layout(LayoutContext layoutContext) override;
 
  private:
   void initialize();
+
+  std::optional<LayoutMetrics> previousLayoutMetrics_;
 };
 
 } // namespace facebook::react

packages/react-native-gesture-handler/src/components/Pressable/Pressable.tsx

@@ -9,8 +9,8 @@ import { GestureObjects as Gesture } from '../../handlers/gestures/gestureObject
 import { GestureDetector } from '../../handlers/gestures/GestureDetector';
 import {
   PressableEvent,
-  PressableProps,
   PressableDimensions,
+  LegacyPressableProps,
 } from './PressableProps';
 import {
   Insets,
@@ -40,7 +40,7 @@ import { PressableStateMachine } from './StateMachine';
 const DEFAULT_LONG_PRESS_DURATION = 500;
 const IS_TEST_ENV = isTestEnv();
 
-const Pressable = (props: PressableProps) => {
+const Pressable = (props: LegacyPressableProps) => {
   const {
     testOnly_pressed,
     hitSlop,

packages/react-native-gesture-handler/src/components/Pressable/PressableProps.tsx

@@ -9,6 +9,7 @@ import {
   View,
 } from 'react-native';
 import { RelationPropType } from '../utils';
+import { AnyGesture } from '../../v3/types';
 
 export type PressableDimensions = { width: number; height: number };
 
@@ -30,7 +31,47 @@ export type InnerPressableEvent = {
 
 export type PressableEvent = { nativeEvent: InnerPressableEvent };
 
-export interface PressableProps
+export interface LegacyPressableProps extends CommonPressableProps {
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the Pressable's gesture handlers.
+   */
+  simultaneousWithExternalGesture?: RelationPropType;
+
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the Pressable's gesture handlers.
+   */
+  requireExternalGestureToFail?: RelationPropType;
+
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the Pressable's gesture handlers.
+   */
+  blocksExternalGesture?: RelationPropType;
+}
+
+export interface PressableProps extends CommonPressableProps {
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the Pressable's gesture handlers.
+   */
+  simultaneousWith?: AnyGesture;
+
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the Pressable's gesture handlers.
+   */
+  requireToFail?: AnyGesture;
+
+  /**
+   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
+   * used with the Pressable's gesture handlers.
+   */
+  block?: AnyGesture;
+}
+
+interface CommonPressableProps
   extends AccessibilityProps,
     Omit<ViewProps, 'children' | 'style' | 'hitSlop'> {
   /**
@@ -149,24 +190,6 @@ export interface PressableProps
    */
   unstable_pressDelay?: number;
 
-  /**
-   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
-   * used with the Pressable's gesture handlers.
-   */
-  simultaneousWithExternalGesture?: RelationPropType;
-
-  /**
-   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
-   * used with the Pressable's gesture handlers.
-   */
-  requireExternalGestureToFail?: RelationPropType;
-
-  /**
-   * A gesture object or an array of gesture objects containing the configuration and callbacks to be
-   * used with the Pressable's gesture handlers.
-   */
-  blocksExternalGesture?: RelationPropType;
-
   /**
    * @deprecated This property is no longer used, and will be removed in the future.
    */

packages/react-native-gesture-handler/src/components/Pressable/index.ts

@@ -1,4 +1,5 @@
 export type {
+  LegacyPressableProps,
   PressableProps,
   PressableStateCallbackType,
 } from './PressableProps';

packages/react-native-gesture-handler/src/components/Pressable/utils.ts

@@ -13,6 +13,7 @@ import {
   InnerPressableEvent,
   PressableEvent,
 } from './PressableProps';
+import { HoverGestureEvent, LongPressGestureEvent } from '../../v3';
 
 const numberAsInset = (value: number): Insets => ({
   left: value,
@@ -45,9 +46,12 @@ const touchDataToPressEvent = (
 });
 
 const gestureToPressEvent = (
-  event: GestureStateChangeEvent<
-    HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload
-  >,
+  event:
+    | GestureStateChangeEvent<
+        HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload
+      >
+    | HoverGestureEvent
+    | LongPressGestureEvent,
   timestamp: number,
   targetId: number
 ): InnerPressableEvent => ({
@@ -73,9 +77,12 @@ const isTouchWithinInset = (
   (touch?.locationY ?? 0) > -(inset.top ?? 0);
 
 const gestureToPressableEvent = (
-  event: GestureStateChangeEvent<
-    HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload
-  >
+  event:
+    | GestureStateChangeEvent<
+        HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload
+      >
+    | HoverGestureEvent
+    | LongPressGestureEvent
 ): PressableEvent => {
   const timestamp = Date.now();
 

packages/react-native-gesture-handler/src/index.ts

@@ -148,9 +148,10 @@ export type {
 
 export type {
   PressableProps,
+  LegacyPressableProps,
   PressableStateCallbackType,
 } from './components/Pressable';
-export { default as Pressable } from './components/Pressable';
+export { default as LegacyPressable } from './components/Pressable';
 
 export type { GestureTouchEvent as SingleGestureTouchEvent } from './handlers/gestureHandlerCommon';
 

packages/react-native-gesture-handler/src/jestUtils/jestUtils.ts

@@ -445,12 +445,12 @@ function getHandlerData(
         };
 
         if (eventName === 'onGestureHandlerStateChange') {
-          componentOrGesture.detectorCallbacks.onGestureHandlerStateChange({
+          componentOrGesture.detectorCallbacks.jsEventHandler?.({
             oldState: oldState as State,
             ...event,
           });
         } else if (eventName === 'onGestureHandlerEvent') {
-          componentOrGesture.detectorCallbacks.onGestureHandlerEvent?.(event);
+          componentOrGesture.detectorCallbacks.jsEventHandler?.(event);
         }
       },
     };