React-native-gesture-handler: Use Animated.Value as enabled prop on gesture handler

[terrysahaidak]

There are lots of issues using PanGestureHandler with ScrollView, for example this one. Not sure it's something we can easily fix, but I think it's something we can workaround by using animated values.

Not everyone knows, you can createAnimatedComponent of almost every component and then use Animated.Values (for example with reanimated) to animate some of the props. That's pretty the same as using setNativeProps, but instead of calling it from js, you can pass the animated value to the animated component and change it from the animation definition (in reanimated).

Using this we can workaround it by disabling scroll when gesture handler should handle the touch and disable gesture handler when only scroll should handle the touch.

Not quite sure gesture handler and scroll view both concel its touches before switching it, hope so.

You can see POC using scrollEnabled as Animated Prop for Bottom Sheet component here (seems to be working on iOS only for now):
https://snack.expo.io/@terrysahaidak/reanimated-scroll-enabled

/cc @kmagiera @osdnk

[ianmartorell]

I was trying to achieve the same thing with the enabled prop of PanGestureHandler, but it seems you can't use createAnimatedComponent on a gesture handler? It stopped reacting to events at all for me.

I ended up doing it like this, but it would be nice if it could be done without crossing the native bridge:

const [panGestureHandlerEnabled, setPanGestureHandlerEnabled] = useState(false);

useCode(
  () =>
    onChange(
      dragEnabled,
      call([dragEnabled], ([dragEnabled]) =>
        setPanGestureHandlerEnabled(!!dragEnabled)
      )
    ),
  [dragEnabled, setPanGestureHandlerEnabled]
);

[kulikalov]

@terrysahaidak thanks for your post! This was really helpful. Dear maintainers, your lib is awesome, but the docs are complete trash. Please, take some time to improve it. I had to figure this out bit by bit through all the docs, various tutorials, and this library source code.

[a-eid]

@kulikalov were you able to resolve this ?

[a-eid]

actually wait, wrapping PanGestureHandler inside a Animated.View and playing with pointerEvents might work.

[a-eid]

wasn't able to do what I wanted !!

[a-eid]

@ianmartorell this would trigger a rerender for all it's children.

[a-eid]

this might work

<PanGestureHandler>
  <A.View style={...} pointerEvents={pointerEvents}>
....

pointerEvent could possibly be an animated node and could disable / enable the PanGesureHandler component.
A.Node<"none" | "auto" | "box-none" | "box-only"

this might not be enough but it's what I was looking for in this case.

[ShaMan123]

1034

[terrysahaidak]

1034

I don't think it's related.