react-native-gesture-handler 3.0.0-beta.4 → 3.0.0-beta.5

package/android/src/main/java/com/swmansion/gesturehandler/core/GestureHandlerOrchestrator.kt

@@ -362,11 +362,19 @@ class GestureHandlerOrchestrator(
     if (view === wrapperView) {
       return true
     }
-    var parent = view.parent
-    while (parent != null && parent !== wrapperView) {
-      parent = parent.parent
+    var current: View = view
+    while (true) {
+      val parent = current.parent as? ViewGroup ?: return false
+
+      when {
+        // A disappearing child (kept drawable for an exit animation, e.g. RNScreens during a
+        // navigation transition) still has `parent` set but is gone from `mChildren`. Treat as
+        // detached - `cancelTouchTarget` already synthesized ACTION_CANCEL into this subtree.
+        parent.indexOfChild(current) < 0 -> return false
+        parent === wrapperView -> return true
+        else -> current = parent
+      }
     }
-    return parent === wrapperView
   }
 
   fun isAnyHandlerActive() = gestureHandlers.any { it.state == GestureHandler.STATE_ACTIVE }

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

@@ -345,8 +345,12 @@ class NativeViewGestureHandler : GestureHandler() {
 
     // recognize alongside every handler besides RootViewGestureHandler;
     // also if other handler is NativeViewGestureHandler then don't override the default implementation
-    override fun shouldRecognizeSimultaneously(handler: GestureHandler) =
-      handler !is RNGestureHandlerRootHelper.RootViewGestureHandler && handler !is NativeViewGestureHandler
+    override fun shouldRecognizeSimultaneously(handler: GestureHandler): Boolean? =
+      if (handler is NativeViewGestureHandler) {
+        null
+      } else {
+        handler !is RNGestureHandlerRootHelper.RootViewGestureHandler
+      }
 
     override fun wantsToHandleEventBeforeActivation() = true
 

package/android/src/main/java/com/swmansion/gesturehandler/react/Extensions.kt

@@ -1,6 +1,7 @@
 package com.swmansion.gesturehandler.react
 
 import android.content.Context
+import android.view.Display
 import android.view.MotionEvent
 import android.view.accessibility.AccessibilityManager
 import com.facebook.react.bridge.ReactContext
@@ -15,3 +16,23 @@ fun Context.isScreenReaderOn() =
 fun MotionEvent.isHoverAction(): Boolean = action == MotionEvent.ACTION_HOVER_MOVE ||
   action == MotionEvent.ACTION_HOVER_ENTER ||
   action == MotionEvent.ACTION_HOVER_EXIT
+
+val Display.minimumFrameTime: Float
+  get() {
+    val supportedModes = this.supportedModes
+    var maxRefreshRate = 0f
+
+    supportedModes.forEach { mode ->
+      if (mode.refreshRate > maxRefreshRate) {
+        maxRefreshRate = mode.refreshRate
+      }
+    }
+
+    val effectiveRefreshRate = when {
+      maxRefreshRate > 0f -> maxRefreshRate
+      refreshRate > 0f -> refreshRate
+      else -> 60f
+    }
+
+    return 1000.0f / effectiveRefreshRate
+  }

package/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt

@@ -23,12 +23,12 @@ import android.view.View
 import android.view.ViewGroup
 import android.view.accessibility.AccessibilityNodeInfo
 import androidx.core.view.children
-import androidx.interpolator.view.animation.LinearOutSlowInInterpolator
+import androidx.interpolator.view.animation.FastOutSlowInInterpolator
 import com.facebook.react.R
+import com.facebook.react.bridge.Dynamic
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.BackgroundStyleApplicator
 import com.facebook.react.uimanager.LengthPercentage
-import com.facebook.react.uimanager.LengthPercentageType
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.PointerEvents
 import com.facebook.react.uimanager.ReactPointerEventsView
@@ -178,74 +178,76 @@ class RNGestureHandlerButtonViewManager :
     view.setOverflow(overflow)
   }
 
-  private fun setBorderRadiusInternal(view: ButtonViewGroup, prop: BorderRadiusProp, value: Float) {
-    val isUnset = value.isNaN() || value < 0f
-    val lp = if (isUnset) null else LengthPercentage(value, LengthPercentageType.POINT)
+  private fun setBorderRadiusInternal(view: ButtonViewGroup, prop: BorderRadiusProp, value: Dynamic) {
+    // setFromDynamic returns null for null Dynamics, negative numbers, and
+    // unparseable strings — which is what we want for "unset" so that
+    // general / physical radii continue to cascade.
+    val lp = LengthPercentage.setFromDynamic(value)
     BackgroundStyleApplicator.setBorderRadius(view, prop, lp)
   }
 
   @ReactProp(name = ViewProps.BORDER_RADIUS)
-  override fun setBorderRadius(view: ButtonViewGroup, borderRadius: Float) {
-    setBorderRadiusInternal(view, BorderRadiusProp.BORDER_RADIUS, borderRadius)
+  override fun setBorderRadius(view: ButtonViewGroup, value: Dynamic) {
+    setBorderRadiusInternal(view, BorderRadiusProp.BORDER_RADIUS, value)
   }
 
   @ReactProp(name = "borderTopLeftRadius")
-  override fun setBorderTopLeftRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderTopLeftRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_TOP_LEFT_RADIUS, value)
   }
 
   @ReactProp(name = "borderTopRightRadius")
-  override fun setBorderTopRightRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderTopRightRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_TOP_RIGHT_RADIUS, value)
   }
 
   @ReactProp(name = "borderBottomRightRadius")
