Allow GestureHandlerRootView to be manually made active (#2401)

This PR allows users to override whether a particular
`GestureHandlerRootView` is enabled or not. By default, only the topmost
root view would be active, allowing all gestures to interact with each
other.

The problem with that approach is that if any of the native views
underneath called`requestDisallowInterceptTouchEvent`, all gestures
would be canceled. It comes from the fact that
`requestDisallowInterceptTouchEvent` calls are propagated up the view
hierarchy and we expect `GestureHandlerRootView` to be relatively close
to the top.

The simple solution would be to add another root view underneath the
view that may call `requestDisallowInterceptTouchEvent` to prevent
gestures from being canceled, this, however, resulted in two problems:
- the inner root view would not be enabled
- after adding the option to enable it manually, both root views would
start handling the event, resulting in duplicated event streams

I've fixed the second problem by adding checks at the beginning of
`extractGestureHandlers` and `traverseWithPointerEvents` to ensure that
we're not extracting gestures attached under another enabled root view.

This allows for solving the problem described in
#2383.

Tested on the reproduction from
#2383

Author: j-piasecki

packages/docs-gesture-handler/docs/fundamentals/installation.md

@@ -70,6 +70,10 @@ If you're unsure if one of your dependencies already renders `GestureHandlerRoot
 If you're using gesture handler in your component library, you may want to wrap your library's code in the `GestureHandlerRootView` component. This will avoid extra configuration for the user.
 :::
 
+:::tip
+If you're having trouble with gestures not working when inside a component provided by a third-party library, even though you've wrapped the entry point with `<GestureHandlerRootView>`, you can try adding another `<GestureHandlerRootView unstable_forceActive>` closer to the place the gestures are defined. This way, you can prevent Android from canceling relevant gestures when one of the native views tries to grab lock for delivering touch events.
+:::
+
 ### 3. Platform specific setup
 
 #### [Expo development build](https://docs.expo.dev/develop/development-builds/introduction/)

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/GestureHandlerOrchestrator.kt

@@ -7,6 +7,7 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.EditText
 import com.swmansion.gesturehandler.react.RNGestureHandlerRootHelper
+import com.swmansion.gesturehandler.react.RNGestureHandlerRootView
 import java.util.*
 
 class GestureHandlerOrchestrator(
@@ -475,6 +476,12 @@ class GestureHandlerOrchestrator(
 
     while (parent != null) {
       if (parent is ViewGroup) {
+        // Stop traversing the hierarchy when encountering another active root view to prevent
+        // gestures from being extracted multiple times by different orchestrators.
+        if (parent is RNGestureHandlerRootView && parent.isRootViewEnabled()) {
+          break
+        }
+
         val parentViewGroup: ViewGroup = parent
 
         handlerRegistry.getHandlersForView(parent)?.let {
@@ -562,12 +569,26 @@ class GestureHandlerOrchestrator(
     extractGestureHandlers(wrapperView, tempCoords, pointerId, event)
   }
 
+  private fun shouldIgnoreSubtreeIfGestureHandlerRootView(view: View) =
+    view is RNGestureHandlerRootView && view != wrapperView && view.isRootViewEnabled()
+
   private fun extractGestureHandlers(
     viewGroup: ViewGroup,
     coords: FloatArray,
     pointerId: Int,
     event: MotionEvent,
   ): Boolean {
+    if (shouldIgnoreSubtreeIfGestureHandlerRootView(viewGroup)) {
+      // When we encounter another active root view while traversing the view hierarchy, we want
+      // to stop there so that it can handle the gesture attached under it itself.
+      // This helps in cases where a view may call `requestDisallowInterceptTouchEvent` (which would
+      // cancel all gestures handled by its parent root view) but there may be some gestures attached
+      // to views under it which should work. Adding another root view under that particular view
+      // would allow the gesture to be recognized even though the parent root view cancelled its gestures.
+      // We want to stop here so the gesture receives event only once.
+      return false
+    }
+
     val childrenCount = viewGroup.childCount
     for (i in childrenCount - 1 downTo 0) {
       val child = viewConfigHelper.getChildInDrawingOrderAtIndex(viewGroup, i)
@@ -595,52 +616,63 @@ class GestureHandlerOrchestrator(
   }
 
   private fun traverseWithPointerEvents(view: View, coords: FloatArray, pointerId: Int, event: MotionEvent): Boolean =
-    when (viewConfigHelper.getPointerEventsConfigForView(view)) {
-      PointerEventsConfig.NONE -> {
-        // This view and its children can't be the target
-        false
-      }
-      PointerEventsConfig.BOX_ONLY -> {
-        // This view is the target, its children don't matter
-        (
-          recordViewHandlersForPointer(view, coords, pointerId, event) ||
-            shouldHandlerlessViewBecomeTouchTarget(view, coords)
-          )
-      }
-      PointerEventsConfig.BOX_NONE -> {
-        // This view can't be the target, but its children might
-        when (view) {
-          is ViewGroup -> {
-            extractGestureHandlers(view, coords, pointerId, event).also { found ->
-              // A child view is handling touch, also extract handlers attached to this view
-              if (found) {
-                recordViewHandlersForPointer(view, coords, pointerId, event)
+    if (shouldIgnoreSubtreeIfGestureHandlerRootView(view)) {
+      // When we encounter another active root view while traversing the view hierarchy, we want
+      // to stop there so that it can handle the gesture attached under it itself.
+      // This helps in cases where a view may call `requestDisallowInterceptTouchEvent` (which would
+      // cancel all gestures handled by its parent root view) but there may be some gestures attached
+      // to views under it which should work. Adding another root view under that particular view
+      // would allow the gesture to be recognized even though the parent root view cancelled its gestures.
+      // We want to stop here so the gesture receives event only once.
+      false
+    } else {
+      when (viewConfigHelper.getPointerEventsConfigForView(view)) {
+        PointerEventsConfig.NONE -> {
+          // This view and its children can't be the target
+          false
+        }
+        PointerEventsConfig.BOX_ONLY -> {
+          // This view is the target, its children don't matter
+          (
+            recordViewHandlersForPointer(view, coords, pointerId, event) ||
+              shouldHandlerlessViewBecomeTouchTarget(view, coords)
+            )
+        }
+        PointerEventsConfig.BOX_NONE -> {
+          // This view can't be the target, but its children might
+          when (view) {
+            is ViewGroup -> {
+              extractGestureHandlers(view, coords, pointerId, event).also { found ->
+                // A child view is handling touch, also extract handlers attached to this view
+                if (found) {
+                  recordViewHandlersForPointer(view, coords, pointerId, event)
+                }
               }
             }
+            // When <TextInput> has editable set to `false` getPointerEventsConfigForView returns
+            // `BOX_NONE` as it's `isEnabled` property is false. In this case we still want to extract
+            // handlers attached to the text input, as it makes sense that gestures would work on a
+            // non-editable TextInput.
+            is EditText -> {
+              recordViewHandlersForPointer(view, coords, pointerId, event)
+            }
+            else -> false
           }
-          // When <TextInput> has editable set to `false` getPointerEventsConfigForView returns
-          // `BOX_NONE` as it's `isEnabled` property is false. In this case we still want to extract
-          // handlers attached to the text input, as it makes sense that gestures would work on a
-          // non-editable TextInput.
-          is EditText -> {
-            recordViewHandlersForPointer(view, coords, pointerId, event)
-          }
-          else -> false
-        }
-      }
-      PointerEventsConfig.AUTO -> {
-        // Either this view or one of its children is the target
-        val found = if (view is ViewGroup) {
-          extractGestureHandlers(view, coords, pointerId, event)
-        } else {
-          false
         }
+        PointerEventsConfig.AUTO -> {
+          // Either this view or one of its children is the target
+          val found = if (view is ViewGroup) {
+            extractGestureHandlers(view, coords, pointerId, event)
+          } else {
+            false
+          }
 
-        (
-          recordViewHandlersForPointer(view, coords, pointerId, event) ||
-            found ||
-            shouldHandlerlessViewBecomeTouchTarget(view, coords)
-          )
+          (
+            recordViewHandlersForPointer(view, coords, pointerId, event) ||
+              found ||
+              shouldHandlerlessViewBecomeTouchTarget(view, coords)
+            )
+        }
       }
     }
 

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootView.kt

@@ -14,10 +14,12 @@ import com.facebook.react.views.view.ReactViewGroup
 class RNGestureHandlerRootView(context: Context?) : ReactViewGroup(context) {
   private var moduleId: Int = -1
   private var rootViewEnabled = false
+  private var unstableForceActive = false
   private var rootHelper: RNGestureHandlerRootHelper? = null // TODO: resettable lateinit
+
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
-    rootViewEnabled = !hasGestureHandlerEnabledRootView(this)
+    rootViewEnabled = unstableForceActive || !hasGestureHandlerEnabledRootView(this)
     if (!rootViewEnabled) {
       Log.i(
         ReactConstants.TAG,
@@ -61,6 +63,12 @@ class RNGestureHandlerRootView(context: Context?) : ReactViewGroup(context) {
     rootHelper?.activateNativeHandlers(view)
   }
 
+  fun isRootViewEnabled() = rootViewEnabled
+
+  fun setUnstableForceActive(active: Boolean) {
+    this.unstableForceActive = active
+  }
+
   companion object {
     private fun hasGestureHandlerEnabledRootView(viewGroup: ViewGroup): Boolean {
       UiThreadUtil.assertOnUiThread()

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootViewManager.kt

@@ -4,6 +4,7 @@ import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
 import com.facebook.react.viewmanagers.RNGestureHandlerRootViewManagerDelegate
 import com.facebook.react.viewmanagers.RNGestureHandlerRootViewManagerInterface
 import com.swmansion.gesturehandler.react.events.RNGestureHandlerEvent
@@ -38,6 +39,11 @@ class RNGestureHandlerRootViewManager :
     view.setModuleId(value)
   }
 
+  @ReactProp(name = "unstable_forceActive")
+  override fun setUnstable_forceActive(view: RNGestureHandlerRootView, active: Boolean) {
+    view.setUnstableForceActive(active)
+  }
+
   /**
    * The following event configuration is necessary even if you are not using
    * GestureHandlerRootView component directly.

packages/react-native-gesture-handler/src/components/GestureHandlerRootView.android.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
-import { ViewProps, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
+import type { RootViewNativeProps } from '../specs/RNGestureHandlerRootViewNativeComponent';
 import GestureHandlerRootViewNativeComponent from '../specs/RNGestureHandlerRootViewNativeComponent';
 
 export interface GestureHandlerRootViewProps
-  extends PropsWithChildren<ViewProps> {}
+  extends PropsWithChildren<RootViewNativeProps> {}
 
 export default function GestureHandlerRootView({
   style,

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
-import { View, ViewProps, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
+import type { RootViewNativeProps } from '../specs/RNGestureHandlerRootViewNativeComponent';
 
 export interface GestureHandlerRootViewProps
-  extends PropsWithChildren<ViewProps> {}
+  extends PropsWithChildren<RootViewNativeProps> {}
 
 export default function GestureHandlerRootView({
   style,

packages/react-native-gesture-handler/src/specs/RNGestureHandlerRootViewNativeComponent.ts

@@ -2,8 +2,14 @@ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNati
 import type { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
 import type { ViewProps } from 'react-native';
 
+// Publicly accessible type, moduleId is set internally
+export interface RootViewNativeProps extends ViewProps {
+  unstable_forceActive?: boolean;
+}
+
 interface NativeProps extends ViewProps {
   moduleId: Int32;
+  unstable_forceActive?: boolean;
 }
 
 export default codegenNativeComponent<NativeProps>('RNGestureHandlerRootView');