Back button in screen header is not responding when navigation <Stack /> is wrapped in <TapGestureHandler />

[fbele]

I am wrapping the navigation Stack of my app with <TapGestureHandler /> where I track all taps in the screen and then do something about it. The code looks like this:

        <TapGestureHandler onBegan={doSomething}>
          <View>
            <Stack
              screenOptions={{
                headerShown: true
              }} />
          </View>
        </TapGestureHandler>

The issue that I have is when a back button is shown in iOS when navigating from one screen to another, it does not respond when tapping on it. If I remove the Gesture Handler it works.

I have noticed the same behavior also when using Segmented Control module. This one I managed to resolve by using a JS version of it.

So my observation is, that any tap events that trigger a native iOS module don't respond.

I am open for any suggestions and other solutions. Thanks in advance!

[fredrickreuben]

I'm experiencing the same issue. I reached out to Software Mansion via email, but the solution they provided didn't work for me. They suggested using the touchable components from react-native-gesture-handler.

[fbele]

@fredrickreuben I have found the solution to this issue and it comes out of the box with Gesture Handler.
Firstly, I was using the wrong API in my example above, so I updated that.
Secondly, there is a parameter that doesn't cancel native touch events: https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture/#cancelstouchesinviewvalue-ios-only

[fredrickreuben]

It looks like this API is iOS-only. What about Android? In my case, I wrote logic that manually cancels the mistaken drag based on time and translation. I wonder if their is a special solution?