How to disable navigating to another screen while the modal is open in React Navigation?

I currently have a nested stack for React Navigation:

const FriendsStack = createStackNavigator({
    Friends: {
        screen: FriendsScreen,
    },
    MyProfile: {
        screen: MyProfileScreen,
    },
}, {
        navigationOptions: {
            header: null,
            gesturesEnabled: true,
            gestureResponseDistance: {
                horizontal: 500,
                vertical: 800,
            }
        },
        mode: 'modal',
        headerMode: 'none',
    }
)

const MainStack = createMaterialTopTabNavigator({
    Tracker: {
        screen: TrackerStack,
    },
    Friends: {
        screen: FriendsStack,
    },
}, {
        tabBarPosition: null,
    }
)

The main level has two screens, Tracker and Friends, under createMaterialTopTabNavigator which swipe horizontally. The Friends screen has a modal called MyProfile that swipes vertically. The problem is, after the MyProfile modals appears from the bottom vertically, I'm still able to swipe horizontally to the Tracker screen on the main level. This doesn't close the modal or anything, but becomes almost as if MyProfile became the main level screen with Tracker.

I want the MyProfile modal to only allow vertical gestures, not horizontal. gestureDirection property only determines whether the direction should be inverted or not and gesturesEnabled: false disables all the guestures. How do I disable only the horizontal gestures and not the vertical gestures? Otherwise, is there a way to disable a screen from navigating to another screen while the modal is open?