From a301b83faea46e14c19bc743d880b33e933e72ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Thu, 28 Mar 2024 13:16:59 +0100 Subject: [PATCH 1/3] change app loading logic to hide splash screen --- src/components/AppLoading.tsx | 72 +++++++++++---------------------- src/hooks/useCachedResources.ts | 10 ++++- 2 files changed, 32 insertions(+), 50 deletions(-) diff --git a/src/components/AppLoading.tsx b/src/components/AppLoading.tsx index c7eea1dd..e781891d 100644 --- a/src/components/AppLoading.tsx +++ b/src/components/AppLoading.tsx @@ -1,74 +1,48 @@ import { Loader, Center } from '@baca/design-system/components' -import { useBoolean, useCachedResources, useFonts } from '@baca/hooks' +import { useCachedResources, useNavigationTheme } from '@baca/hooks' import { isSignedInAtom } from '@baca/store/auth' import * as SplashScreen from 'expo-splash-screen' import { useAtomValue } from 'jotai' -import { FC, PropsWithChildren, useCallback, useEffect } from 'react' +import { FC, PropsWithChildren, useCallback, useEffect, useState } from 'react' import { View, StyleSheet } from 'react-native' +// Keep the splash screen visible while we fetch resources SplashScreen.preventAutoHideAsync() export const AppLoading: FC = ({ children }) => { - const isLoadingComplete = useCachedResources() - const [fontsLoaded, fontError] = useFonts({ - Inter_Regular: require('../../assets/fonts/Inter-Regular.ttf'), - Inter_Medium: require('../../assets/fonts/Inter-Medium.ttf'), - Inter_SemiBold: require('../../assets/fonts/Inter-SemiBold.ttf'), - Inter_Bold: require('../../assets/fonts/Inter-Bold.ttf'), - IcoMoon: require('../../assets/icomoon/icomoon.ttf'), - }) + const { navigationTheme } = useNavigationTheme() - // Delay loading logic was made to prevent displaying empty screen after splash screen will hide - const [isDelayLoading, setIsDelayLoading] = useBoolean(true) + const isLoadingComplete = useCachedResources() const isSignedIn = useAtomValue(isSignedInAtom) + const [isLayoutReady, setIsLayoutReady] = useState(false) - useEffect(() => { - async function prepare() { - try { - // Keep the splash screen visible while we fetch resources - await SplashScreen.preventAutoHideAsync() - } catch (e) { - console.warn(e) - } - } + const [isSplashHidden, setIsSplashHidden] = useState(false) - prepare() + const onLayout = useCallback(() => { + setIsLayoutReady(true) }, []) - const onLayoutRootView = useCallback(async () => { - try { - // Source: https://docs.expo.dev/versions/latest/sdk/splash-screen/#usage - // This tells the splash screen to hide immediately! If we call this after - // `prepare`, then we may see a blank screen while the app is - // loading its initial state and rendering its first pixels. So instead, - // we hide the splash screen once we know the root view has already - // performed layout. - if (fontsLoaded || fontError) { - await SplashScreen.hideAsync() - } - } catch { - console.log('There was some error while hiding splash screen') - } - }, [fontsLoaded, fontError]) - - const isLoading = !isLoadingComplete || isSignedIn === null + const isLoading = !isLoadingComplete || isSignedIn === null || !isLayoutReady useEffect(() => { + const hideSplashScreen = () => { + setTimeout(async () => { + await SplashScreen.hideAsync() + setTimeout(() => setIsSplashHidden(true), 0) + }, 150) + } if (!isLoading) { - setTimeout(() => { - setIsDelayLoading.off() - }, 200) + hideSplashScreen() } - }, [isLoading, setIsDelayLoading]) - - if (!fontsLoaded && !fontError) { - return null - } + }, [isLoading]) return ( - - {isLoading || isDelayLoading ? ( + + {!isSplashHidden ? (
diff --git a/src/hooks/useCachedResources.ts b/src/hooks/useCachedResources.ts index f447411a..6ccca0e6 100644 --- a/src/hooks/useCachedResources.ts +++ b/src/hooks/useCachedResources.ts @@ -1,8 +1,16 @@ import { checkForUpdates } from '@baca/utils' +import { useFonts } from 'expo-font' import { useEffect, useState } from 'react' export const useCachedResources = (): boolean => { const [isLoadingComplete, setLoadingComplete] = useState(false) + const [fontsLoaded, fontError] = useFonts({ + Inter_Regular: require('../../assets/fonts/Inter-Regular.ttf'), + Inter_Medium: require('../../assets/fonts/Inter-Medium.ttf'), + Inter_SemiBold: require('../../assets/fonts/Inter-SemiBold.ttf'), + Inter_Bold: require('../../assets/fonts/Inter-Bold.ttf'), + IcoMoon: require('../../assets/icomoon/icomoon.ttf'), + }) useEffect(() => { async function loadResourcesAndDataAsync() { @@ -19,5 +27,5 @@ export const useCachedResources = (): boolean => { loadResourcesAndDataAsync() }, []) - return isLoadingComplete + return isLoadingComplete && !!(fontsLoaded || fontError) } From 6e967572d5eedb263b448f0227e450ba72e29070 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Thu, 28 Mar 2024 13:18:07 +0100 Subject: [PATCH 2/3] fix calculating menu position for android --- src/components/organisms/Menu/index.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/organisms/Menu/index.tsx b/src/components/organisms/Menu/index.tsx index 06914815..75f7d872 100644 --- a/src/components/organisms/Menu/index.tsx +++ b/src/components/organisms/Menu/index.tsx @@ -3,7 +3,7 @@ import { Box, TouchableProps, ScrollView, Pressable } from '@baca/design-system' import { useRef, useState, useMemo, useTheme, useCallback } from '@baca/hooks' import { Portal } from '@gorhom/portal' import React, { NamedExoticComponent, PropsWithChildren, memo, useEffect } from 'react' -import { View, Modal, Dimensions } from 'react-native' +import { View, Modal, Dimensions, Platform } from 'react-native' import { MenuItem } from '../../molecules/MenuItem' @@ -91,7 +91,7 @@ const Menu = memo( }, [placement]) useEffect(() => { - if (isOpen && !triggerPosition) { + if (isOpen && !triggerPosition && Platform.OS === 'ios') { _measureTriggerPosition() } }, [_measureTriggerPosition, isOpen, triggerPosition]) @@ -115,7 +115,12 @@ const Menu = memo( return ( <> - {trigger(triggerTouchableProps, { isOpen })} + + {trigger(triggerTouchableProps, { isOpen })} + Date: Thu, 28 Mar 2024 13:21:38 +0100 Subject: [PATCH 3/3] fix calculating menu position on web --- src/components/organisms/Menu/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/organisms/Menu/index.tsx b/src/components/organisms/Menu/index.tsx index 75f7d872..1125fa55 100644 --- a/src/components/organisms/Menu/index.tsx +++ b/src/components/organisms/Menu/index.tsx @@ -116,7 +116,7 @@ const Menu = memo( return ( <> {trigger(triggerTouchableProps, { isOpen })}