Yassir4

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

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

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

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

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

// 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

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

Yassir4

// add this
const refreshing = networkStatus === NetworkStatus.refetch
// prevent the loading indicator from appearing while refreshing
 if (loading && repositories.length === 0 && !refreshing)
   return (
     <View style={styles.loading}>
       <ActivityIndicator size="large" color="rgb(0, 122, 255)" />
     </View>
   )

Yassir4

import { NetworkStatus } from '@apollo/client'
.
.
.
const { data, error, loading, fetchMore, refetch, networkStatus } = useQuery(REPOSITORIES_QUERY, {
   variables: { first: 15 },
   notifyOnNetworkStatusChange: true,
 })

Yassir4

/// ...
 
const onUpdate = (prev, { fetchMoreResult }) => {
   if (!fetchMoreResult) return prev
   const { pageInfo } = fetchMoreResult.organization.repositories
   const nodes = [
     ...prev.organization.repositories.nodes,
     ...fetchMoreResult.organization.repositories.nodes,
   ]
   return Object.assign({}, prev, {