Skip to content

Commit

Permalink
Fix nested buttons on the new architecture (#2926)
Browse files Browse the repository at this point in the history
## 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
j-piasecki authored Jun 3, 2024
1 parent 921a9b2 commit bcebeec
Showing 1 changed file with 10 additions and 0 deletions.
10 changes: 10 additions & 0 deletions apple/RNGestureHandlerButtonComponentView.mm
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,16 @@ - (instancetype)initWithFrame:(CGRect)frame
return self;
}

- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
{
[_buttonView mountChildComponentView:childComponentView index:index];
}

- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
{
[_buttonView unmountChildComponentView:childComponentView index:index];
}

#pragma mark - RCTComponentViewProtocol

+ (ComponentDescriptorProvider)componentDescriptorProvider
Expand Down

0 comments on commit bcebeec

Please sign in to comment.