Merge branch 'next' into @latekvo/remove-deprecated-classes-and-funct…

…ions

FabricExample/yarn.lock

@@ -1128,13 +1128,6 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@egjs/hammerjs@^2.0.17":
-  version "2.0.17"
-  resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
-  integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
-  dependencies:
-    "@types/hammerjs" "^2.0.36"
-
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -1902,11 +1895,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/hammerjs@^2.0.36":
-  version "2.0.45"
-  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.45.tgz#ffa764bb68a66c08db6efb9c816eb7be850577b1"
-  integrity sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"
@@ -3828,6 +3816,13 @@ [email protected]:
   dependencies:
     hermes-estree "0.24.0"
 
+hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 html-escaper@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
@@ -5672,7 +5667,7 @@ react-devtools-core@^5.3.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

MacOSExample/yarn.lock

@@ -1427,13 +1427,6 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@egjs/hammerjs@^2.0.17":
-  version "2.0.17"
-  resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
-  integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
-  dependencies:
-    "@types/hammerjs" "^2.0.36"
-
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -2330,11 +2323,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/hammerjs@^2.0.36":
-  version "2.0.43"
-  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.43.tgz#8660dd1e0e5fd979395e2f999e670cdb9484d1e9"
-  integrity sha512-wqxfwHk83RS7+6OpytGdo5wqkqtvx+bGaIs1Rwm5NrtQHUfL4OgWs/5p0OipmjmT+fexePh37Ek+mqIpdNjQKA==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#fdfdd69fa16d530047d9963635bd77c71a08c068"
@@ -4330,7 +4318,7 @@ hermes-profile-transformer@^0.0.6:
   dependencies:
     source-map "^0.7.3"
 
-hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==

android/src/main/java/com/swmansion/gesturehandler/RNGestureHandlerPackage.kt

@@ -1,6 +1,6 @@
 package com.swmansion.gesturehandler
 
-import com.facebook.react.TurboReactPackage
+import com.facebook.react.BaseReactPackage
 import com.facebook.react.ViewManagerOnDemandReactPackage
 import com.facebook.react.bridge.ModuleSpec
 import com.facebook.react.bridge.NativeModule
@@ -19,7 +19,7 @@ import com.swmansion.gesturehandler.react.RNGestureHandlerRootViewManager
     RNGestureHandlerModule::class
   ]
 )
