chore: move theme to main layout

app/(app)/_layout.tsx

@@ -4,7 +4,12 @@ import {
   JetBrainsMono_400Regular,
 } from '@expo-google-fonts/jetbrains-mono'
 import { NotoSans_400Regular } from '@expo-google-fonts/noto-sans'
-import { Redirect, SplashScreen, Stack, useRootNavigationState } from 'expo-router'
+import {
+  Redirect,
+  SplashScreen,
+  Stack,
+  useRootNavigationState,
+} from 'expo-router'
 import * as SecureStore from 'expo-secure-store'
 import React from 'react'
 import { useColorScheme } from 'react-native'
@@ -53,7 +58,6 @@ const RootLayout = () => {
     return null
   }
   if (!user) {
-    console.log('redirecting inside the root')
     return <Redirect href="/login" />
   }
 
@@ -61,52 +65,23 @@ const RootLayout = () => {
 }
 
 const RootLayoutNav = () => {
-  const colorScheme = useColorScheme()
-  const [settings, setSettings] = React.useState<Setting>({
-    theme: 'auto',
-    color: 'default',
-  })
-
-  // Load settings from the device
-  React.useEffect(() => {
-    SecureStore.getItemAsync('settings').then((result) => {
-      if (result === null) {
-        SecureStore.setItemAsync('settings', JSON.stringify(settings)).then(
-          (res) => console.log(res),
-        )
-      }
-
-      setSettings(JSON.parse(result ?? JSON.stringify(settings)))
-    })
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
   return (
-    <PaperProvider
-      theme={
-        Themes[
-          settings.theme === 'auto' ? (colorScheme ?? 'dark') : settings.theme
-        ][settings.color]
-      }
+    <Stack
+      screenOptions={{
+        animation: 'slide_from_bottom',
+        header: (props) => (
+          <StackHeader navProps={props} children={undefined} />
+        ),
+      }}
     >
-      <Stack
-        screenOptions={{
-          animation: 'slide_from_bottom',
-          header: (props) => (
-            <StackHeader navProps={props} children={undefined} />
-          ),
-        }}
-      >
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="drawer" options={{ headerShown: false }} />
-        <Stack.Screen name="search" options={{ title: 'Search' }} />
-        <Stack.Screen
-          name="modal"
-          options={{ title: 'Modal', presentation: 'modal' }}
-        />
-      </Stack>
-    </PaperProvider>
+      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <Stack.Screen name="drawer" options={{ headerShown: false }} />
+      <Stack.Screen name="search" options={{ title: 'Search' }} />
+      <Stack.Screen
+        name="modal"
+        options={{ title: 'Modal', presentation: 'modal' }}
+      />
+    </Stack>
   )
 }
 

app/_layout.tsx

@@ -1,11 +1,45 @@
-import { AuthProvider, useAuth } from '@/lib/providers/auth'
-
-import { Redirect, Slot } from 'expo-router'
+import { Slot } from 'expo-router'
+import { PaperProvider } from 'react-native-paper'
+import * as SecureStore from 'expo-secure-store'
+import { AuthProvider } from '@/lib/providers/auth'
+import { useColorScheme } from 'react-native'
+import { useEffect, useState } from 'react'
+import { Setting } from '@/lib/types'
+import { Themes } from '@/lib/ui'
 
 export default function Root() {
+  const colorScheme = useColorScheme()
+  const [settings, setSettings] = useState<Setting>({
+    theme: 'auto',
+    color: 'default',
+  })
+
+  // Load settings from the device
+  useEffect(() => {
+    SecureStore.getItemAsync('settings').then((result) => {
+      if (result === null) {
+        SecureStore.setItemAsync('settings', JSON.stringify(settings)).then(
+          (res) => console.log(res),
+        )
+      }
+
+      setSettings(JSON.parse(result ?? JSON.stringify(settings)))
+    })
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   return (
-    <AuthProvider>
-      <Slot />
-    </AuthProvider>
+    <PaperProvider
+      theme={
+        Themes[
+          settings.theme === 'auto' ? (colorScheme ?? 'dark') : settings.theme
+        ][settings.color]
+      }
+    >
+      <AuthProvider>
+        <Slot />
+      </AuthProvider>
+    </PaperProvider>
   )
 }

app/login.tsx

@@ -1,22 +1,20 @@
 import { useAuth } from '@/lib/providers/auth'
 import { useRouter } from 'expo-router'
 import { useEffect } from 'react'
-import { View } from 'react-native'
+import { useColorScheme, View } from 'react-native'
 import { Button, Text } from 'react-native-paper'
 
 function Login() {
   const { signIn, user } = useAuth()
   const router = useRouter()
+  const colorScheme = useColorScheme()
 
   useEffect(() => {
     if (user) {
-      console.log('redicrecting')
       router.push('/')
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user])
-  useEffect(() => {
-    console.log('login page')
-  }, [])
   return (
     <View
       style={{
@@ -27,8 +25,17 @@ function Login() {
         padding: 16,
       }}
     >
-      <Text variant="headlineMedium">Welcome</Text>
-      <Button mode="contained" icon="google" onPress={async () => await signIn()}>
+      <Text
+        variant="headlineMedium"
+        style={{ color: colorScheme === 'dark' ? '#fff' : '#000' }}
+      >
+        Welcome to featheroom!
+      </Text>
+      <Button
+        mode="contained"
+        icon="google"
+        onPress={async () => await signIn()}
+      >
         Login with Google
       </Button>
     </View>