[Pressable] Nested Pressables don't behave as the ones from RN

[m-bert]

Description

When you nest Pressables the inner one should activate. Right now you can see logs form both - inner and outer one.

Nagranie.z.ekranu.2024-07-4.o.10.20.02.mov

Steps to reproduce

Use the following code to test this issue:

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { Pressable as GHPressable } from 'react-native-gesture-handler';
import { Pressable as RNPRessable } from 'react-native';

const onPressCallback = (type: string) =>
  console.log(`${type} pressable onPress`);

const onPressInCallback = (type: string) =>
  console.log(`${type} pressable onPressIn`);

const onPressOutCallback = (type: string) =>
  console.log(`${type} pressable onPressOut`);

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.innerContainer}>
        <Text style={styles.text}> Gesture Handler Pressable </Text>
        <GHPressable
          onPress={() => onPressCallback('outer')}
          onPressIn={() => onPressInCallback('outer')}
          onPressOut={() => onPressOutCallback('outer')}
          style={styles.outerPressable}>
          <GHPressable
            onPress={() => onPressCallback('inner')}
            onPressIn={() => onPressInCallback('inner')}
            onPressOut={() => onPressOutCallback('inner')}
            style={styles.innerPressable}
          />
        </GHPressable>
      </View>

      <View style={styles.innerContainer}>
        <Text style={styles.text}> React Native Pressable </Text>

        <RNPRessable
          onPress={() => onPressCallback('outer')}
          onPressIn={() => onPressInCallback('outer')}
          onPressOut={() => onPressOutCallback('outer')}
          style={styles.outerPressable}>
          <RNPRessable
            onPress={() => onPressCallback('inner')}
            onPressIn={() => onPressInCallback('inner')}
            onPressOut={() => onPressOutCallback('inner')}
            style={styles.innerPressable}
          />
        </RNPRessable>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  innerContainer: {
    display: 'flex',
    justifyContent: 'space-around',
    alignItems: 'center',
  },

  outerPressable: {
    width: 150,
    height: 150,
    backgroundColor: 'lightpink',

    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },

  innerPressable: {
    width: 100,
    height: 100,
    backgroundColor: 'plum',
  },

  text: {
    fontSize: 16,
    margin: 20,
  },
});

Snack or a link to a repository

Irrelevant

Gesture Handler version

2.17.1

React Native version

0.74.1

Platforms

Android, iOS, Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes