Skip to content

Instantly share code, notes, and snippets.

View Yassir4's full-sized avatar
🎯
Focusing

Hartani Yassir Yassir4

🎯
Focusing
View GitHub Profile
@Yassir4
Yassir4 / apollo.ts
Created October 16, 2022 17:26
Setup multiple graphql endpoint in apollo
View apollo.ts
//Declare your endpoints
const endpoint1 = new HttpLink({
uri: 'https://api.hashnode.com/graphql',
...
})
const endpoint2 = new HttpLink({
uri: 'endpoint2/graphql',
...
})
@Yassir4
Yassir4 / menu.js
Last active March 22, 2022 19:15
calculating the menu position in the screen
View menu.js
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;
View useKeyboardHeight.js
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);
};
View Menu.js
// 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,
View Home.js
<Menu trigger={<Text>press here</Text>}>
<MenuItem
text={"Title"}
onPress={() => alert("option pressed")}
/>
<MenuItem
text={"Recently Added"}
onPress={() => alert("option pressed")}
/>
<MenuItem
View Menu.js
import React, { useState, useEffect, useRef } from "react";
import {
View,
Pressable,
StyleSheet,
Platform,
TouchableOpacity,
Text,
Dimensions,
} from "react-native";
@Yassir4
Yassir4 / App.js
Last active March 29, 2022 11:07
Adding portalProvider and portal host to the root component
View App.js
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
Yassir4 / index.js
Created September 15, 2020 08:12
Repositories
View index.js
// 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>
)
View index.js
import { NetworkStatus } from '@apollo/client'
.
.
.
const { data, error, loading, fetchMore, refetch, networkStatus } = useQuery(REPOSITORIES_QUERY, {
variables: { first: 15 },
notifyOnNetworkStatusChange: true,
})
@Yassir4
Yassir4 / index.js
Created September 15, 2020 08:08
Repositories
View index.js
/// ...
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, {