react-navigation gesture triggers ContextMenu on android

[ijmo]

In Android, when using react-navigation's stack and performing a swipe-back gesture over a ContextMenu, the ContextMenu appears. How can I prevent this? (It works fine on iOS.)
I'm not sure if this is an issue with react-navigation.

gif:

example:
package.json

{
  // omitted
  "dependencies": {
    "@react-navigation/native": "^7.0.14",
    "@react-navigation/stack": "^7.1.1",
    "react": "18.3.1",
    "react-native": "0.76.5",
    "react-native-context-menu-view": "^1.16.0",
    "react-native-gesture-handler": "^2.21.2",
    "react-native-safe-area-context": "^5.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.1",
    "@react-native-community/cli-platform-android": "15.0.1",
    "@react-native-community/cli-platform-ios": "15.0.1",
    "@react-native/babel-preset": "0.76.5",
    "@react-native/eslint-config": "0.76.5",
    "@react-native/metro-config": "0.76.5",
    "@react-native/typescript-config": "0.76.5",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

App.tsx

import React from 'react';
import {
  Text,
  View,
  Button,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  createStackNavigator,
  type StackScreenProps,
} from '@react-navigation/stack';
import ContextMenu from 'react-native-context-menu-view';
import 'react-native-gesture-handler';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation, route }: StackScreenProps<any>) => {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        onPress={() => {
          navigation.navigate('Details')
        }}
        title="Go to Details"/>
    </View>
  );
}

const DetailsScreen = ({ navigation, route }: StackScreenProps<any>) => {
  return (
    <View>
      <Text>Details Screen</Text>
      <ContextMenu
        actions={[{ title: "Title 1" }, { title: "Title 2" }]}
        onPress={(e) => {
          console.warn(
            `Pressed ${e.nativeEvent.name} at index ${e.nativeEvent.index}`
          );
        }}>
        <View style= {{
          backgroundColor: 'gray',
          height: 200,
          }}>
          <Text>Context menu area</Text>
        </View>
      </ContextMenu>
    </View>
  );
}

function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;