React native navigation enable swiping on part of screen material top navigator

Question

I have a materialTopTabNavigator in my app and one of the screens needs to have the swiping between tabs gesture enabled on only part of the screen (for example, from the bottom of the screen to 200 from bottom). I think I should be able to do this with gestureHandlerProps prop of the materialTopTabNavigator, but it doesn't seem to work. This prop allows you to pass props to the underlying PanGestureHandler. Here is what I am passing as gestureHandlerProps and the link to the PanGestureHandler docs:

    gestureHandlerProps={{
                   maxPointers:1, 
                   failOffsetY:height-200,
                   hitSlop: {left:0, right:0, top:0, bottom:200}
                 }}
   //height is height of screen

Link to PanGestureHandler Docs: https://docs.swmansion.com/react-native-gesture-handler/docs/handler-pan

Answer 1

I figured out how to do this using the common handler props listed in the react-native-gesture-handler docs. I used the hitSlop prop and passed it an object with height and top properties as follows. This was passed to my material top tabs navigator gestureHandlerProps prop.

gestureHandlerProps={{
            maxPointers: 1,
            hitSlop: {height: 100, top: 0}
}}

This allows the underlying PanGestureHandler of the material top tabs navigator to only be activated from 100 points from the bottom of the screen.

Link to common handler props: https://docs.swmansion.com/react-native-gesture-handler/docs/handler-common