software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
6.13k stars 982 forks source link

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

Closed m-bert closed 4 months ago

m-bert commented 4 months ago

Description

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

https://github.com/software-mansion/react-native-gesture-handler/assets/63123542/6e72e451-b014-44bf-8291-1c26792a1a84

Steps to reproduce

Use the following code to test this issue: ```tsx 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 ( Gesture Handler Pressable onPressCallback('outer')} onPressIn={() => onPressInCallback('outer')} onPressOut={() => onPressOutCallback('outer')} style={styles.outerPressable}> onPressCallback('inner')} onPressIn={() => onPressInCallback('inner')} onPressOut={() => onPressOutCallback('inner')} style={styles.innerPressable} /> React Native Pressable onPressCallback('outer')} onPressIn={() => onPressInCallback('outer')} onPressOut={() => onPressOutCallback('outer')} style={styles.outerPressable}> onPressCallback('inner')} onPressIn={() => onPressInCallback('inner')} onPressOut={() => onPressOutCallback('inner')} style={styles.innerPressable} /> ); } 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