chore: improve authentication stack in example app

Author: Joaguirrem

example/app/(app)/_layout.tsx

@@ -0,0 +1,22 @@
+import 'react-native-reanimated'
+
+import { Stack } from 'expo-router'
+
+import { useListenLocalStorage } from '@/common/localStorage'
+
+export default function () {
+  const [accessToken] = useListenLocalStorage('accessToken')
+
+  const isLoggedIn = Boolean(accessToken)
+
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Protected guard={isLoggedIn}>
+        <Stack.Screen name="index" />
+      </Stack.Protected>
+      <Stack.Protected guard={!isLoggedIn}>
+        <Stack.Screen name="login" />
+      </Stack.Protected>
+    </Stack>
+  )
+}

example/app/(app)/home.tsx renamed to example/app/(app)/index.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'expo-router'
 import { Fragment, useEffect, useState } from 'react'
 import { Alert, Dimensions, Image, StyleSheet } from 'react-native'
 
+import { LineError } from '@/common/errors'
 import {
   removeLocalStorageItem,
   setLocalStorageItem,
@@ -15,8 +16,11 @@ import { Bullet } from '@/components/Bullet'
 import { Button } from '@/components/Button'
 import { ThemedView } from '@/components/ThemedView'
 
-function handleError(error: Error) {
-  return Alert.alert(strings.errorTitle, error?.message ?? strings.errorMessage)
+function handleError(error: LineError) {
+  const userInfo = JSON.parse(error.userInfo?.message ?? '')
+  const title = strings.errorTitle + userInfo.statusCode
+  const message = userInfo.message ?? strings.errorMessage
+  return Alert.alert(title, message)
 }
 
 export default function () {
@@ -41,7 +45,7 @@ export default function () {
     return Line.logout()
       .then(() => {
         removeLocalStorageItem('accessToken')
-        router.replace('/login')
+        router.replace('/')
       })
       .finally(() => setLoading(false))
   }
@@ -96,8 +100,8 @@ export default function () {
 
 const strings = {
   accessToken: 'Access Token',
-  errorMessage: 'Failed to get information',
-  errorTitle: 'Error',
+  errorMessage: 'The operation could not be completed',
+  errorTitle: 'Error ',
   isFriend: 'Is Friend?',
   logOut: 'Logout',
   name: 'Name',

example/app/(app)/login.tsx

@@ -21,7 +21,7 @@ export default function () {
       .then(result => {
         if (!result.accessToken.accessToken) return
         setLocalStorageItem('accessToken', result.accessToken.accessToken)
-        router.replace('/home')
+        router.replace('/')
       })
       .catch(() => {
         Alert.alert(strings.errorTitle, strings.errorMessage)

example/app/_layout.tsx

@@ -6,39 +6,24 @@ import {
   ThemeProvider,
 } from '@react-navigation/native'
 import Line from '@xmartlabs/react-native-line'
-import { useFonts } from 'expo-font'
-import { Stack } from 'expo-router'
-import * as SplashScreen from 'expo-splash-screen'
+import { Slot } from 'expo-router'
 import { StatusBar } from 'expo-status-bar'
-import { useEffect } from 'react'
+import { useLayoutEffect } from 'react'
 
-import SpaceMono from '@/assets/fonts/SpaceMono-Regular.ttf'
+import { SplashScreen } from '@/components/SplashScreen'
 import { useColorScheme } from '@/hooks/useColorScheme'
 
-SplashScreen.preventAutoHideAsync()
-
 export default function () {
   const colorScheme = useColorScheme()
-  const [loaded] = useFonts({ SpaceMono })
-
-  useEffect(() => {
-    if (loaded) {
-      Line.setup({ channelId: '2006826760' })
-      SplashScreen.hideAsync()
-    }
-  }, [loaded])
 
-  if (!loaded) {
-    return null
-  }
+  useLayoutEffect(() => {
+    Line.setup({ channelId: '2006826760' })
+  }, [])
 
   return (
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack screenOptions={{ headerShown: false }}>
-        <Stack.Screen name="(app)/login" />
-        <Stack.Screen name="(app)/home" />
-        <Stack.Screen name="+not-found" />
-      </Stack>
+      <SplashScreen />
+      <Slot />
       <StatusBar style="auto" />
     </ThemeProvider>
   )

example/app/index.tsx

@@ -0,0 +1,10 @@
+export class LineError extends Error {
+  public userInfo?: {
+    message: string
+    statusCode: number
+  }
+
+  constructor(message: string) {
+    super(message)
+  }
+}

example/common/errors.ts

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