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

---