software-mansion / software-mansion/react-native-gesture-handler

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

Open
#3,048 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Platform: Android Platform: iOS Repro provided
Dominant language
TypeScript
Stars
6.8k
Forks
1.1k
Avg merge
1d 6h
Merged PRs (30d)
50

Description

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the provided Expo Snack and the index-file example using Gesture.Tap and GestureDetector, reproducing the callbacks on Android and iOS with React Native 0.74.5 and Gesture Handler 2.18.1. Compare a normal tap with the extra-finger sequence; done means onStart and onEnd fire for ordinary taps without requiring another finger to remain on screen.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.