1

I've got the following component that wraps other components and enables swipe navigation using react-use-gestures and react-spring. It works swell.

You call it like so:

<AnimatedSwipeNavigation onSwipeLeft={navigateRight} onSwipeRight={navigateLeft}>
    <SomeOtherComponent>
</AnimatedSwipeNavigation>

However, I'd like to exclude nested components inside of <SomeOtherComponent> from gesture recognition (drag-n-drop elements).

Visually, here's what I'm trying to achieve

Thoughts? I'm not seeing much discussion in their issues about this.

daino3
  • 4,386
  • 37
  • 48
  • Event from inner boxes gets bubbled up and we need to stop their propagation to parent box. See https://github.com/react-spring/react-use-gesture/blob/master/src/recognizers/DragRecognizer.ts#L57 and add appropriate handlers to inner boxes. – Ajit Jul 19 '20 at 04:42
  • How did you address this? – Eli Jul 15 '21 at 18:45

0 Answers0