Match mobile-web :hover behavior on touch

Touch :hover now follows mobile Chromium: a tap makes the touched view
sticky-hovered, while scrolling or dragging the finger over it no longer
clears it. Hover clears only on a tap elsewhere or on blank space, or when
the finger is released off the originally touched view. Only the first
finger drives :hover; extra fingers are ignored until it lifts, so hover is
no longer indeterministic under multi-touch.

Verified on iOS and Android against mobile Chrome.

Author: MatiPl01

packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/pseudoSelectors/PseudoSelectorManager.kt

@@ -2,6 +2,7 @@ package com.swmansion.reanimated.pseudoSelectors
 
 import android.view.MotionEvent
 import android.view.View
+import android.view.ViewGroup
 import android.view.ViewParent
 import com.facebook.react.bridge.UIManager
 import com.facebook.react.bridge.UIManagerListener
@@ -198,6 +199,10 @@ class PseudoSelectorManager(
             return
         }
         view.setOnTouchListener { _, event ->
+            // Feed the hover model from the touched view so it works inside a Modal/Dialog (a
+            // separate window the window observer is blind to); the guards keep it idempotent when
+            // the window observer already drove the same Activity-window gesture.
+            hover.onTouchEvent(event, view.rootView as? ViewGroup)
             when (event.actionMasked) {
                 MotionEvent.ACTION_DOWN -> {
                     fireActiveCallbacksUpTree(view, true)
@@ -206,7 +211,6 @@ class PseudoSelectorManager(
                             it.onSelectorStateChanged(true)
                         }
                     }
-                    hover.recompute(view, event.rawX, event.rawY)
                 }
                 MotionEvent.ACTION_UP -> {
                     fireActiveCallbacksUpTree(view, false)
@@ -215,7 +219,6 @@ class PseudoSelectorManager(
                 MotionEvent.ACTION_CANCEL -> {
                     fireActiveCallbacksUpTree(view, false)
                     deepestCallbacks[view]?.onSelectorStateChanged(false)
-                    hover.clearAll()
                 }
             }
             false

packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/pseudoSelectors/TouchHoverCoordinator.kt

@@ -14,14 +14,22 @@ import com.swmansion.reanimated.nativeProxy.PseudoSelectorCallback
 import java.lang.ref.WeakReference
 
 /**
- * Drives sticky touch :hover (Chromium model): a tapped view stays hovered after the finger lifts,
- * clearing only when a later touch lands elsewhere or a scroll cancels it. The hosting manager feeds
- * it touch-downs (per-view, plus a window observer for blank space). register also wires the pointer
- * (mouse/stylus) hover, which stays non-sticky.
+ * Drives touch `:hover` to match the web (Chromium): a tap makes the touched view sticky-hovered, a
+ * pan/scroll never changes the committed hover (it rolls back on release), and only the first finger
+ * counts - the rest are ignored until it lifts.
+ *
+ * `committed` is the sticky hover a tap leaves behind; `displayed` is what is shown right now. Touch
+ * events arrive from two places that feed the same single-primary-touch state machine: the window
+ * observer (gestures anywhere in the Activity window, which it sees first and so claims) and the
+ * per-view listener (gestures inside a Modal/Dialog, a separate window the observer is blind to).
+ * Both forwarding the same Activity gesture is harmless - the guards keep it idempotent.
+ *
+ * register also wires the pointer (mouse/stylus) hover, which stays live and non-sticky.
  */
 class TouchHoverCoordinator {
     private val hoverCallbacks = LinkedHashMap<View, PseudoSelectorCallback>()
-    private val hoveredViews = LinkedHashSet<View>()
+    private val displayed = LinkedHashSet<View>()
+    private val committed = LinkedHashSet<View>()
     private val tmpLocation = IntArray(2)
     private val tmpCoords = FloatArray(2)
 
@@ -30,28 +38,56 @@ class TouchHoverCoordinator {
     private var originalWindowCallback: WeakReference<Window.Callback>? = null
     private var wrappedWindowCallback: WeakReference<Window.Callback>? = null
 
+    // The first finger of a gesture owns `:hover`; later fingers are ignored until it lifts.
+    private var primaryActive = false
+    private var primaryDownTime = 0L
+    private var primaryPointerId = -1
+    private var downRawX = 0f
+    private var downRawY = 0f
+    private var panned = false
+    private var downOnBlank = false
+    private var rolledBackForScroll = false
+    private var touchSlop = 0
+
     fun register(
         view: View,
         callback: PseudoSelectorCallback,
     ) {
         view.setOnHoverListener { _, event ->
+            // Real pointer (mouse/stylus) hover: live, non-sticky - keep committed in sync with it.
+            // Ignored while a finger gesture owns the state, so a stray hover event can't corrupt the
+            // in-flight gesture's rollback target.
             when (event.actionMasked) {
                 MotionEvent.ACTION_HOVER_ENTER,
+                MotionEvent.ACTION_HOVER_MOVE,
                 MotionEvent.ACTION_HOVER_EXIT,
-                -> recompute(view, event.rawX, event.rawY)
+                ->
+                    if (!primaryActive) {
+                        displayHitPath(view.rootView as? ViewGroup, event.rawX, event.rawY)
+                        committed.clear()
+                        committed.addAll(displayed)
+                    }
             }
             false
         }
         hoverCallbacks[view] = callback
+        if (touchSlop == 0) {
+            touchSlop = ViewConfiguration.get(view.context).scaledTouchSlop
+        }
         ensureWindowObserver(view)
     }
 
     fun unregister(view: View) {
         view.setOnHoverListener(null)
         val callback = hoverCallbacks.remove(view)
-        if (hoveredViews.remove(view)) {
+        committed.remove(view)
+        if (displayed.remove(view)) {
             callback?.onSelectorStateChanged(false)
         }
+        // Drop any in-flight gesture: a view torn down mid-press (e.g. a Modal driving the primary
+        // touch via its own window) might never deliver the terminal up/cancel, which would otherwise
+        // leave `primaryActive` stuck and silently ignore every later touch. The next touch re-claims.
+        primaryActive = false
         if (hoverCallbacks.isEmpty()) {
             removeWindowObserver()
         }
@@ -60,38 +96,113 @@ class TouchHoverCoordinator {
     fun isRegistered(view: View) = view in hoverCallbacks
 
     /**
-     * Mirrors CSS hit-testing: turns :hover on for the topmost view at the touch and its registered
-     * ancestors, off for the rest. Views that merely overlap the hit branch (which a plain bounds
-     * test would all activate) stay off, because only the hit branch is hovered. Rooted on the
-     * touched view's own window so it works inside a Modal/Dialog (a separate window from the Activity).
+     * Single entry point for the touch model, fed by both the per-view listener (passing the touched
+     * view's root, so Modal/Dialog windows work) and the window observer (passing the decor view).
+     * Only ACTION_DOWN/MOVE/UP/CANCEL of the first finger matter.
      */
-    fun recompute(
-        sourceView: View,
-        screenX: Float,
-        screenY: Float,
+    fun onTouchEvent(
+        event: MotionEvent,
+        root: ViewGroup?,
     ) {
-        reconcile(sourceView.rootView as? ViewGroup, screenX, screenY)
+        when (event.actionMasked) {
+            MotionEvent.ACTION_DOWN -> onPrimaryDown(event, root)
+            MotionEvent.ACTION_MOVE -> onPrimaryMove(event)
+            MotionEvent.ACTION_POINTER_UP ->
+                if (event.getPointerId(event.actionIndex) == primaryPointerId) {
+                    onPrimaryEnd(event)
+                }
+            MotionEvent.ACTION_UP -> onPrimaryEnd(event)
+            MotionEvent.ACTION_CANCEL -> onPrimaryCancel(event)
+        }
     }
 
-    // Blank-space (window observer) path: no source view, so hit-test the observed window's tree.
-    fun recompute(
-        screenX: Float,
-        screenY: Float,
+    private fun onPrimaryDown(
+        event: MotionEvent,
+        root: ViewGroup?,
     ) {
-        reconcile(hoverRootViewGroup(), screenX, screenY)
+        if (primaryActive || hoverCallbacks.isEmpty()) {
+            return
+        }
+        primaryActive = true
+        primaryDownTime = event.downTime
+        primaryPointerId = event.getPointerId(0)
+        downRawX = event.rawX
+        downRawY = event.rawY
+        panned = false
+        rolledBackForScroll = false
+        // Reconcile the live hover to the touched branch: press feedback on it, previous hover
+        // cleared right away (restored on release if this turns into a pan/scroll).
+        displayHitPath(root, event.rawX, event.rawY)
+        // Empty hit-path == the gesture began off every hover view (blank space / a scroll surface).
+        downOnBlank = displayed.isEmpty()
+    }
+
+    private fun onPrimaryMove(event: MotionEvent) {
+        if (!primaryActive || event.downTime != primaryDownTime) {
+            return
+        }
+        // event.rawX/rawY track the first finger (pointer index 0) for the whole gesture.
+        if (movedPastSlop(event)) {
+            // A drag/scroll: keep showing the down branch (so hover stays while the finger is over
+            // the view) but mark it so the release rolls back to the committed hover instead of
+            // committing this branch.
+            panned = true
+        }
+        // A drag that began off every hover view (typically a scroll) can never commit a new branch,
+        // so roll back to the committed hover right away instead of waiting for release. This keeps a
+        // sticky-hovered view visible while scrolling from blank space (matching iOS, where the
+        // enclosing scroll view's drag is detected). A drag that began on a hover view is left alone:
+        // its release decides, and a scroll over it is rolled back by the per-view touch-cancel.
+        if (panned && downOnBlank && !rolledBackForScroll) {
+            rolledBackForScroll = true
+            revertToCommitted()
+        }
+    }
+
+    // ACTION_UP always carries the final position, so deciding tap-vs-pan from the lift point is
+    // robust even when a scrolling child swallows the intervening ACTION_MOVE events at the window.
+    private fun movedPastSlop(event: MotionEvent): Boolean {
+        val dx = event.rawX - downRawX
+        val dy = event.rawY - downRawY
+        return dx * dx + dy * dy > touchSlop.toFloat() * touchSlop
     }
 
-    private fun reconcile(
+    private fun onPrimaryEnd(event: MotionEvent) {
+        if (!primaryActive || event.downTime != primaryDownTime) {
+            return
+        }
+        if (movedPastSlop(event)) {
+            panned = true
+        }
+        primaryActive = false
+        if (panned) {
+            revertToCommitted() // A pan/scroll never changes the sticky hover.
+        } else {
+            commitDisplayed() // A tap makes the touched branch sticky.
+        }
+    }
+
+    private fun onPrimaryCancel(event: MotionEvent) {
+        if (!primaryActive || event.downTime != primaryDownTime) {
+            return
+        }
+        primaryActive = false
+        revertToCommitted()
+    }
+
+    /**
+     * Mirrors CSS hit-testing: turns hover on for the topmost view at the point and its registered
+     * ancestors, off for the rest. Views that merely overlap the hit branch (which a plain bounds
+     * test would all activate) stay off, because only the hit branch is hovered.
+     */
+    private fun displayHitPath(
         root: ViewGroup?,
         screenX: Float,
         screenY: Float,
     ) {
-        if (hoverCallbacks.isEmpty()) {
-            return
-        }
         val hitPath: Set<View> = if (root == null) emptySet() else hitTestPath(root, screenX, screenY)
         for ((view, callback) in hoverCallbacks) {
-            setHovered(view, callback, view in hitPath)
+            setDisplayed(view, callback, view in hitPath)
         }
     }
 
@@ -114,33 +225,38 @@ class TouchHoverCoordinator {
         return views
     }
 
-    private fun hoverRootViewGroup(): ViewGroup? {
-        val window = observedWindow?.get() ?: hoverCallbacks.keys.firstOrNull()?.activityWindow()
-        return window?.decorView as? ViewGroup
-    }
-
     fun clearAll() {
-        if (hoveredViews.isEmpty()) {
-            return
+        for ((view, callback) in hoverCallbacks) {
+            setDisplayed(view, callback, false)
         }
-        for (view in hoveredViews.toList()) {
-            hoverCallbacks[view]?.let { setHovered(view, it, false) }
+        committed.clear()
+    }
+
+    private fun commitDisplayed() {
+        committed.clear()
+        committed.addAll(displayed)
+    }
+
+    private fun revertToCommitted() {
+        for ((view, callback) in hoverCallbacks) {
+            setDisplayed(view, callback, view in committed)
         }
     }
 
-    private fun setHovered(
+    private fun setDisplayed(
         view: View,
         callback: PseudoSelectorCallback,
         hovered: Boolean,
     ) {
-        if ((view in hoveredViews) == hovered) {
+        if ((view in displayed) == hovered) {
             return
         }
-        if (hovered) hoveredViews.add(view) else hoveredViews.remove(view)
+        if (hovered) displayed.add(view) else displayed.remove(view)
         callback.onSelectorStateChanged(hovered)
     }
 
-    // Catches touch-downs on blank space (off any registered view), which per-view listeners miss.
+    // Catches gestures on blank space (off any registered view), which per-view listeners miss, and
+    // drives every Activity-window gesture (it sees them before the per-view listeners).
     private fun ensureWindowObserver(view: View) {
         val window = view.activityWindow() ?: return
         if (observedWindow?.get() === window) {
@@ -149,33 +265,10 @@ class TouchHoverCoordinator {
         // The Activity (and its window) can be replaced; re-bind onto the live one.
         removeWindowObserver()
         val original = window.callback ?: return
-        val slop = ViewConfiguration.get(view.context).scaledTouchSlop.toFloat()
         val wrapper =
             object : Window.Callback by original {
-                private var startX = 0f
-                private var startY = 0f
-                private var slopExceeded = false
-
                 override fun dispatchTouchEvent(event: MotionEvent): Boolean {
-                    when (event.actionMasked) {
-                        MotionEvent.ACTION_DOWN -> {
-                            startX = event.rawX
-                            startY = event.rawY
-                            slopExceeded = false
-                            recompute(event.rawX, event.rawY)
-                        }
-                        // A scroll/drag past slop dismisses sticky :hover, matching iOS.
-                        MotionEvent.ACTION_MOVE ->
-                            if (!slopExceeded) {
-                                val dx = event.rawX - startX
-                                val dy = event.rawY - startY
-                                if (dx * dx + dy * dy > slop * slop) {
-                                    slopExceeded = true
-                                    clearAll()
-                                }
-                            }
-                        MotionEvent.ACTION_CANCEL -> clearAll()
-                    }
+                    onTouchEvent(event, window.decorView as? ViewGroup)
                     return original.dispatchTouchEvent(event)
                 }
             }
@@ -195,6 +288,7 @@ class TouchHoverCoordinator {
         observedWindow = null
         originalWindowCallback = null
         wrappedWindowCallback = null
+        primaryActive = false
         clearAll()
     }
 

packages/react-native-reanimated/apple/reanimated/apple/pseudoSelectors/REATouchHoverCoordinator.h

@@ -5,9 +5,10 @@
 #import <UIKit/UIKit.h>
 #import <functional>
 
-/// Drives sticky touch `:hover` (Chromium model): a tapped view stays `:hover` after the finger
-/// lifts, clearing only when a later touch lands elsewhere or a scroll cancels it. A single passive
-/// key-window touch observer recomputes which registered views contain each touch-down.
+/// Drives touch `:hover` to match mobile Chromium: a tap makes the touched view's hit-path sticky
+/// (`committed`), while a pan/scroll never changes the committed `:hover` (the live `displayed` state
+/// rolls back to it on release, or as soon as scrolling starts). Only the first finger counts; later
+/// fingers are ignored until it lifts. A single passive key-window touch observer feeds this.
 @interface REATouchHoverCoordinator : NSObject
 + (instancetype)sharedCoordinator;
 - (void)registerObserver:(id)owner view:(UIView *)view callback:(std::function<void(bool)>)callback;