-  override fun setBorderBottomRightRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderBottomRightRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_BOTTOM_RIGHT_RADIUS, value)
   }
 
   @ReactProp(name = "borderBottomLeftRadius")
-  override fun setBorderBottomLeftRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderBottomLeftRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_BOTTOM_LEFT_RADIUS, value)
   }
 
   @ReactProp(name = "borderTopStartRadius")
-  override fun setBorderTopStartRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderTopStartRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_TOP_START_RADIUS, value)
   }
 
   @ReactProp(name = "borderTopEndRadius")
-  override fun setBorderTopEndRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderTopEndRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_TOP_END_RADIUS, value)
   }
 
   @ReactProp(name = "borderBottomStartRadius")
-  override fun setBorderBottomStartRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderBottomStartRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_BOTTOM_START_RADIUS, value)
   }
 
   @ReactProp(name = "borderBottomEndRadius")
-  override fun setBorderBottomEndRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderBottomEndRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_BOTTOM_END_RADIUS, value)
   }
 
   @ReactProp(name = "borderEndEndRadius")
-  override fun setBorderEndEndRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderEndEndRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_END_END_RADIUS, value)
   }
 
   @ReactProp(name = "borderEndStartRadius")
-  override fun setBorderEndStartRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderEndStartRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_END_START_RADIUS, value)
   }
 
   @ReactProp(name = "borderStartEndRadius")
-  override fun setBorderStartEndRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderStartEndRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_START_END_RADIUS, value)
   }
 
   @ReactProp(name = "borderStartStartRadius")
-  override fun setBorderStartStartRadius(view: ButtonViewGroup, value: Float) {
+  override fun setBorderStartStartRadius(view: ButtonViewGroup, value: Dynamic) {
     setBorderRadiusInternal(view, BorderRadiusProp.BORDER_START_START_RADIUS, value)
   }
 
@@ -269,14 +271,29 @@ class RNGestureHandlerButtonViewManager :
     view.isSoundEffectsEnabled = !touchSoundDisabled
   }
 
