Gesture.Tap() behaving weirdly, one finger needs to be on screen to receive onStart and onEnd events

[ashkalor]

Description

Hey RNGH developers,

I have been using react native gesture handler for quite sometime now and it's doing an amazing job, However recently I have been experimenting with React three Fiber in an expo react native project.

For the tap gesture, only the onBegin callback is triggered, and no matter how many times I tap, I only receive onBegin events. After further experimentation, I realized that for the onStart and onEnd callbacks to be fired, one finger needs to be placed on the screen before performing the normal tap motion. This triggers the onStart and onEnd callbacks.

Below is my code snippet and a snack link for experimentation.

const tap = Gesture.Tap()
    .onBegin(() => {
      console.log("Begin");
    })
    .onStart((event) => {
      console.log("start");
    })
    .onEnd((event) => {
      console.log("end");
    });
  return (
    <GestureDetector gesture={tap}>
      <View style={{ flex: 1 }}>
        <Canvas
          style={{
            flex: 1,
          }}
        >
          <ambientLight intensity={0.1} />
          <directionalLight color="red" position={[0, 0, 5]} />
          <mesh
            onClick={() => {
              console.log("mesh click");
            }}
          >
            <boxGeometry />
            <meshStandardMaterial />
          </mesh>
        </Canvas>
      </View>
    </GestureDetector>
  );

Hoping to really get this solved, I believe providing support for React Native Gesture Handler with react three fiber will really help in the upcoming days as support for react-native-wgpu is announced and three js already has running examples for using WebGPU and also since its the only library that has both internal and external interaction system in 3D space for react native.

[!WARNING]
Trying to run the latest versions of react three fiber will throw this particular error raised in issue . I would recommend using a real device so that you can dismiss these errors on the error popup screen.

Steps to reproduce

1. Install Expo React native project with React Three Fiber and React native gesture Handler
2. Copy the above code and place it on index file after wrapping your layout with GestureHandlerRootView
3. Test tapping the screen to get onBegin callbacks
4. Place one finger and try tapping again to get onStart and onEnd callbacks (which is not the expected behaviour )

Snack or a link to a repository

https://snack.expo.dev/@ashkalor/authentic-blue-salsa

Gesture Handler version

2.18.1

React Native version

0.74.5

Platforms

Android, iOS

JavaScript runtime

None

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

Samsung Galaxy Tab A9

Acknowledgements

Yes

[ashkalor]

Hey guys, Any update on this? Really stuck here. Don't know where to even start debugging from.

[NikitaDudin]

Try to replace first child of GestureDetector with Animated.View from react-native-reanimated library. it should be REAnimated node. https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture-detector/#reference

[leaf541]

I'm facing the same issue, any possible fixes? I already have first child as Reanimated Animated.View.

[TweetyBoop1990]

Has anyone figured out a fix for this? I have pretty much this issue. Everything was working fine while on RN 0.73.6 and then I upgraded to 0.76.2 and now my gestures require a finger to be on the screen for anything to activate (on ANDROID only). What could be causing this?!?