React-native-gesture-handler: How to lock the PanGesture handler into a single direction at a time?

[wcandillon]

I would like my view to move in the X or Y axis but never at the same time.
I have two nested PanGestureHandler (maybe it's possible to use a single one as well, I'm not sure):

     <PanGestureHandler
        onHandlerStateChange={onGestureEventY}
        onGestureEvent={onGestureEventY}
      >
        <Animated.View style={{ flex: 1 }}>
          <PanGestureHandler
            onHandlerStateChange={onGestureEventX}
            onGestureEvent={onGestureEventX}
          >
              // ....
          </PanGestureHandler>
        </Animated.View>
      </PanGestureHandler>
    );

I would like to active one when moving through X so the Y moving is ignored and vice versa.
I looked this part of the documentation: https://kmagiera.github.io/react-native-gesture-handler/docs/interactions.html but it doesn't seem to support this use case.

How could this recipe be achieved?

[wcandillon]

After reading the documentation more careful, I found the solution to my problem. All <PanGestureHandlers> must wrap a <Animated.View>. Then I can use wait for and set the right conditions for one of the pan handler to fail to recognize a gesture. See example below.

     <PanGestureHandler
        onHandlerStateChange={onGestureEventX}
        onGestureEvent={onGestureEventX}
        ref={this.horizontalHandler}
        minDist={10}
        failOffsetY={[-10, 10]}
      >
        <Animated.View style={{ flex: 1 }}>
          <PanGestureHandler
            waitFor={this.horizontalHandler}
            onHandlerStateChange={onGestureEventY}
            onGestureEvent={onGestureEventY}
          >
            <Animated.View style={{ flex: 1 }}>
         //...
            </Animated.View>
          </PanGestureHandler>
        </Animated.View>
      </PanGestureHandler>

[zachgibson]

@wcandillon do you have a snack of this by chance?

[wcandillon]

I have this version I think that works well: https://github.com/wcandillon/can-it-be-done-in-react-native/blob/f605d034d414a70884eff95414072030f5598410/flutter-animations/components/Sections.js

[sanu23kumar]

Okay so the approach with having multiple pan responders didn't work for me. It was too buggy. This is what I did instead. I took a variable translateDirection, initialised it with no direction -1. And when the state was active, calculated which direction should the view move in with a simple translation.y and translation.x comparison. Then when the direction was set, I only change the translateX or translateY depending on the direction:
`cond(eq(state, State.ACTIVE), [

    cond(
      eq(translateDirection, -1),
      cond(
        greaterThan(translation.y, translation.x),
        set(translateDirection, 2),
        set(translateDirection, 1)
      )
    ),
    cond(
      neq(translateDirection, -1),
      cond(
        eq(translateDirection, 1),
        set(translateX, add(offsetX, translation.x)),
        set(translateY, translation.y)
      )
    ),
  ]),`