-  @ReactProp(name = "pressAndHoldAnimationDuration")
-  override fun setPressAndHoldAnimationDuration(view: ButtonViewGroup, pressAndHoldAnimationDuration: Int) {
-    view.pressAndHoldAnimationDuration = pressAndHoldAnimationDuration
+  @ReactProp(name = "tapAnimationInDuration")
+  override fun setTapAnimationInDuration(view: ButtonViewGroup, value: Int) {
+    view.tapAnimationInDuration = if (value > 0) value else 0
   }
 
-  @ReactProp(name = "tapAnimationDuration")
-  override fun setTapAnimationDuration(view: ButtonViewGroup, tapAnimationDuration: Int) {
-    view.tapAnimationDuration = if (tapAnimationDuration > 0) tapAnimationDuration else 0
+  @ReactProp(name = "tapAnimationOutDuration")
+  override fun setTapAnimationOutDuration(view: ButtonViewGroup, value: Int) {
+    view.tapAnimationOutDuration = if (value > 0) value else 0
+  }
+
+  @ReactProp(name = "longPressDuration")
+  override fun setLongPressDuration(view: ButtonViewGroup, value: Int) {
+    view.longPressDuration = value
+  }
+
+  @ReactProp(name = "longPressAnimationOutDuration")
+  override fun setLongPressAnimationOutDuration(view: ButtonViewGroup, value: Int) {
+    view.longPressAnimationOutDuration = value
+  }
+
+  @ReactProp(name = "needsOffscreenAlphaCompositing")
+  override fun setNeedsOffscreenAlphaCompositing(view: ButtonViewGroup, value: Boolean) {
+    view.needsOffscreenAlphaCompositing = value
   }
 
   @ReactProp(name = "defaultOpacity")
@@ -354,9 +371,11 @@ class RNGestureHandlerButtonViewManager :
     var useBorderlessDrawable = false
 
     var exclusive = true
-    var tapAnimationDuration: Int = 100
-    var pressAndHoldAnimationDuration: Int = -1
-      get() = if (field < 0) tapAnimationDuration else field
+    var tapAnimationInDuration: Int = 50
+    var tapAnimationOutDuration: Int = 100
+    var longPressDuration: Int = -1
+    var longPressAnimationOutDuration: Int = -1
+      get() = if (field < 0) tapAnimationOutDuration else field
     var activeOpacity: Float = 1.0f
     var defaultOpacity: Float = 1.0f
     var activeScale: Float = 1.0f
@@ -370,6 +389,7 @@ class RNGestureHandlerButtonViewManager :
       set(value) = withBackgroundUpdate {
         field = value
       }
+    var needsOffscreenAlphaCompositing = false
 
     override var pointerEvents: PointerEvents = PointerEvents.AUTO
 
@@ -387,6 +407,11 @@ class RNGestureHandlerButtonViewManager :
     // When null the ripple lives on the foreground drawable instead.
     private var selectableDrawable: Drawable? = null
 
+    // When true, dispatchDraw clips children to the resolved border-radius shape
+    // (overflow: hidden). ViewGroup's clipChildren is only a rectangular clip and
+    // wouldn't respect rounded corners.
+    private var clipChildrenToShape = false
+
     var isTouched = false
 
     init {
@@ -404,16 +429,7 @@ class RNGestureHandlerButtonViewManager :
     }
 
     fun setOverflow(overflow: String?) {
-      when (overflow) {
-        "hidden" -> {
-          clipChildren = true
-          clipToPadding = true
-        }
-        else -> {
-          clipChildren = false
-          clipToPadding = false
-        }
-      }
+      clipChildrenToShape = overflow == "hidden"
       invalidate()
     }
 
@@ -534,6 +550,28 @@ class RNGestureHandlerButtonViewManager :
       }
 
       currentAnimator?.cancel()
+      currentAnimator = null
+
+      // Sub-frame durations: snap directly. ObjectAnimator with duration 0
+      // still defers its property write to the next frame callback, so if a
+      // follow-up animateTo() cancels it in the same frame the property never
+      // lands on its target and the next animator captures a stale starting
+      // value (e.g. an instant press-in followed by press-out in the same
+      // frame, leaving the press-out to animate default → default).
+      if (durationMs < (display?.minimumFrameTime ?: 16f)) {
+        if (hasOpacity) {
+          alpha = opacity
+        }
+        if (hasScale) {
+          scaleX = scale
+          scaleY = scale
+        }
+        if (hasUnderlay) {
+          underlayDrawable!!.alpha = (underlayOpacity * 255).toInt()
+        }
+        return
+      }
+
       val animators = ArrayList<Animator>()
       if (hasOpacity) {
         animators.add(ObjectAnimator.ofFloat(this, "alpha", opacity))
@@ -548,7 +586,7 @@ class RNGestureHandlerButtonViewManager :
       currentAnimator = AnimatorSet().apply {
         playTogether(animators)
         duration = durationMs
-        interpolator = LinearOutSlowInInterpolator()
+        interpolator = FastOutSlowInInterpolator()
         start()
       }
     }
@@ -559,27 +597,33 @@ class RNGestureHandlerButtonViewManager :
         pendingPressOut = null
       }
       pressInTimestamp = SystemClock.uptimeMillis()
