Swipeable renderLeftActions button not firing

[erie-e9]

Description

Trying with simple example, I faced next issue, I can't trigger onPress action on renderLeftActions, only renderRightActions works fine. Even if I momentarily swap the body of both, the problem persists.
This is working fine in v2.20.2, but something crashes in 2.21.0 and 2.21.1.

Video.

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-11-18.at.13.35.23.mp4

Steps to reproduce

1. Implement Swipeable inside a GestureHandlerRootView, with two levels of TouchableOpacity children.
2. Swipe on the Swipeable. Both right and left TouchableOpacity can be displayed.
3. Once the button is displayed, try to trigger onPress action.
4. Only right onPress action works, left one seems to be blocked or under-indexed, onPress action doesn't work.

Snack or a link to a repository

https://snack.expo.io/

Gesture Handler version

2.21.0 and 2.21.1

React Native version

0.76.2

Platforms

iOS

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 16 Pro simulator

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[erie-e9]

import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';

export default function Example() {
  return (
    <View style={{ flex: 1, marginTop: 200, backgroundColor: 'red' }}>
      <Swipeable
        onSwipeableWillClose={(dir) => {
          console.log('will close', dir);
        }}
        onSwipeableWillOpen={(dir) => {
          console.log('will open', dir);
        }}
        onSwipeableOpen={(dir) => {
          console.log('open', dir);
        }}
        onSwipeableClose={(dir) => {
          console.log('close', dir);
        }}
        leftThreshold={50}
        rightThreshold={50}
        renderLeftActions={() => {
          return (
            <TouchableOpacity
              onPress={() => {
                console.log('press outer');
              }}
            >
              <View style={{ height: 80, width: 80, backgroundColor: 'yellow' }}>
                <Text>Left</Text>
              </View>
            </TouchableOpacity>
          );
        }}
        renderRightActions={() => {
          return (
            <TouchableOpacity
              onPress={() => {
                console.log('press outer');
              }}
            >
              <View style={{ height: 80, width: 80, backgroundColor: 'magenta' }}>
                <Text>Right</Text>
              </View>
            </TouchableOpacity>
          );
        }}
      >
        <TouchableOpacity
          onPress={() => {
            console.log('press outer');
          }}
        >
          <View
            style={{
              width: '100%',
              height: 80,
              backgroundColor: 'blue',
            }}
          >
            <TouchableOpacity
              onPress={() => {
                console.log('press inner');
              }}
              style={{ width: 80, height: 80, alignSelf: 'center' }}
            >
              <View style={{ width: 80, height: 80, backgroundColor: 'white' }} />
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </Swipeable>
    </View>
  );
}

[latekvo]

Hi, could you clarify the repro you used to test this issue?
The sample you provided doesn't have interactive elements in the side action panels, so I added my own.
I can confirm the bug exists, but you also mentioned it "worked fine in 2.20.2." I couldn't find any interactive elements that worked better in version 2.20.2 than in 2.21.1. Can you let me know which interactive elements you used for testing in that version?
This information would be very helpful for resolving the issue.

[erie-e9]

@latekvo thanks for your comment, I figured out I pasted the wrong code version, but I already updated it. I used RN's TouchOpacity, also tested it with import { TouchableOpacity } from 'react-native-gesture-handler' same error with both of them.