Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WEB/NATIVE inconsistent behaviour of pan gesture callbacks with manual activation. #2907

Closed
pedrogarciyalopez opened this issue May 13, 2024 · 1 comment · Fixed by #2923
Closed
Labels
Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS Platform: Web Repro provided A reproduction with a snack or repo is provided

Comments

@pedrogarciyalopez
Copy link

Description

In the onTouchesDown callback, stateManager.fail() is called. It works as expected in native, but in the web, callbacks onTouchesMove, onTouchesUp etc continue to trigger, which should not happen.

Run the code below, swipe your finger across the screen, and watch the console.

import { View } from 'react-native';
import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  const panGesture = Gesture.Pan()
    .manualActivation(true)
    .onTouchesDown((e, stateManager) => {
      stateManager.fail();
      console.log('onTouchesDown, fail')
    })
    .onTouchesUp(() => console.log('onTouchesUp'))
    .onTouchesMove(() => console.log('onTouchesMove'))
    .onBegin(() => console.log('onBegin'))
    .onChange(() => console.log('onChange'))
    .onTouchesCancelled(() => console.log('onTouchesCancelled'))
    .onFinalize(() => console.log('onFinalize'))
    .onStart(() => console.log('onStart'))
    .onUpdate(() => console.log('onUpdate'))
    .onEnd(() => console.log('onEnd'));
	
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <GestureDetector gesture={panGesture}>
        <View style={{ flex: 1, backgroundColor: 'yellow' }} />
      </GestureDetector>
    </GestureHandlerRootView>
  )
}

In the web, you will see the following output:

onTouchesDown, fail
onBegin
onTouchesMove
onTouchesUp
onFinalize

In the native, you will see the following output:

onBegin
onTouchesCancelled
onFinalize
onTouchesDown, fail

It seems like this is an issue that hasn't been fully resolved #2869.

@m-bert what do you think?

Steps to reproduce

try it on Snack

Snack or a link to a repository

https://snack.expo.dev/DPDgCkZ0hbai5s51p3AcM

Gesture Handler version

2.16.2

React Native version

0.71.9

Platforms

Android, iOS, Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

@github-actions github-actions bot added Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS Platform: Web Repro provided A reproduction with a snack or repo is provided labels May 13, 2024
@m-bert
Copy link
Contributor

m-bert commented May 22, 2024

Hi @pedrogarciyalopez! I've just created this PR, could you please check if it helps?

m-bert added a commit that referenced this issue May 28, 2024
## Description

As stated in #2907, web shows inconsistent behavior with native
platforms when it comes to touch event callbacks. This PR unifies its
behavior with `Android` by calling `sendTouchEvent` after handler goes
to `BEGAN` state. Previously it wouldn't fail, because transition from
`UNDETERMINED` into `FAIL` is not possible on web.

Fixes #2907.

### `onBegin` and `onFinalize`

We agreed with @j-piasecki that `onFinalize` should be called only when
`onBegin` was called. However, in that specific case (i.e. snippet from
issue) we are not sure if those callbacks should be triggered and it is
still a thing for a discussion.

## Test plan

<details>
<summary> Tested on the following code from issue </summary>

```jsx
import { View } from 'react-native';
import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  const panGesture = Gesture.Pan()
    .manualActivation(true)
    .onTouchesDown((e, stateManager) => {
      stateManager.fail();
      console.log('onTouchesDown, fail')
    })
    .onTouchesUp(() => console.log('onTouchesUp'))
    .onTouchesMove(() => console.log('onTouchesMove'))
    .onBegin(() => console.log('onBegin'))
    .onChange(() => console.log('onChange'))
    .onTouchesCancelled(() => console.log('onTouchesCancelled'))
    .onFinalize(() => console.log('onFinalize'))
    .onStart(() => console.log('onStart'))
    .onUpdate(() => console.log('onUpdate'))
    .onEnd(() => console.log('onEnd'));
	
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <GestureDetector gesture={panGesture}>
        <View style={{ flex: 1, backgroundColor: 'yellow' }} />
      </GestureDetector>
    </GestureHandlerRootView>
  )
}
```

</details>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS Platform: Web Repro provided A reproduction with a snack or repo is provided
Projects
None yet
2 participants