stopPropagation ReanimatedSwipeable

[mlcpro]

Description

I have a swipeable element that contains a Pressable :

  <ReanimatedSwipeable
            friction={1}
            enableTrackpadTwoFingerGesture
            overshootRight={false}
            renderRightActions={(prog, drag) => ...}>
            <Pressable
              onPress={() => ...}
            >
            {...}
           </Pressable>
</ReanimatedSwipeable>

When you swipe from right to left and the user releases the click, it triggers the onPress event contained below. I didn't have this problem in the version 2.21.2, I am now in 2.25.0.

Do you have any ideas? I'm out of solutions.

Steps to reproduce

1. Download the latest version
2. In a FlatList, configure the renderItem with a Swipeable for each item and have a Pressable inside

Snack or a link to a repository

NA

Gesture Handler version

2.25.0

React Native version

0.79.0

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[Unuuuuu]

I have the same issue as well

[michel-lamarliere]

Did you manage to find a fix?

[latekvo]

Can you let me know if this issue is resolved in 2.27.1? We've refactored the Pressable in 2.27.1, and this issue seems to be fixed now.

Test on both iOS and Android with the following example:

import React from 'react';
import { Pressable, StyleSheet } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';

export default function EmptyExample() {
  return (
    <GestureHandlerRootView style={styles.container}>
      <ReanimatedSwipeable
        friction={1}
        enableTrackpadTwoFingerGesture
        overshootRight={false}
        containerStyle={styles.swipeable}
        renderRightActions={() => (
          <Pressable
            onPress={() => console.log('RightPress')}
            style={styles.box}
          />
        )}>
        <Pressable onPress={() => console.log('Press')} style={styles.box} />
      </ReanimatedSwipeable>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 10,
  },
  swipeable: {
    width: 300,
    height: 150,
    backgroundColor: '#222',
  },
  box: {
    width: 150,
    height: 150,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[rodperottoni]

@latekvo I'm still experiencing touchable issues even after updating to 2.27.1.

In my case, I have the following structure:

<Swipeable>
  <RectButton onPress={() => console.log('123')}>

  </RectButton>
</Swipeable

This would previously work with the Animated Swipeable. After migrating to ReanimatedSwipeable, the onPress only triggers if I long press on the component. I can fix the issue by using Pressables instead, but that's a bummer since RectButton & BorderlessButton are widely used in my application.

[rodperottoni]

Here's a video of the issue:

https://github.com/user-attachments/assets/597e547c-a68c-429b-aa99-0e3e397ff0c6

[dFelinger]

Can you let me know if this issue is resolved in 2.27.1? We've refactored the Pressable in 2.27.1, and this issue seems to be fixed now.

Test on both iOS and Android with the following example:

Same issue on IOS with this example on release pointer on element.

https://github.com/user-attachments/assets/427f3b37-ae7c-49f6-9451-37f0e66855d7

But if I add old Swipeable there is no issue :)

import React from 'react';
import { Pressable, StyleSheet } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
import Swipeable from 'react-native-gesture-handler/Swipeable';

export default function Test() {
  return (
    <GestureHandlerRootView style={styles.container}>
      <ReanimatedSwipeable
        friction={1}
        enableTrackpadTwoFingerGesture
        overshootRight={false}
        containerStyle={styles.swipeable}
        renderRightActions={() => (
          <Pressable
            onPress={() => console.log('RightPress')}
            style={styles.box}
          />
        )}>
        <Pressable onPress={() => console.log('Press')} style={styles.box} />
      </ReanimatedSwipeable>
      <Swipeable /> {/* just add empty component to prevent onPress on Pressable on swipe open in ReanimatedSwipeable */}
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 10,
  },
  swipeable: {
    width: 300,
    height: 150,
    backgroundColor: '#222',
  },
  box: {
    width: 150,
    height: 150,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[maxencehenneron]

I have this issue as well.

https://github.com/software-mansion/react-native-gesture-handler/blob/18be3b30617161f5d11d21a3b7e711571cb1fc39/packages/react-native-gesture-handler/src/components/ReanimatedSwipeable/ReanimatedSwipeable.tsx#L570

Commenting out this line resolves the issue which leads me to think the tap gestureRecognizer used to close the Swipeable clashes with the Pressable gesture recognizer. I'm not sure how to fix this properly? Adding a state "isOpen" and dynamically enable the gesture based on this state?

So far my solution is to just use "Pressable" from react-native.