Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix nested buttons on the new architecture (#2926)
## Description On the new architecture, due to composing `RNGestureHandlerButton` and `RNGestureHandlerButtonComponentView` the native view hierarchy wasn't representative of the hierarchy in the React Native. The most outer button would be rendered on top of all the react children, swallowing all the touches and preventing nested buttons from working. This PR changes the behavior by mounting all children under the actual button view, which should result in the correct native hierarchy. ## Test plan <details> <summary>Tested on the example app and on the following code:</summary> ```jsx import { SafeAreaView, View } from 'react-native'; import { GestureHandlerRootView, TouchableOpacity, } from 'react-native-gesture-handler'; export default function App() { return ( <GestureHandlerRootView style={{ flex: 1 }}> <SafeAreaView style={{ flex: 1 }}> <TouchableOpacity onPress={() => { console.log('outer press'); }}> <View style={{ width: 200, height: 200, backgroundColor: 'red' }}> <TouchableOpacity onPress={() => { console.log('inner press'); }}> <View style={{ width: 100, height: 100, backgroundColor: 'blue', }} /> </TouchableOpacity> </View> </TouchableOpacity> </SafeAreaView> </GestureHandlerRootView> ); } ``` </details>
- Loading branch information