How to configure priority (angle) for nested horizontal / vertical scroll?

[gentlee]

Two nested scroll views - vertical inside horizontal.

Requirement: Vertical should be always enabled, but if gesture goes 20 degree to horizontal axe for some distance (e.g. 10 pixels) than we should enable horizontal scroll and disable vertical.

So basically we are trying to configure the angle at which horizontal gesture should have higher priority than vertical.

We tried making pan gesture handler and enable/disable scrollEnabled with reanimated.

• Doesn't work because when you enable disabled scroll, scrollview doesn't track current gesture. So it is enabled only from the next gesture.

Any ideas how to implement that? Thank you!

Similar question: #2978

[tamish-max]

What you want is usually implemented as a direction lock:

1. wait until the finger moves a few pixels,
2. decide whether the gesture is mostly horizontal or mostly vertical,
3. from that point, enable only the matching scroll path.

With RNGH, the first tools to try are activeOffsetX, activeOffsetY, failOffsetX, and failOffsetY.

Example idea:

const horizontal = Gesture.Pan()
  .activeOffsetX([-10, 10])
  .failOffsetY([-20, 20]);

const vertical = Gesture.Pan()
  .activeOffsetY([-10, 10])
  .failOffsetX([-20, 20]);

That is not a perfect “20 degree” API, but it gets you close by encoding the ratio as X/Y thresholds.