Yassir4

function App() {
  return (
    <NavigationContainer>
      <PortalProvider>
      {/* view wrapper to fix the menu display in android */}
      <View style={{flex: 1}}>
        {/* our menu portal Host */}
        <PortalHost name="menu" />
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />

Yassir4

import React, { useState, useEffect, useRef } from "react";
import {
  View,
  Pressable,
  StyleSheet,
  Platform,
  TouchableOpacity,
  Text,
  Dimensions,
} from "react-native";

Yassir4

<Menu trigger={<Text>press here</Text>}>
  <MenuItem
    text={"Title"}
    onPress={() => alert("option pressed")}
  />
  <MenuItem
    text={"Recently Added"}
    onPress={() => alert("option pressed")}
  />
  <MenuItem

Yassir4

// states to hold the trigger and menu dimensions
const [triggerDimension, setTriggerDimension] = useState({
    top: 0,
    left: 0,
    width: 0,
    height: 0,
  });

const [modalDimensions, setModalDimensions] = useState({
    width: 0,

Yassir4

import { useState, useEffect } from "react";
import { Keyboard, Platform } from "react-native";

const isIOS = Platform.OS === "ios";
const useKeyboardHeight = () => {
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  const handleKeyboardDidShow = (e) => {
    setKeyboardHeight(e.endCoordinates.height);
  };

Yassir4

const { top, left } = useMemo(() => {
    let left = 0;
    let top = 0;

    left =
      triggerDimensions.left - modalDimensions.width + triggerDimensions.width;
    // if the popup is outside the screen from the left
    if (triggerDimensions.left - modalDimensions.width < 0)
      left = triggerDimensions.left;

Yassir4

//Declare your endpoints
const endpoint1 = new HttpLink({
    uri: 'https://api.hashnode.com/graphql',
    ...
})
const endpoint2 = new HttpLink({
    uri: 'endpoint2/graphql',
    ...
})