React-native-gesture-handler: Any ETA for support of nested touch handlers with native driver?

[jhalborg]

Hey,

Thanks for a great lib, it's got a lot of potential to be the de facto library for gesture handling, especially for Expo projects!

One question. I tried running one of the examples (rotate+pinch) with native driver set to true, but get the following error:

Nesting touch handlers with native animated driver is not supported yet
...

Any ETA on when this is supported? That would make this library near perfect :-) But until then, there's no big difference between just implementing it using the core handlers and using this.

[kmagiera]

Hey @jhalborg thanks for reaching out about this issue.

So in general nesting touch handlers is supported from day 1. I think this warning may be a bit misleading. What is not supported ATM is having nested handlers as direct children. Supporting this will require upstream changes and is not currently on my roadmap.

But you can still nest handlers with native event as long as their direct child is a RN component (e.g. View). So instead of doing:

<PinchHandler ...>
   <RotationHandler ...>
      <Animated.View ... />
   </RotationHandler>
</PinchHandler>

you should do:

<PinchHandler ...>
  <Animated.View ... >
     <RotationHandler ...>
        <Animated.View ... />
     </RotationHandler>
   </Animated.View>
</PinchHandler>

If you're using native driver remember that the child should be an "Animated" component (e.g. Animated.View vs just View)

[jhalborg]

@kmagiera - Thanks for getting back to me :)

I think you misunderstood, I wasn't clear enough. It wasn't nesting of handlers with native events, but nesting of handlers with nativeDriver:true .

I tried running the example "scaleAndRotate" from here, where the handlers are nested like

<PanGestureHandler ...>
   <RotationGestureHandler ...>
      <PinchGestureHandler ... />
          <View>
              <Animated.Image />
          </View>
      </PinchGestureHandler ... />
   </RotationGestureHandler>
</PanGestureHandler>

Then I commented out the import { USE_NATIVE_DRIVER } from '../config'; and instead made a const USE_NATIVE_DRIVER = true;, and I got the error above.

But maybe it was because of the plain non-animated View parent to the Animated.Image? Don't have time to test right now, though, maybe later this week if needed

[kmagiera]

I did understand that correctly and I’m aware of this issue. As mentioned in my previous comment, you could put Animated.View in between each handler and that should do. Also whenever you use native driver it should have an Animated element as a direct child

[jhalborg]

Thanks again.

I'm sorry, it seems I misunderstood, not you ;)

I tested it real quick, and it seems to build without the redbox if I insert an Animated.View between each handler, but it seems to have lost responsiveness on the panhandler for some reason from it. I'll have to investigate more when I find time.

On a sidenote, I realize now when reading it again how arrogant i sounds starting out with "I think you misunderstood", my apologies :-)

[JonnyBurger]

If for some reason you want multiple nested elements but don't want to put 's inbetween them, you can create Animated ghost elements:

class Ghost extends React.Component {
    render() {
        return this.props.children;
    }
}

const AnimatedGhost = Animated.createAnimatedComponent(Ghost);

<PanGestureHandler>
   <AnimatedGhost>
       <TapGestureHandler>

This could be useful if putting elements inbetween complicates your layout.