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.

https://github.com/user-attachments/assets/2933b5a9-ab89-418d-841d-631fe761b760

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[bot]]

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]

Code

import React from 'react';
import { View, TouchableOpacity } 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 <View style={{ height: 80, width: 80, backgroundColor: 'yellow' }} />;
        }}
        renderRightActions={() => {
          return <View style={{ height: 80, width: 80, backgroundColor: 'magenta' }} />;
        }}
      >
        <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>
  );
}