[iOS] RectButton does not trigger onPress when nested inside ReanimatedSwippeable

[focux]

Description

When RectButton is nested inside ReanimatedSwippeable, it does not trigger the onPress callback unless you long
press.

Screen.Recording.2024-11-15.at.4.27.39.PM.mov

Steps to reproduce

1. Put a RectButton inside a ReanimatedSwipeable and try to trigger the onPress callback.

Snack or a link to a repository

https://github.com/focux/expo-rect-swipeable-bug

Gesture Handler version

2.21.0

React Native version

0.74.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[LekZ974]

same here :/ any solution?

[dpyeates]

Also seeing this using "react-native-gesture-handler": "^2.21.2"

[latekvo]

Hey, could you please confirm this issue still occurs on the latest Gesture Handler release (2.22.0-rc.0)?
I recall i reproed this issue successfully in the past, but I can't get the issue to occur anymore.
I tested it on the following repro:

Collapsed code

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';

import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';

export default function EmptyExample() {
  return (
    <View style={styles.container}>
      <Swipeable containerStyle={styles.swipeable}>
        <RectButton
          style={styles.button}
          onPress={() => console.log('Pressed: RectButton inside Swipeable')}
          rippleColor={'tomato'}>
          <Text>RectButton inside Swipeable</Text>
        </RectButton>
      </Swipeable>
      <View style={styles.swipeable}>
        <RectButton
          style={styles.button}
          onPress={() => console.log('Pressed: RectButton inside View')}
          rippleColor={'tomato'}>
          <Text>RectButton inside View</Text>
        </RectButton>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    gap: 20,
  },
  button: {
    width: 210,
    height: 50,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
  },
  swipeable: {
    width: 400,
    height: 60,
    backgroundColor: 'orange',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

And onPress was working as expected.

Also, the repro you provided 404s, it's either private or unavailable anymore. If this issue persists, could you please send the minimal reproduction here, or set your repo to public?

[mkuczera]

Hi there, stumbled upon this as well and can provide more context:

• Behaviour is still present in the current version
• Bug can be seen also in the example: https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/new_api/swipeable/index.tsx
• All Touchables and RectButton lead to this bug. Using Pressable fixes the issue
• Visually the onPress is triggered, but the handler is not invoked.
• Pressing longer is invoking the handler

I attached a screen recording

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-02-03.at.14.52.46.mp4

[PierreCapo]

As a workaround, you can use the old swipeable component that doesn't have this problem.

import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';

// replace by

import {Swipeable} from 'react-native-gesture-handler';

[mdevdkumar]

Having same issue, any fixes or workaround?