react-native-gesture-handler 3.0.0-beta.2 → 3.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.3",
   "description": "Declarative API exposing native platform touch and gesture system to React Native",
   "scripts": {
     "test": "jest",
@@ -20,7 +20,7 @@
     "postpack": "rm ./README.md"
   },
   "react-native": "src/index.ts",
-  "main": "lib/commonjs/index.js",
+  "main": "lib/module/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
   "files": [
@@ -66,18 +66,19 @@
   },
   "homepage": "https://docs.swmansion.com/react-native-gesture-handler/",
   "dependencies": {
+    "@types/react-test-renderer": "^19.1.0",
     "invariant": "^2.2.4"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-typescript": "^7.12.7",
-    "@react-native/babel-preset": "0.83.0",
+    "@react-native/babel-preset": "0.85.0",
+    "@react-native/jest-preset": "0.85.0",
     "@testing-library/react-native": "^12.5.1",
     "@types/invariant": "^2.2.37",
     "@types/jest": "^27.0.3",
     "@types/react": "^19.2.0",
-    "@types/react-test-renderer": "^19.1.0",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
     "babel-plugin-module-resolver": "^5.0.2",
@@ -93,11 +94,12 @@
     "lint-staged": "^12.3.2",
     "madge": "^6.1.0",
     "prettier": "3.3.3",
-    "react": "19.2.0",
-    "react-native": "0.83.0",
+    "react": "19.2.3",
+    "react-native": "0.85.0",
     "react-native-builder-bob": "^0.40.13",
-    "react-native-reanimated": "^3.18.0",
-    "react-test-renderer": "19.2.0",
+    "react-native-reanimated": "^4.3.0",
+    "react-native-worklets": "^0.8.1",
+    "react-test-renderer": "19.2.3",
     "typescript": "~5.8.3"
   },
   "peerDependencies": {
@@ -108,7 +110,6 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
       "module",
       [
         "typescript",
@@ -128,8 +129,7 @@
     "ios": {
       "componentProvider": {
         "RNGestureHandlerButton": "RNGestureHandlerButtonComponentView",
-        "RNGestureHandlerDetector": "RNGestureHandlerDetector",
-        "RNGestureHandlerButtonWrapper": "RNGestureHandlerButtonWrapper"
+        "RNGestureHandlerDetector": "RNGestureHandlerDetector"
       }
     }
   },

package/react-native.config.js

@@ -4,7 +4,6 @@ module.exports = {
       android: {
         componentDescriptors: [
           'RNGestureHandlerDetectorComponentDescriptor',
-          'RNGestureHandlerButtonWrapperComponentDescriptor',
         ],
         cmakeListsPath: './CMakeLists.txt',
       },

package/shared/shadowNodes/react/renderer/components/rngesturehandler_codegen/ComponentDescriptors.h

@@ -15,7 +15,6 @@
 #include <react/renderer/components/rngesturehandler_codegen/ShadowNodes.h>
 #include <react/renderer/core/ConcreteComponentDescriptor.h>
 
-#include <react/renderer/components/rngesturehandler_codegen/RNGestureHandlerButtonWrapperComponentDescriptor.h>
 #include <react/renderer/components/rngesturehandler_codegen/RNGestureHandlerDetectorComponentDescriptor.h>
 
 namespace facebook::react {

package/shared/shadowNodes/react/renderer/components/rngesturehandler_codegen/RNGestureHandlerDetectorShadowNode.cpp

@@ -11,6 +11,8 @@
 
 #include "RNGestureHandlerDetectorShadowNode.h"
 
+#include <limits>
+
 namespace facebook::react {
 
 extern const char RNGestureHandlerDetectorComponentName[] =
@@ -20,16 +22,12 @@ void RNGestureHandlerDetectorShadowNode::initialize() {
   // Disable forcing view flattening
   ShadowNode::traits_.unset(ShadowNodeTraits::ForceFlattenView);
 
-  // When the detector is cloned and has a child node, the child node should be
-  // cloned as well to ensure it is mutable.
+  // When the detector is cloned and has child nodes, the children should be
+  // cloned as well to ensure they are mutable.
   const auto &children = getChildren();
-  if (!children.empty()) {
-    react_native_assert(
-        children.size() == 1 &&
-        "RNGestureHandlerDetector received more than one child");
-
+  for (size_t i = 0; i < children.size(); i++) {
     // Will clone the child and ensure it's not flattened
-    replaceChild(*children[0], children[0], 0);
+    replaceChild(*children[i], children[i], i);
   }
 }
 
@@ -47,39 +45,72 @@ void RNGestureHandlerDetectorShadowNode::replaceChild(
 }
 
 void RNGestureHandlerDetectorShadowNode::layout(LayoutContext layoutContext) {
-  // TODO: consider allowing more than one child and doing bounding box
-  react_native_assert(getChildren().size() == 1);
-
-  auto child = std::static_pointer_cast<const YogaLayoutableShadowNode>(
-      getChildren()[0]);
-  auto childWithProtectedAccess =
-      std::static_pointer_cast<const RNGestureHandlerDetectorShadowNode>(child);
-
-  auto shouldSkipCustomLayout =
-      !childWithProtectedAccess->yogaNode_.getHasNewLayout();
+  const auto &children = getChildren();
+  react_native_assert(
+      !children.empty() &&
+      "GestureDetector must have at least one child node.");
+
+  // Check if any child has a new layout
+  bool anyChildHasNewLayout = false;
+  for (const auto &child : children) {
+    auto yogaChild =
+        std::static_pointer_cast<const YogaLayoutableShadowNode>(child);
+    auto childWithProtectedAccess =
+        std::static_pointer_cast<const RNGestureHandlerDetectorShadowNode>(
+            yogaChild);
+    if (childWithProtectedAccess->yogaNode_.getHasNewLayout()) {
+      anyChildHasNewLayout = true;
+      break;
+    }
+  }
 
-  // Do default layout after reading the new layout flag from the child.
-  // Default layout will reset the flag on the child nodes.
+  // Do default layout after reading the new layout flags from children.
+  // Default layout will reset the flag on child nodes.
   YogaLayoutableShadowNode::layout(layoutContext);
 
-  // The child node did not have its layout changed, we can reuse previous
-  // values
-  if (shouldSkipCustomLayout) {
+  // No child had its layout changed, we can reuse previous values
+  if (!anyChildHasNewLayout) {
     react_native_assert(previousLayoutMetrics_.has_value());
     setLayoutMetrics(previousLayoutMetrics_.value());
     return;
   }
 
-  child->ensureUnsealed();
-  auto mutableChild = std::const_pointer_cast<YogaLayoutableShadowNode>(child);
+  // Calculate bounding box of all children
+  Float minX = std::numeric_limits<Float>::infinity();
+  Float minY = std::numeric_limits<Float>::infinity();
+  Float maxX = -std::numeric_limits<Float>::infinity();
+  Float maxY = -std::numeric_limits<Float>::infinity();
+
+  for (const auto &child : children) {
+    auto yogaChild =
+        std::static_pointer_cast<const YogaLayoutableShadowNode>(child);
+    const auto &frame = yogaChild->getLayoutMetrics().frame;
+
+    minX = std::min(minX, frame.origin.x);
+    minY = std::min(minY, frame.origin.y);
+    maxX = std::max(maxX, frame.origin.x + frame.size.width);
+    maxY = std::max(maxY, frame.origin.y + frame.size.height);
+  }
 
-  auto metrics = child->getLayoutMetrics();
-  metrics.frame = child->getLayoutMetrics().frame;
+  // Set detector's metrics to the bounding box of all children
+  auto metrics = getLayoutMetrics();
+  metrics.frame.origin = Point{minX, minY};
+  metrics.frame.size = Size{maxX - minX, maxY - minY};
   setLayoutMetrics(metrics);
 
-  auto childmetrics = child->getLayoutMetrics();
-  childmetrics.frame.origin = Point{};
-  mutableChild->setLayoutMetrics(childmetrics);
+  // Shift all children so their positions are relative to the detector's origin
+  for (const auto &child : children) {
+    auto yogaChild =
+        std::static_pointer_cast<const YogaLayoutableShadowNode>(child);
+    yogaChild->ensureUnsealed();
+    auto mutableChild =
+        std::const_pointer_cast<YogaLayoutableShadowNode>(yogaChild);
+
+    auto childMetrics = yogaChild->getLayoutMetrics();
+    childMetrics.frame.origin.x -= minX;
+    childMetrics.frame.origin.y -= minY;
+    mutableChild->setLayoutMetrics(childMetrics);
+  }
 }
 
 std::shared_ptr<const ShadowNode>

package/src/RNGestureHandlerModule.web.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 
 import type { ActionType } from './ActionType';
+import type { GestureRelations } from './v3/types';
 import { Gestures } from './web/Gestures';
 import type { Config, PropsRef } from './web/interfaces';
+import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
 import InteractionManager from './web/tools/InteractionManager';
 import NodeManager from './web/tools/NodeManager';
-import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
-import { GestureRelations } from './v3/types';
 
 // init method is called inside attachGestureHandler function. However, this function may
 // fail when received view is not valid HTML element. On the other hand, dropGestureHandler

package/src/RNGestureHandlerModule.windows.ts

@@ -1,17 +1,15 @@
-import React from 'react';
+import type React from 'react';
 
-import { ActionType } from './ActionType';
-
-// GestureHandlers
-import PanGestureHandler from './web/handlers/PanGestureHandler';
-import TapGestureHandler from './web/handlers/TapGestureHandler';
+import type { ActionType } from './ActionType';
+import FlingGestureHandler from './web/handlers/FlingGestureHandler';
 import LongPressGestureHandler from './web/handlers/LongPressGestureHandler';
+import ManualGestureHandler from './web/handlers/ManualGestureHandler';
+import NativeViewGestureHandler from './web/handlers/NativeViewGestureHandler';
+import PanGestureHandler from './web/handlers/PanGestureHandler';
 import PinchGestureHandler from './web/handlers/PinchGestureHandler';
 import RotationGestureHandler from './web/handlers/RotationGestureHandler';
-import FlingGestureHandler from './web/handlers/FlingGestureHandler';
-import NativeViewGestureHandler from './web/handlers/NativeViewGestureHandler';
-import ManualGestureHandler from './web/handlers/ManualGestureHandler';
-import { Config } from './web/interfaces';
+import TapGestureHandler from './web/handlers/TapGestureHandler';
+import type { Config } from './web/interfaces';
 
 export const Gestures = {
   NativeViewGestureHandler,

package/src/components/GestureButtons.tsx

@@ -1,31 +1,35 @@
 import * as React from 'react';
+import type { HostComponent } from 'react-native';
 import { Animated, Platform, StyleSheet } from 'react-native';
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
-import GestureHandlerButton from './GestureHandlerButton';
-import { State } from '../State';
-
-import {
+import type {
   GestureEvent,
   HandlerStateChangeEvent,
 } from '../handlers/gestureHandlerCommon';
 import type { NativeViewGestureHandlerPayload } from '../handlers/GestureHandlerEventPayload';
+import { State } from '../State';
 import type {
   BaseButtonWithRefProps,
-  LegacyBaseButtonProps,
-  RectButtonWithRefProps,
-  LegacyRectButtonProps,
   BorderlessButtonWithRefProps,
+  LegacyBaseButtonProps,
   LegacyBorderlessButtonProps,
+  LegacyRawButtonProps,
+  LegacyRectButtonProps,
+  RectButtonWithRefProps,
 } from './GestureButtonsProps';
+import GestureHandlerButton from './GestureHandlerButton';
 
 /**
  * @deprecated use `RawButton` instead
  */
-export const LegacyRawButton = createNativeWrapper(GestureHandlerButton, {
-  shouldCancelWhenOutside: false,
-  shouldActivateOnStart: false,
-});
+export const LegacyRawButton = createNativeWrapper<LegacyRawButtonProps>(
+  GestureHandlerButton as unknown as HostComponent<LegacyRawButtonProps>,
+  {
+    shouldCancelWhenOutside: false,
+    shouldActivateOnStart: false,
+  }
+);
 
 class InnerBaseButton extends React.Component<BaseButtonWithRefProps> {
   static defaultProps = {
@@ -62,12 +66,7 @@ class InnerBaseButton extends React.Component<BaseButtonWithRefProps> {
       this.props.onPress(pointerInside);
     }
 
-    if (
-      !this.lastActive &&
-      // NativeViewGestureHandler sends different events based on platform
-      state === (Platform.OS !== 'android' ? State.ACTIVE : State.BEGAN) &&
-      pointerInside
-    ) {
+    if (!this.lastActive && state === State.BEGAN && pointerInside) {
       this.longPressDetected = false;
       if (this.props.onLongPress) {
         this.longPressTimeout = setTimeout(
@@ -144,15 +143,19 @@ const AnimatedInnerBaseButton =
 /**
  * @deprecated use `BaseButton` instead
  */
-export const LegacyBaseButton = React.forwardRef<
-  React.ComponentType,
-  Omit<LegacyBaseButtonProps, 'innerRef'>
->((props, ref) => <InnerBaseButton innerRef={ref} {...props} />);
-
-const AnimatedBaseButton = React.forwardRef<
-  React.ComponentType,
-  Animated.AnimatedProps<BaseButtonWithRefProps>
->((props, ref) => <AnimatedInnerBaseButton innerRef={ref} {...props} />);
+export const LegacyBaseButton = ({
+  ref,
+  ...props
+}: Omit<LegacyBaseButtonProps, 'innerRef'> & {
+  ref?: React.Ref<React.ComponentType<any>> | undefined;
+}) => <InnerBaseButton innerRef={ref} {...props} />;
+
+const AnimatedBaseButton = ({
+  ref,
+  ...props
+}: Animated.AnimatedProps<BaseButtonWithRefProps> & {
+  ref?: React.Ref<React.ComponentType<any>> | undefined;
+}) => <AnimatedInnerBaseButton innerRef={ref} {...props} />;
 
 const btnStyles = StyleSheet.create({
   underlay: {
@@ -186,7 +189,9 @@ class InnerRectButton extends React.Component<RectButtonWithRefProps> {
   };
 
   override render() {
-    const { children, style, ...rest } = this.props;
+    // Move activeOpacity out of the rest props to avoid passing it to the native component
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { children, style, activeOpacity, ...rest } = this.props;
 
     const resolvedStyle = StyleSheet.flatten(style) ?? {};
 
@@ -219,10 +224,12 @@ class InnerRectButton extends React.Component<RectButtonWithRefProps> {
 /**
  * @deprecated use `RectButton` instead
  */
-export const LegacyRectButton = React.forwardRef<
-  React.ComponentType,
-  Omit<LegacyRectButtonProps, 'innerRef'>
->((props, ref) => <InnerRectButton innerRef={ref} {...props} />);
+export const LegacyRectButton = ({
+  ref,
+  ...props
+}: Omit<LegacyRectButtonProps, 'innerRef'> & {
+  ref?: React.Ref<React.ComponentType<any>> | undefined;
+}) => <InnerRectButton innerRef={ref} {...props} />;
 
 class InnerBorderlessButton extends React.Component<BorderlessButtonWithRefProps> {
   static defaultProps = {
@@ -246,7 +253,9 @@ class InnerBorderlessButton extends React.Component<BorderlessButtonWithRefProps
   };
 
   override render() {
-    const { children, style, innerRef, ...rest } = this.props;
+    // Move activeOpacity out of the rest props to avoid passing it to the native component
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { children, style, innerRef, activeOpacity, ...rest } = this.props;
 
     return (
       <AnimatedBaseButton
@@ -263,9 +272,11 @@ class InnerBorderlessButton extends React.Component<BorderlessButtonWithRefProps
 /**
  * @deprecated use `BorderlessButton` instead
  */
-export const LegacyBorderlessButton = React.forwardRef<
-  React.ComponentType,
-  Omit<LegacyBorderlessButtonProps, 'innerRef'>
->((props, ref) => <InnerBorderlessButton innerRef={ref} {...props} />);
+export const LegacyBorderlessButton = ({
+  ref,
+  ...props
+}: Omit<LegacyBorderlessButtonProps, 'innerRef'> & {
+  ref?: React.Ref<React.ComponentType<any>> | undefined;
+}) => <InnerBorderlessButton innerRef={ref} {...props} />;
 
 export { default as LegacyPureNativeButton } from './GestureHandlerButton';

package/src/components/GestureButtonsProps.ts

@@ -1,11 +1,12 @@
-import * as React from 'react';
-import {
+import type * as React from 'react';
+import type {
   AccessibilityProps,
   ColorValue,
   LayoutChangeEvent,
   StyleProp,
   ViewStyle,
 } from 'react-native';
+
 import type { NativeViewGestureHandlerProps } from '../handlers/NativeViewGestureHandler';
 
 /**
@@ -18,42 +19,42 @@ export interface LegacyRawButtonProps
    * Defines if more than one button could be pressed simultaneously. By default
    * set true.
    */
-  exclusive?: boolean;
+  exclusive?: boolean | undefined;
   // TODO: we should transform props in `createNativeWrapper`
   /**
    * Android only.
    *
    * Defines color of native ripple animation used since API level 21.
    */
-  rippleColor?: number | ColorValue | null;
+  rippleColor?: number | ColorValue | null | undefined;
 
   /**
    * Android only.
    *
    * Defines radius of native ripple animation used since API level 21.
    */
-  rippleRadius?: number | null;
+  rippleRadius?: number | null | undefined;
 
   /**
    * Android only.
    *
    * Set this to true if you want the ripple animation to render outside the view bounds.
    */
-  borderless?: boolean;
+  borderless?: boolean | undefined;
 
   /**
    * Android only.
    *
    * Defines whether the ripple animation should be drawn on the foreground of the view.
    */
-  foreground?: boolean;
+  foreground?: boolean | undefined;
 
   /**
    * Android only.
    *
    * Set this to true if you don't want the system to play sound when the button is pressed.
    */
-  touchSoundDisabled?: boolean;
+  touchSoundDisabled?: boolean | undefined;
 
   /**
    * Style object, use it to set additional styles.
@@ -70,31 +71,31 @@ export interface LegacyRawButtonProps
    * @deprecated test-only props are deprecated and will be removed in the future.
    */
   // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onPress?: Function | null;
+  testOnly_onPress?: Function | null | undefined;
 
   /**
    * Used for testing-library compatibility, not passed to the native component.
    * @deprecated test-only props are deprecated and will be removed in the future.
    */
   // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onPressIn?: Function | null;
+  testOnly_onPressIn?: Function | null | undefined;
 
   /**
    * Used for testing-library compatibility, not passed to the native component.
    * @deprecated test-only props are deprecated and will be removed in the future.
    */
   // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onPressOut?: Function | null;
+  testOnly_onPressOut?: Function | null | undefined;
 
   /**
    * Used for testing-library compatibility, not passed to the native component.
    * @deprecated test-only props are deprecated and will be removed in the future.
    */
   // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onLongPress?: Function | null;
+  testOnly_onLongPress?: Function | null | undefined;
 }
 interface ButtonWithRefProps {
-  innerRef?: React.ForwardedRef<React.ComponentType<any>>;
+  innerRef?: React.Ref<React.ComponentType<any>> | undefined;
 }
 
 /**
@@ -105,28 +106,28 @@ export interface LegacyBaseButtonProps extends LegacyRawButtonProps {
    * Called when the button gets pressed (analogous to `onPress` in
    * `TouchableHighlight` from RN core).
    */
-  onPress?: (pointerInside: boolean) => void;
+  onPress?: ((pointerInside: boolean) => void) | undefined;
 
   /**
    * Called when the button gets pressed and is held for `delayLongPress`
    * milliseconds.
    */
-  onLongPress?: () => void;
+  onLongPress?: (() => void) | undefined;
 
   /**
    * Called when button changes from inactive to active and vice versa. It
    * passes active state as a boolean variable as a first parameter for that
    * method.
    */
-  onActiveStateChange?: (active: boolean) => void;
+  onActiveStateChange?: ((active: boolean) => void) | undefined;
   style?: StyleProp<ViewStyle>;
-  testID?: string;
+  testID?: string | undefined;
 
   /**
    * Delay, in milliseconds, after which the `onLongPress` callback gets called.
    * Defaults to 600.
    */
-  delayLongPress?: number;
+  delayLongPress?: number | undefined;
 }
 export interface BaseButtonWithRefProps
   extends LegacyBaseButtonProps,
@@ -139,14 +140,14 @@ export interface LegacyRectButtonProps extends LegacyBaseButtonProps {
   /**
    * Background color that will be dimmed when button is in active state.
    */
-  underlayColor?: string;
+  underlayColor?: string | undefined;
 
   /**
    * iOS only.
    *
    * Opacity applied to the underlay when button is in active state.
    */
-  activeOpacity?: number;
+  activeOpacity?: number | undefined;
 }
 export interface RectButtonWithRefProps
   extends LegacyRectButtonProps,
@@ -162,7 +163,7 @@ export interface LegacyBorderlessButtonProps extends LegacyBaseButtonProps {
    *
    * Opacity applied to the button when it is in an active state.
    */
-  activeOpacity?: number;
+  activeOpacity?: number | undefined;
 }
 export interface BorderlessButtonWithRefProps
   extends LegacyBorderlessButtonProps,