-class RNGestureHandlerPackage : TurboReactPackage(), ViewManagerOnDemandReactPackage {
+class RNGestureHandlerPackage : BaseReactPackage(), ViewManagerOnDemandReactPackage {
   private val viewManagers: Map<String, ModuleSpec> by lazy {
     mapOf(
       RNGestureHandlerRootViewManager.REACT_CLASS to ModuleSpec.viewManagerSpec {
@@ -71,7 +71,6 @@ class RNGestureHandlerPackage : TurboReactPackage(), ViewManagerOnDemandReactPac
             RNGestureHandlerModule::class.java.name,
             reactModule.canOverrideExistingModule,
             reactModule.needsEagerInit,
-            true, // Has constants is hardcoded to return true, so replacing it with `true` changes nothing.
             reactModule.isCxxModule,
             true
           )

android/src/main/java/com/swmansion/gesturehandler/core/NativeViewGestureHandler.kt

@@ -9,6 +9,7 @@ import android.widget.ScrollView
 import com.facebook.react.views.scroll.ReactScrollView
 import com.facebook.react.views.swiperefresh.ReactSwipeRefreshLayout
 import com.facebook.react.views.textinput.ReactEditText
+import com.facebook.react.views.view.ReactViewGroup
 import com.swmansion.gesturehandler.react.RNGestureHandlerButtonViewManager
 import com.swmansion.gesturehandler.react.isScreenReaderOn
 
@@ -79,6 +80,7 @@ class NativeViewGestureHandler : GestureHandler<NativeViewGestureHandler>() {
       is ReactEditText -> this.hook = EditTextHook(this, view)
       is ReactSwipeRefreshLayout -> this.hook = SwipeRefreshLayoutHook(this, view)
       is ReactScrollView -> this.hook = ScrollViewHook()
+      is ReactViewGroup -> this.hook = ReactViewGroupHook()
     }
   }
 
@@ -99,7 +101,7 @@ class NativeViewGestureHandler : GestureHandler<NativeViewGestureHandler>() {
       if (state == STATE_UNDETERMINED && !hook.canBegin(event)) {
         cancel()
       } else {
-        view.onTouchEvent(event)
+        hook.sendTouchEvent(view, event)
         if ((state == STATE_UNDETERMINED || state == STATE_BEGAN) && view.isPressed) {
           activate()
         }
@@ -116,12 +118,12 @@ class NativeViewGestureHandler : GestureHandler<NativeViewGestureHandler>() {
       when {
         shouldActivateOnStart -> {
           tryIntercept(view, event)
-          view.onTouchEvent(event)
+          hook.sendTouchEvent(view, event)
           activate()
         }
 
         tryIntercept(view, event) -> {
-          view.onTouchEvent(event)
+          hook.sendTouchEvent(view, event)
           activate()
         }
 
@@ -136,7 +138,7 @@ class NativeViewGestureHandler : GestureHandler<NativeViewGestureHandler>() {
         }
       }
     } else if (state == STATE_ACTIVE) {
-      view.onTouchEvent(event)
+      hook.sendTouchEvent(view, event)
     }
   }
 
@@ -145,7 +147,7 @@ class NativeViewGestureHandler : GestureHandler<NativeViewGestureHandler>() {
     val event = MotionEvent.obtain(time, time, MotionEvent.ACTION_CANCEL, 0f, 0f, 0).apply {
       action = MotionEvent.ACTION_CANCEL
     }
-    view!!.onTouchEvent(event)
+    hook.sendTouchEvent(view, event)
     event.recycle()
   }
 
@@ -199,6 +201,11 @@ class NativeViewGestureHandler : GestureHandler<NativeViewGestureHandler>() {
      * by this one.
      */
     fun shouldCancelRootViewGestureHandlerIfNecessary() = false
+
+    /**
+     * Passes the event down to the underlying view using the correct method.
+     */
+    fun sendTouchEvent(view: View?, event: MotionEvent) = view?.onTouchEvent(event)
   }
 
   private class EditTextHook(
@@ -278,4 +285,12 @@ class NativeViewGestureHandler : GestureHandler<NativeViewGestureHandler>() {
   private class ScrollViewHook : NativeViewGestureHandlerHook {
     override fun shouldCancelRootViewGestureHandlerIfNecessary() = true
   }
+
+  private class ReactViewGroupHook : NativeViewGestureHandlerHook {
+    // There are cases where a native component is wrapped with a `ReactViewGroup` (the component is rendered
+    // inside a `<View />` component in JS). In such cases, calling `onTouchEvent` wouldn't work as those are
+    // ignored by the wrapper view. Instead `dispatchTouchEvent` can be used, which causes the view to dispatch
+    // the event to its children.
+    override fun sendTouchEvent(view: View?, event: MotionEvent) = view?.dispatchTouchEvent(event)
+  }
 }

apple/RNGestureHandlerManager.mm

@@ -51,6 +51,7 @@ @implementation RNGestureHandlerManager {
   RNGestureHandlerRegistry *_registry;
   NSHashTable<RNRootViewGestureRecognizer *> *_rootViewGestureRecognizers;
   NSMutableDictionary<NSNumber *, NSNumber *> *_attachRetryCounter;
+  NSMutableSet *_droppedHandlers;
 #ifdef RCT_NEW_ARCH_ENABLED
   RCTModuleRegistry *_moduleRegistry;
   RCTViewRegistry *_viewRegistry;
@@ -90,6 +91,7 @@ - (void)initCommonProps
   _registry = [RNGestureHandlerRegistry new];
   _rootViewGestureRecognizers = [NSHashTable hashTableWithOptions:NSPointerFunctionsWeakMemory];
   _attachRetryCounter = [[NSMutableDictionary alloc] init];
+  _droppedHandlers = [NSMutableSet set];
 }
 
 - (void)createGestureHandler:(NSString *)handlerName tag:(NSNumber *)handlerTag config:(NSDictionary *)config
@@ -168,7 +170,9 @@ - (void)attachGestureHandler:(nonnull NSNumber *)handlerTag
       [_attachRetryCounter setObject:counter forKey:viewTag];
 
       dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.1 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
-        [self attachGestureHandler:handlerTag toViewWithTag:viewTag withActionType:actionType];
+        if (![_droppedHandlers containsObject:handlerTag]) {
+          [self attachGestureHandler:handlerTag toViewWithTag:viewTag withActionType:actionType];
+        }
       });
     }
 
@@ -205,6 +209,7 @@ - (void)updateGestureHandler:(NSNumber *)handlerTag config:(NSDictionary *)confi
 - (void)dropGestureHandler:(NSNumber *)handlerTag
 {
   [_registry dropHandlerWithTag:handlerTag];
+  [_droppedHandlers addObject:handlerTag];
 }
 
 - (void)dropAllGestureHandlers

docs/docs/fundamentals/installation.md

@@ -193,20 +193,4 @@ import 'react-native-gesture-handler';
 
 ## Web
 
-There is no additional configuration required for the web, however, since the Gesture Handler 2.10.0 the new web implementation is enabled by default. It is recommended to check if the gestures in your app are working as expected since their behavior should now resemble the native platforms. If you don't want to use the new implementation, you can still revert back to the legacy one by enabling it at the beginning of your `index.js` file:
-
-```js
-import { enableLegacyWebImplementation } from 'react-native-gesture-handler';
-
-enableLegacyWebImplementation(true);
-```
-
-Nonetheless, it's recommended to adapt to the new implementation, as the legacy one will be dropped at some point in the future.
-
-If you want to start using the new implementation but don't want to upgrade Gesture Handler, you can enable it (starting with Gesture Handler 2.6.0) at the beginning of your `index.js` file:
-
-```js
-import { enableExperimentalWebImplementation } from 'react-native-gesture-handler';
-
-enableExperimentalWebImplementation(true);
-```
+There is no additional configuration required for the web.

docs/docs/guides/swipe-and-scroll.md

@@ -0,0 +1,12 @@
+---
+id: swipe-and-scroll
+title: Custom swipeable components inside ScrollView (web)
+---
+
+While we recommend using our own [`ReanimatedSwipeable`](../components/reanimated_swipeable.md) component, creating your own version of swipeable gives you more control over its behavior. Common issue here is that after creating your own swipeable component, scroll does not work. In that case, try adding [`touchAction`](../gestures/gesture-detector.md#touchaction-web-only) set to `"pan-y"`, like this:
+
+```jsx
+<GestureDetector gesture={...} ... touchAction="pan-y">
+  ...
+</GestureDetector>
+```

docs/package.json

@@ -56,7 +56,7 @@
     "esbuild": "^0.20.2",
     "esbuild-register": "^3.5.0",
     "eslint-plugin-mdx": "^2.2.0",
-    "prettier": "^2.8.4",
+    "prettier": "^3.3.3",
     "typescript": "^4.7.4",
     "webpack-cli": "^5.0.1"
   },

docs/src/css/typography.css

@@ -183,6 +183,11 @@ code {
   border-bottom: 1px solid var(--ifm-font-color-base);
 }
 
+.markdown h2 code {
+  font-size: 22px;
+  font-weight: 600;
+}
+
 /* Sidebar */
 [class*='menu__list-item-collapsible'] a {
   font-family: var(--swm-title-font);

e2e/web-tests/App.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { enableExperimentalWebImplementation } from 'react-native-gesture-handler';
 import { DoubleTapTest } from './components/DoubleTapTest';
 import { PanTest } from './components/PanTest';
 import { TapTest } from './components/TapTest';
 import { LongPressTest } from './components/LongPressTest';
 
-enableExperimentalWebImplementation();
-
 export default function App() {
   return (
     <View style={styles.container}>

example/app.config.js

@@ -0,0 +1,59 @@
+export default ({ config }) => ({
+  ...config,
+  name: 'example',
+  slug: 'example',
+  version: '0.0.1',
+  orientation: 'portrait',
+  icon: './assets/icon.png',
+  sdkVersion: '51.0.0',
+  splash: {
+    image: './assets/splash.png',
+    resizeMode: 'cover',
+    backgroundColor: '#F8F9FF',
+  },
+  ios: {
+    bundleIdentifier: 'com.example',
+    buildNumber: '1',
+    supportsTablet: true,
+  },
+  android: {
+    versionCode: 1,
+    package: 'com.example',
+    adaptiveIcon: {
+      foregroundImage: './assets/adaptive-icon.png',
+      backgroundColor: '#F8F9FF',
+    },
+  },
+  web: {
+    favicon: './assets/favicon.png',
+  },
+  plugins: [
+    [
+      'expo-camera',
+      {
+        cameraPermission: 'Allow RNGH example to access your camera',
+      },
+    ],
+    [
+      'expo-font',
+      {
+        fonts: [
+          './node_modules/@swmansion/icons/fonts/broken/swm-icons-broken.ttf',
+          './node_modules/@swmansion/icons/fonts/outline/swm-icons-outline.ttf',
+          './node_modules/@swmansion/icons/fonts/curved/swm-icons-curved.ttf',
+        ],
+      },
+    ],
+    [
+      'expo-build-properties',
+      {
+        ios: {
+          newArchEnabled: Boolean(Number(process.env.FABRIC_ENABLED)),
+        },
+        android: {
+          newArchEnabled: Boolean(Number(process.env.FABRIC_ENABLED)),
+        },
+      },
+    ],
+  ],
+});