From 5b7156fbec1554e0420ee9908c7c5c9a3e3343cb Mon Sep 17 00:00:00 2001
From: Tony Kharioki <antolisah@gmail.com>
Date: Sat, 4 Nov 2023 14:36:41 +0300
Subject: [PATCH] splashscreen hide fix

---
 app/_layout.tsx | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/app/_layout.tsx b/app/_layout.tsx
index 1a76ffa..e5b6dd3 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,8 +1,7 @@
 import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
 import { QueryClientProvider } from '@tanstack/react-query';
-import { useFonts } from 'expo-font';
-import { Slot } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
+import * as Font from 'expo-font';
+import { Slot, SplashScreen } from 'expo-router';
 import React, { useEffect, useLayoutEffect, useState } from 'react';
 import type { ColorSchemeName } from 'react-native';
 import { Appearance } from 'react-native';
@@ -18,6 +17,7 @@ type Theme = {
 SplashScreen.preventAutoHideAsync();
 
 export default () => {
+  const [isReady, setIsReady] = useState(false);
   const [theme, setTheme] = useState({ mode: Appearance.getColorScheme() });
 
   useEffect(() => {
@@ -44,8 +44,6 @@ export default () => {
     });
   }, [theme.mode]);
 
-  const [fontsLoaded, error] = useFonts(customFontsToLoad);
-
   const _lightTheme = {
     ...DefaultTheme,
     colors: {
@@ -63,18 +61,28 @@ export default () => {
   };
 
   useEffect(() => {
-    if (error) throw error;
-  }, [error]);
+    async function prepare() {
+      try {
+        await Font.loadAsync(customFontsToLoad);
+      } catch (e) {
+        console.warn(e);
+      } finally {
+        setIsReady(true);
+      }
+    }
+
+    prepare();
+  }, []);
 
   useLayoutEffect(() => {
-    if (fontsLoaded) {
+    if (isReady) {
       setTimeout(() => {
         SplashScreen.hideAsync();
-      }, 1500);
+      }, 3000);
     }
-  }, [fontsLoaded]);
+  }, [isReady]);
 
-  if (!fontsLoaded) return;
+  if (!isReady) return null;
 
   return (
     <ThemeProvider value={theme.mode === 'light' ? _lightTheme : _darkTheme}>