fix(web): After swiping closed, the Swipeable component cannot be swiped open again #2802

yatessss · 2024-03-12T11:02:10Z

Description

After swiping closed, the component did not reset this.currentState to State.UNDETERMINED internally, which prevents the execution of the swipe open method.

Test plan

…ped open again After swiping closed, the component did not reset `this.currentState` to `State.UNDETERMINED` internally, which prevents the execution of the swipe open method.

m-bert · 2024-03-13T08:47:11Z

Hi @yatessss! Thanks for submitting this PR 😄 Before we merge it, could you please provide a reproduction? I have not noticed those problems with swipeables.

yatessss · 2024-03-13T11:57:46Z

Hi @yatessss! Thanks for submitting this PR 😄 Before we merge it, could you please provide a reproduction? I have not noticed those problems with swipeables.

Hello, I have conducted extensive testing and found that the issue may lie with react-native-web. Registering DOM nodes using React works fine, but registering DOM nodes through react-native-web causes problems (e.g., swiping left to open becomes ineffective once). By commenting out the two sections of code separately in the main.tsx file, the issue can be reproduced.

https://stackblitz.com/edit/vitejs-react-native-gesture-handler-k8wghi-sgju9p?file=src%2Fmain.tsx

I'm not sure what issues occurred with react-native-web, but with the modifications made in this pull request, the example can now run properly.

m-bert · 2024-03-13T14:53:13Z

Maybe I've missed something, but your example seems to work:

Nagranie.z.ekranu.2024-03-13.o.15.50.50.mov

yatessss · 2024-03-14T01:56:57Z

Maybe I've missed something, but your example seems to work:

Nagranie.z.ekranu.2024-03-13.o.15.50.50.mov

If you swipe from right to left to open and swipe from left to right to close, you will encounter the issue.😂😂

m-bert · 2024-03-14T11:12:05Z

Okay, now I see what you're talking about. I think it can be done in a different way since resetProgress method is used, as it's name suggests, to reset handler progress (for example set scale in Pinch to 1).

I don't want to close your PR since you're the one who found this problem and it would be great if you could fix it 😄 What I suggest is changing

    if (!this.enabled && this.isFinished()) {
      this.currentState = State.UNDETERMINED;
    }

to

    if (this.isFinished()) {
      this.currentState = State.UNDETERMINED;
    }

in moveToState method inside GestureHandler.ts file.

You can check if it solves your problem and if it does we will merge it 😄

yatessss · 2024-03-15T02:14:18Z

ok, thanks for your suggestion. i will make the changes to this PR and commit changes after confirming that it runs smoothly.

…t be swiped open again" This reverts commit 100f2b1.

…ped open again

yatessss · 2024-03-15T05:09:50Z

Although the issue has been resolved, I would still like to understand the specific reasons behind it. Why does registering with react-native-web cause this problem?

m-bert

Thanks for fixing that ❤️

m-bert · 2024-03-15T09:19:07Z

@yatessss Sadly, right now I can't answer this question 😞 If I find some time to investigate it, I will try to dive deeper into this problem.

## Description While working on #2759 I've decided that it will be good idea to also introduce some changes into web version of `orchestrator`. While this PR is mostly a refactor, it also brings other changes, for example it adds `awaitingHandlersTags` `set` which is used on android (current implementation was unsafe). Unfortunately change made in `GestureHandler.ts` reverts #2802, but it is necessary for orchestration process to work. We will find better way to solve this problem in follow-up PR. ## Test plan <details> <summary> Tested on the following code: </summary> ```jsx import React from 'react'; import { StyleSheet, View } from 'react-native'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; import Animated from 'react-native-reanimated'; const log = (e: any, handler: string) => console.log(`[${e.handlerTag}][${handler}]: ${e.state}`); const orangeTapGesture = Gesture.Tap() .runOnJS(true) .maxDeltaX(5) .onBegin((e) => log(e, 'Orange tap')) .onStart((e) => log(e, 'Orange tap')) .onFinalize((e, success) => { log(e, 'Orange tap'); if (success) { console.log('---> Orange Tap <---'); } }); const orangeDoubleTapGesture = Gesture.Tap() .numberOfTaps(2) .runOnJS(true) .onBegin((e) => log(e, 'Orange Double Tap')) .onStart((e) => log(e, 'Orange Double Tap')) .onFinalize((e, success) => { log(e, 'Orange Double Tap'); if (success) { console.log('---> Orange Double Tap <---'); } }); const blueTapGesture = Gesture.Tap() .runOnJS(true) .requireExternalGestureToFail(orangeTapGesture, orangeDoubleTapGesture) .onBegin((e) => log(e, 'Blue Tap')) .onStart((e) => log(e, 'Blue Tap')) .onFinalize((e, success) => { log(e, 'Blue Tap'); if (success) { console.log('---> Blue Tap <---'); } }); const blueDoubleTapGesture = Gesture.Tap() .numberOfTaps(2) .runOnJS(true) .onBegin((e) => log(e, 'Blue Double Tap')) .onStart((e) => log(e, 'Blue Double Tap')) .onFinalize((e, success) => { log(e, 'Blue Double Tap'); if (success) { console.log('---> Blue Double Tap <---'); } }); const redLongPressGesture = Gesture.LongPress() .runOnJS(true) .onBegin((e) => log(e, 'Red Longpress')) .onStart((e) => log(e, 'Red Longpress')) .onFinalize((e, success) => { log(e, 'Red Longpress'); if (success) { console.log('---> Red Longpress <---'); } }); const redDoubleTapGesture = Gesture.Tap() .numberOfTaps(2) .runOnJS(true) .onBegin((e) => log(e, 'Red Double Tap')) .onStart((e) => log(e, 'Red Double Tap')) .onFinalize((e, success) => { log(e, 'Red Double Tap'); if (success) { console.log('---> Red Double Tap <---'); } }); const Showcase = () => { const gesture = Gesture.Race(redDoubleTapGesture, redLongPressGesture); return ( <View style={[styles.center, { flex: 1, backgroundColor: 'white' }]}> <GestureDetector gesture={gesture}> <Animated.View style={[styles.outer, styles.center]}> <Blue /> </Animated.View> </GestureDetector> </View> ); }; export default Showcase; const Blue = () => { const composedGesture = Gesture.Exclusive( blueDoubleTapGesture, blueTapGesture ); return ( <GestureDetector gesture={composedGesture}> <Animated.View style={[styles.blue, styles.center]}> <Orange /> </Animated.View> </GestureDetector> ); }; const Orange = () => { const composedGesture = Gesture.Exclusive( orangeDoubleTapGesture, orangeTapGesture ); return ( <GestureDetector gesture={composedGesture}> <Animated.View style={styles.orange} /> </GestureDetector> ); }; const styles = StyleSheet.create({ center: { display: 'flex', justifyContent: 'space-around', alignItems: 'center', }, outer: { backgroundColor: 'red', width: 400, height: 400, borderRadius: 200, }, blue: { width: 250, height: 250, backgroundColor: 'blue', borderRadius: 175, }, orange: { width: 100, height: 100, backgroundColor: 'orange', borderRadius: 50, }, }); ``` </details>