-      animateTo(activeOpacity, activeScale, activeUnderlayOpacity, pressAndHoldAnimationDuration.toLong())
+      animateTo(activeOpacity, activeScale, activeUnderlayOpacity, tapAnimationInDuration.toLong())
     }
 
     private fun animatePressOut() {
       pendingPressOut?.let { handler.removeCallbacks(it) }
-      val pressAndHoldMs = pressAndHoldAnimationDuration.toLong()
-      val tapMs = tapAnimationDuration.toLong()
+      val tapInMs = tapAnimationInDuration.toLong()
+      val tapOutMs = tapAnimationOutDuration.toLong()
+      val longPressMs = longPressDuration.toLong()
+      val longPressOutMs = longPressAnimationOutDuration.toLong()
       val elapsed = SystemClock.uptimeMillis() - pressInTimestamp
 
-      if (elapsed >= pressAndHoldMs) {
-        animateTo(defaultOpacity, defaultScale, defaultUnderlayOpacity, pressAndHoldMs)
-        // elapsed * 2 to ensure there is at least half of the tapAnimationDuration left for the animation to play
-      } else if (elapsed * 2 >= tapMs) {
+      if (longPressMs >= 0 && elapsed >= longPressMs) {
+        // Long-press release - use the configured long-press out duration.
+        animateTo(defaultOpacity, defaultScale, defaultUnderlayOpacity, longPressOutMs)
+      } else if (elapsed >= tapInMs) {
+        // Press-in animation fully finished — release with the configured out duration.
+        animateTo(defaultOpacity, defaultScale, defaultUnderlayOpacity, tapOutMs)
+        // elapsed * 2 to ensure there is at least half of the tapAnimationOutDuration left for the animation to play
+      } else if (elapsed * 2 >= tapOutMs) {
         animateTo(defaultOpacity, defaultScale, defaultUnderlayOpacity, elapsed)
       } else {
-        val remaining = tapMs - elapsed
+        val remaining = tapInMs - elapsed
         animateTo(activeOpacity, activeScale, activeUnderlayOpacity, remaining)
 
         val runnable = Runnable {
           pendingPressOut = null
-          animateTo(defaultOpacity, defaultScale, defaultUnderlayOpacity, tapMs)
+          animateTo(defaultOpacity, defaultScale, defaultUnderlayOpacity, tapOutMs)
         }
         pendingPressOut = runnable
         handler.postDelayed(runnable, remaining)
@@ -646,7 +690,14 @@ class RNGestureHandlerButtonViewManager :
           canvas.restore()
         }
       }
-      super.dispatchDraw(canvas)
+      if (clipChildrenToShape) {
+        canvas.save()
+        BackgroundStyleApplicator.clipToPaddingBox(this, canvas)
+        super.dispatchDraw(canvas)
+        canvas.restore()
+      } else {
+        super.dispatchDraw(canvas)
+      }
     }
 
     override fun verifyDrawable(who: Drawable): Boolean =
@@ -699,6 +750,14 @@ class RNGestureHandlerButtonViewManager :
       pendingPressOut = null
       currentAnimator?.cancel()
       currentAnimator = null
+      applyStartAnimationState()
+
+      if (touchResponder === this) {
+        touchResponder = null
+      }
+      if (soundResponder === this) {
+        soundResponder = null
+      }
     }
 
     override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
