How to handle multi-touch dual joysticks and buttons simultaneously without blocking other touch events?

[lctuandev]

Hi everyone,

We are developing a high-performance mobile control application that requires a multi-axis interface (specifically, two continuous virtual joysticks operating simultaneously) alongside several discrete control buttons on the same screen.

We are facing a critical multi-touch layout issue where continuous pan gestures either mutually exclusive or completely block other native components on the UI thread. We have tried two architectural approaches, but both result in low-level gesture conflicts:

---

Scenario 1: Single GestureHandlerRootView (Dual pan gestures cannot activate simultaneously)

• Setup: Both controller components (utilizing Gesture.Pan()) are wrapped inside a single, top-level GestureHandlerRootView.
• Problem: Only one controller can be operated at a time. If Finger 1 is dragging Controller A (transitioning its pan gesture to ACTIVE), Finger 2 touching Controller B is completely ignored. The second pan gesture is instantly canceled or blocked.

Scenario 2: Multiple GestureHandlerRootViews (Dual pan gestures work, but lock out all other buttons)

• Setup: To bypass the single-orchestrator bottleneck, we wrapped each controller inside its own isolated GestureHandlerRootView (rendered via a Portal).
• Problem: * We achieved simultaneous multi-touch tracking for both controllers (since they no longer share the same orchestrator).
• However, while a finger is holding or actively moving either controller, all standard React Native buttons (Pressable, TouchableOpacity) outside of these isolated root views completely ignore touch events or suffer from massive propagation delays.

---

Questions

1. What is the architectural best practice for supporting multiple continuous Pan gestures under a single GestureHandlerRootView without relying on tightly-coupled cross-referencing refs for simultaneousHandlers? Is there a way to globally allow specific gesture types to run concurrently?
2. If we maintain the multiple GestureHandlerRootViews approach, is there a native or JavaScript-level workaround to prevent them from calling requestDisallowInterceptTouchEvent or hijacking multi-touch events destined for default React Native components outside their view tree?
3. Are there any established patterns or workarounds in RNGH for hybrid layouts that demand both high-frequency, continuous tracking (drag/pan) and independent, concurrent discrete actions (taps) on touch devices?

Any insights, architectural advice, or native workarounds would be highly appreciated!

Environment:

• react-native-gesture-handler: ^2.29.1
• react-native: 0.83.0
• Platforms: Android & iOS

---

[rafaax]

Hi @lctuandev, I read through the 2.29.1 orchestrator (GestureHandlerOrchestrator.kt) to see why your two pans block each other. I haven’t been able to run your exact layout, so treat the first part as what the source says rather than a confirmed diagnosis.

1. Two pans under one GestureHandlerRootView should work with different fingers, with no cross-refs.
   In the orchestrator, two handlers that share no common pointer can never cancel each other (shouldHandlerBeCancelledBy returns false when !handler.hasCommonPointers(other)). The other cancel path (shouldBeCancelledByActiveHandler) only fires when the handlers share a pointer, one is active, and the other is a descendant of it. So for two sibling joystick views touched by two different fingers, no simultaneousHandlers/simultaneousWithExternalGesture should be needed.

If you still see the second pan being cancelled, the usual causes are:

one joystick view is a child of the other (or both sit inside a parent view that has its own Pan), so the pointer is shared up the tree. In that case wire them with simultaneousWithExternalGesture: const a = Gesture.Pan(); const b = Gesture.Pan().simultaneousWithExternalGesture(a); (and the reverse on a).
a full-screen overlay GestureDetector with a Pan sits above both joysticks and claims the touches;
the pans are unbounded: set .minPointers(1).maxPointers(1) so each joystick tracks only its own finger.

2. For a game-style controller, a single touch tracker is often simpler.
   Instead of N pans, put one Gesture.Manual() on a full-screen layer and track fingers yourself via onTouchesDown/Move/Up, using each touch’s id:

const gesture = Gesture.Manual()
.onTouchesDown((e, manager) => {
manager.activate(); // keep the gesture alive across touches
// e.changedTouches: assign each new touch id to left/right stick or button by x position
})
.onTouchesMove((e) => { /* update the stick owned by each touch id / })
.onTouchesUp((e, manager) => { / release; manager.end() when e.numberOfTouches === 0 */ });

This avoids relying on the orchestrator’s cancel rules, and buttons can be hit-tested in the same handler.

3. Why multiple GestureHandlerRootViews blocked your buttons.
   On Android, RNGestureHandlerRootView overrides requestDisallowInterceptTouchEvent, so an active gesture inside a root view prevents the parent from intercepting. React Native’s Pressable/TouchableOpacity use the JS responder system, which is independent of RNGH, so a root view that is busy can starve them. I’d avoid nested/multiple roots and instead use RNGH’s own Gesture.Tap() (or Pressable from react-native-gesture-handler) for the buttons so they go through the same orchestrator.

If this doesn’t solve it, could you share a minimal Snack/repro showing the view hierarchy of the joysticks and buttons? That’s what determines which of the cases above applies.