## Description #2819 removed changes made in #2802. After further investigation we found out that `removeHandlerFromOrchestrator` didn't check if handlers were present in orchestrator, therefore in some situation calling this function ended up in removing wrong handler. Calling `indexOf` returned `-1` and, as you can read in [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice): > Negative index counts back from the end of the array So instead of ignoring that, we simply removed wrong handler. ## Test plan Tested on example app (mostly on swipeable example) and example code from #2819

fix(web): After swiping closed, the Swipeable component cannot be swi…

100f2b1

…ped open again After swiping closed, the component did not reset `this.currentState` to `State.UNDETERMINED` internally, which prevents the execution of the swipe open method.

yatessss added 2 commits March 15, 2024 10:54

Revert "fix(web): After swiping closed, the Swipeable component canno…

c8a9af3

…t be swiped open again" This reverts commit 100f2b1.

fix(web): After swiping closed, the Swipeable component cannot be swi…

73dd5c4

…ped open again

Merge branch 'main' into yatessss-patch-1

f3725da

m-bert approved these changes Mar 15, 2024

View reviewed changes

m-bert merged commit 08c921a into software-mansion:main Mar 15, 2024

m-bert mentioned this pull request Mar 21, 2024

Web Orchestrator refactor. #2819

Merged

m-bert mentioned this pull request Mar 26, 2024

Add check when removing handlers from orchestrator #2831

Merged

This was referenced May 21, 2024

[Snyk] Upgrade react-native-gesture-handler from 2.1.3 to 2.16.1 ColeCoffman/JBApp#88

Open

[Snyk] Upgrade react-native-gesture-handler from 2.1.3 to 2.16.1 ColeCoffman/JBApp#93

Open

Abellache-Rabah mentioned this pull request May 25, 2024

[Snyk] Upgrade react-native-gesture-handler from 2.9.0 to 2.16.1 Abellache-Rabah/frontend-hawasli#39

Open

ColeCoffman mentioned this pull request Jun 6, 2024

[Snyk] Upgrade react-native-gesture-handler from 2.1.3 to 2.16.2 ColeCoffman/JBApp#98

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(web): After swiping closed, the Swipeable component cannot be swiped open again #2802

fix(web): After swiping closed, the Swipeable component cannot be swiped open again #2802

Uh oh!

yatessss commented Mar 12, 2024

Uh oh!

m-bert commented Mar 13, 2024 •

edited

Loading

Uh oh!

yatessss commented Mar 13, 2024 •

edited

Loading

Uh oh!

m-bert commented Mar 13, 2024

Uh oh!

yatessss commented Mar 14, 2024 •

edited

Loading

Uh oh!

m-bert commented Mar 14, 2024 •

edited

Loading

Uh oh!

yatessss commented Mar 15, 2024

Uh oh!

yatessss commented Mar 15, 2024

Uh oh!

m-bert left a comment

Uh oh!

m-bert commented Mar 15, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

fix(web): After swiping closed, the Swipeable component cannot be swiped open again #2802

fix(web): After swiping closed, the Swipeable component cannot be swiped open again #2802

Uh oh!

Conversation

yatessss commented Mar 12, 2024

Description

Test plan

Uh oh!

m-bert commented Mar 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yatessss commented Mar 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

m-bert commented Mar 13, 2024

Uh oh!

yatessss commented Mar 14, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

m-bert commented Mar 14, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yatessss commented Mar 15, 2024

Uh oh!

yatessss commented Mar 15, 2024

Uh oh!

m-bert left a comment

Choose a reason for hiding this comment

Uh oh!

m-bert commented Mar 15, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

m-bert commented Mar 13, 2024 •

edited

Loading

yatessss commented Mar 13, 2024 •

edited

Loading

yatessss commented Mar 14, 2024 •

edited

Loading

m-bert commented Mar 14, 2024 •

edited

Loading