@@ -847,6 +906,11 @@ class RNGestureHandlerButtonViewManager :
       // by default Viewgroup would pass hotspot change events
     }
 
+    // Default to skipping the offscreen buffer so children's border anti-aliasing
+    // at the view edge isn't clipped by the layer bounds when alpha != 1.
+    // `needsOffscreenAlphaCompositing` opts back into the standard View behavior.
+    override fun hasOverlappingRendering(): Boolean = needsOffscreenAlphaCompositing
+
     companion object {
       var resolveOutValue = TypedValue()
       var touchResponder: ButtonViewGroup? = null

package/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerDetectorView.kt

@@ -16,61 +16,33 @@ import com.swmansion.gesturehandler.react.RNGestureHandlerRootView
 class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
   private val reactContext: ThemedReactContext
     get() = context as ThemedReactContext
-  private var handlersToAttach: List<Int>? = null
-  private var virtualChildrenToAttach: List<VirtualChildren>? = null
+  private var handlersToAttach: List<Int> = emptyList()
+  private var virtualChildrenToAttach: List<VirtualChildren> = emptyList()
   private var nativeHandlers: MutableSet<Int> = mutableSetOf()
+  private var subscribedHandlers: MutableSet<Int> = mutableSetOf()
   private var attachedHandlers: MutableSet<Int> = mutableSetOf()
-  private var attachedVirtualHandlers: MutableMap<Int, MutableSet<Int>> = mutableMapOf()
+  private var subscribedVirtualHandlers: MutableMap<Int, MutableSet<Int>> = mutableMapOf()
   private var moduleId: Int = -1
 
   data class VirtualChildren(val handlerTags: List<Int>, val viewTag: Int)
 
   fun setHandlerTags(handlerTags: ReadableArray?) {
-    val newHandlers = handlerTags?.toArrayList()?.map { (it as Double).toInt() } ?: emptyList()
-    if (moduleId == -1) {
-      // It's possible that handlerTags will be set before module id. In that case, store
-      // the handler ids and attach them after setting module id.
-      handlersToAttach = newHandlers
-      return
+    handlersToAttach = handlerTags?.toArrayList()?.map { (it as Double).toInt() } ?: emptyList()
+    if (moduleId != -1) {
+      attachHandlers(handlersToAttach)
     }
-
-    attachHandlers(newHandlers)
   }
 
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
-
     if (moduleId != -1) {
-      handlersToAttach?.let {
-        attachHandlers(it)
-      }
-
-      virtualChildrenToAttach?.let {
-        attachVirtualChildren(it)
-      }
-
-      handlersToAttach = null
-      virtualChildrenToAttach = null
+      attachHandlers(handlersToAttach)
+      attachVirtualChildren(virtualChildrenToAttach)
     }
   }
 
   override fun onDetachedFromWindow() {
-    if (attachedHandlers.isNotEmpty()) {
-      handlersToAttach = attachedHandlers.toMutableList().also {
-        it.addAll(handlersToAttach ?: emptyList())
-      }
-    }
-
-    if (attachedVirtualHandlers.isNotEmpty()) {
-      virtualChildrenToAttach = attachedVirtualHandlers.map {
-        VirtualChildren(it.value.toList(), it.key)
-      }.toMutableList().also {
-        it.addAll(virtualChildrenToAttach ?: emptyList())
-      }
-    }
-
     detachAllHandlers()
-
     super.onDetachedFromWindow()
   }
 
@@ -78,30 +50,15 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
     assert(this.moduleId == -1) { "Tried to change moduleId of a native detector" }
 
     this.moduleId = id
-    this.attachHandlers(handlersToAttach ?: return)
-    handlersToAttach = null
-    this.attachVirtualChildren(virtualChildrenToAttach ?: return)
-    virtualChildrenToAttach = null
+    attachHandlers(handlersToAttach)
+    attachVirtualChildren(virtualChildrenToAttach)
   }
 
   fun setVirtualChildren(newVirtualChildren: ReadableArray?) {
-    val mappedChildren = newVirtualChildren?.mapVirtualChildren().orEmpty()
-
-    if (moduleId == -1) {
-      // It's possible that handlerTags will be set before module id. In that case, store
-      // the handler ids and attach them after setting module id.
-      virtualChildrenToAttach = mappedChildren
-      return
+    virtualChildrenToAttach = newVirtualChildren?.mapVirtualChildren().orEmpty()
+    if (moduleId != -1) {
+      attachVirtualChildren(virtualChildrenToAttach)
     }
-
-    attachVirtualChildren(mappedChildren)
-  }
-
-  private fun shouldAttachGestureToChildView(tag: Int): Boolean {
-    val registry = RNGestureHandlerModule.registries[moduleId]
-      ?: throw Exception("Tried to access a non-existent registry")
-
-    return registry.getHandler(tag)?.wantsToAttachDirectlyToView() ?: false
   }
 
   // We override this `addView` because it is called inside `addView(child: View?, index: Int)`
@@ -127,49 +84,61 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
     newHandlers: List<Int>,
     viewTag: Int = this.id,
     actionType: Int = GestureHandler.ACTION_TYPE_NATIVE_DETECTOR,
-    attachedHandlers: MutableSet<Int> = this.attachedHandlers,
+    subscribedHandlers: MutableSet<Int> = this.subscribedHandlers,
   ) {
     val registry = RNGestureHandlerModule.registries[moduleId]
       ?: throw Exception("Tried to access a non-existent registry")
 
-    val handlersToDetach = attachedHandlers.toMutableSet()
+    val handlersToDetach = subscribedHandlers.toMutableSet()
 
     for (tag in newHandlers) {
       handlersToDetach.remove(tag)
-      if (!attachedHandlers.contains(tag)) {
-        if (shouldAttachGestureToChildView(tag) && actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR) {
-          // It might happen that `attachHandlers` will be called before children are added into view hierarchy. In that case we cannot
-          // attach `NativeViewGestureHandlers` here and we have to do it in `addView` method.
-          assert(childCount <= 1) {
-            "Cannot attach native gesture handlers when the detector has multiple children"
-          }
-          nativeHandlers.add(tag)
-        } else {
-          registry.attachHandlerToView(tag, viewTag, actionType, this)
-          if (actionType == GestureHandler.ACTION_TYPE_VIRTUAL_DETECTOR) {
-            registry.getHandler(tag)?.hostDetectorView = this
-          }
-          attachedHandlers.add(tag)
+      if (!subscribedHandlers.contains(tag)) {
+        registry.observeHandler(tag, this) { handler ->
+          attachReadyHandler(handler, actionType, viewTag)
         }
+        subscribedHandlers.add(tag)
       }
     }
 
     for (tag in handlersToDetach) {
-      registry.detachHandlerFromHostDetector(tag, this)
+      registry.cancelObservation(tag, this)
+      if (attachedHandlers.contains(tag)) {
+        registry.detachHandlerFromHostDetector(tag, this)
+        attachedHandlers.remove(tag)
+      }
+      subscribedHandlers.remove(tag)
       nativeHandlers.remove(tag)
-      attachedHandlers.remove(tag)
     }
+  }
 
-    val child = getChildAt(0)
+  // Invoked from the registry's `observeHandler` callback once the handler is known to exist.
+  // Branches on handler kind + actionType to pick the right binding flow. May be called multiple
+  // times for the same tag (handler re-registration), so each branch must be idempotent.
+  private fun attachReadyHandler(handler: GestureHandler, actionType: Int, viewTag: Int) {
+    val registry = RNGestureHandlerModule.registries[moduleId]
+      ?: throw Exception("Tried to access a non-existent registry")
 
-    // This covers the case where `NativeViewGestureHandlers` are attached after child views were created.
-    if (child != null) {
-      tryAttachNativeHandlersToChildView(child)
+    if (handler.wantsToAttachDirectlyToView() && actionType == GestureHandler.ACTION_TYPE_NATIVE_DETECTOR) {
+      assert(childCount <= 1) {
+        "Cannot attach native gesture handlers when the detector has multiple children"
+      }
+      nativeHandlers.add(handler.tag)
+      if (childCount != 0) {
+        tryAttachNativeHandlersToChildView(getChildAt(0))
+      }
+      return
     }
+
+    registry.attachHandlerToView(handler.tag, viewTag, actionType, this)
+    if (actionType == GestureHandler.ACTION_TYPE_VIRTUAL_DETECTOR) {
+      handler.hostDetectorView = this
+    }
+    attachedHandlers.add(handler.tag)
   }
 
   private fun attachVirtualChildren(virtualChildrenToAttach: List<VirtualChildren>) {
-    val virtualChildrenToDetach = attachedVirtualHandlers.keys.toMutableSet()
+    val virtualChildrenToDetach = subscribedVirtualHandlers.keys.toMutableSet()
 
     for (child in virtualChildrenToAttach) {
       virtualChildrenToDetach.remove(child.viewTag)
@@ -179,22 +148,26 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
       ?: throw Exception("Tried to access a non-existent registry")
 
     for (child in virtualChildrenToDetach) {
-      for (tag in attachedVirtualHandlers[child]!!) {
-        registry.detachHandlerFromHostDetector(tag, this)
+      for (tag in subscribedVirtualHandlers[child]!!) {
+        registry.cancelObservation(tag, this)
+        if (attachedHandlers.contains(tag)) {
+          registry.detachHandlerFromHostDetector(tag, this)
+          attachedHandlers.remove(tag)
+        }
       }
-      attachedVirtualHandlers.remove(tag)
+      subscribedVirtualHandlers.remove(child)
     }
 
     for (child in virtualChildrenToAttach) {
-      if (!attachedVirtualHandlers.containsKey(child.viewTag)) {
-        attachedVirtualHandlers[child.viewTag] = mutableSetOf()
+      if (!subscribedVirtualHandlers.containsKey(child.viewTag)) {
+        subscribedVirtualHandlers[child.viewTag] = mutableSetOf()
       }
 
       attachHandlers(
         child.handlerTags,
         child.viewTag,
         GestureHandler.ACTION_TYPE_VIRTUAL_DETECTOR,
-        attachedVirtualHandlers[child.viewTag]!!,
+        subscribedVirtualHandlers[child.viewTag]!!,
       )
     }
   }
@@ -225,8 +198,13 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
     }
 
     for (tag in nativeHandlers) {
+      // Defensive: a tag may be in `nativeHandlers` from an earlier ready callback but the
+      // underlying handler may have been dropped since. Skip; a re-registration will fire the
+      // observation again.
+      if (registry.getHandler(tag) == null) {
+        continue
+      }
       registry.attachHandlerToView(tag, id, GestureHandler.ACTION_TYPE_NATIVE_DETECTOR, this)
-
       attachedHandlers.add(tag)
     }
   }
@@ -236,6 +214,9 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
       ?: throw Exception("Tried to access a non-existent registry")
 
     for (tag in nativeHandlers) {
+      if (!attachedHandlers.contains(tag)) {
+        continue
+      }
       registry.detachHandlerFromHostDetector(tag, this)
       attachedHandlers.remove(tag)
     }
@@ -247,20 +228,16 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
   }
 
   fun detachAllHandlers() {
-    val registry = RNGestureHandlerModule.registries[moduleId]
-      ?: throw Exception("Tried to access a non-existent registry")
-
-    for (tag in attachedHandlers.toMutableSet()) {
-      registry.detachHandlerFromHostDetector(tag, this)
-      attachedHandlers.remove(tag)
-    }
-
-    for (child in attachedVirtualHandlers) {
-      for (tag in child.value) {
+    RNGestureHandlerModule.registries[moduleId]?.let { registry ->
+      registry.cancelAllObservationsForOwner(this)
+      for (tag in attachedHandlers) {
         registry.detachHandlerFromHostDetector(tag, this)
       }
-      child.value.clear()
     }
+    attachedHandlers.clear()
+    subscribedVirtualHandlers.clear()
+    subscribedHandlers.clear()
+    nativeHandlers.clear()
   }
 
   fun recordHandlerIfNotPresent(handler: GestureHandler) {