TapGestureHandler wrapping multiple TapGestureHandlers

[ylkhayat]

As the title states, I was implementing a project that basically had a Container component that was to listen for taps and it was wrapping other Controller components that were also to listen for taps. I couldn't think of a better alternative to React Native Gesture Responder System than react-native-gesture-handler and thus I have started using the following hierarchy.

<TapGestureHandler waitFor={[controller1Ref, controller2Ref]}>
  <TapGestureHandler ref={controller1Ref}>
    <Text style={{ backgroundColor: 'blue', padding: 20 }}>
      Controller 1
    </Text>
  </TapGestureHandler>
  <TapGestureHandler ref={controller2Ref}>
    <Text style={{ backgroundColor: 'blue', padding: 20 }}>
      Controller 2
    </Text>
  </TapGestureHandler>
</TapGestureHandler>

However, it never passed the compilation as it always triggered an unreadable error as I was testing this through Snack on Expo.

Any modifications or guidance will be much appreciated.

[jgonet]

Gesture handlers need a component to wrap onto (and should have only one child). Try doing something like this:

<TapGestureHandler waitFor={[controller1Ref, controller2Ref]}>
	<View>
  		<TapGestureHandler ref={controller1Ref}>
		    <Text style={{ backgroundColor: 'blue', padding: 20 }}>
		      Controller 1
    		</Text>
		</TapGestureHandler>
  		<TapGestureHandler ref={controller2Ref}>
	        <Text style={{ backgroundColor: 'blue', padding: 20 }}>
	          Controller 2
	        </Text>
  		</TapGestureHandler>
	</View>
</TapGestureHandler>

(use Animated.View instead if you're using Animated or Reanimated)

[ylkhayat]

Thanks @jakub-gonet! It did work!

I was wondering also if you know why the Wrapper TapGestureHandler is not working on the web platform? I could create a different discussion for this one but I wanted to know if it's something simple that I forgot to do.

[jgonet]

It should work, you can open another one and provide a repro example.