fix: improve font loading flow

Author: Joaguirrem

example/app/(app)/_layout.tsx

@@ -3,12 +3,19 @@ import 'react-native-reanimated'
 import { Stack } from 'expo-router'
 
 import { useListenLocalStorage } from '@/common/localStorage'
+import { Spinner } from '@/components/Spinner'
+import { useSplashScreen } from '@/hooks/useSplashScreen'
 
 export default function AppLayout() {
+  const ready = useSplashScreen()
   const [accessToken] = useListenLocalStorage('accessToken')
 
   const isLoggedIn = Boolean(accessToken)
 
+  if (!ready) {
+    return <Spinner />
+  }
+
   return (
     <Stack screenOptions={{ headerShown: false }}>
       <Stack.Protected guard={isLoggedIn}>

example/app/_layout.tsx

@@ -10,7 +10,6 @@ import { Slot } from 'expo-router'
 import { StatusBar } from 'expo-status-bar'
 import { useLayoutEffect } from 'react'
 
-import { SplashScreen } from '@/components/SplashScreen'
 import { useColorScheme } from '@/hooks/useColorScheme'
 
 export default function RootLayout() {
@@ -22,7 +21,6 @@ export default function RootLayout() {
 
   return (
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <SplashScreen />
       <Slot />
       <StatusBar style="auto" />
     </ThemeProvider>

example/components/Spinner/index.tsx

@@ -0,0 +1,7 @@
+import { ActivityIndicator, ActivityIndicatorProps } from 'react-native'
+
+import { Color } from '@/constants/Colors'
+
+export function Spinner(props: ActivityIndicatorProps) {
+  return <ActivityIndicator color={Color.Green} {...props} />
+}

example/components/SplashScreen/index.tsx renamed to example/hooks/useSplashScreen.ts

@@ -1,21 +1,21 @@
-import 'react-native-reanimated'
-
 import { useFonts } from 'expo-font'
 import * as ExpoSplashScreen from 'expo-splash-screen'
-import { FunctionComponent, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 import SpaceMono from '@/assets/fonts/SpaceMono-Regular.ttf'
 
 ExpoSplashScreen.preventAutoHideAsync()
 
-export const SplashScreen: FunctionComponent = () => {
+export const useSplashScreen = () => {
   const [loaded] = useFonts({ SpaceMono })
+  const [ready, setReady] = useState<boolean>(false)
 
   useEffect(() => {
     if (loaded) {
       ExpoSplashScreen.hideAsync()
+      setReady(true)
     }
   }, [loaded])
 
-  return null
+  return ready
 }