slight refactor of all the code, made it so that login and onboarding works, need to add system to validate connections to google photos + NAS before just blindly accepting

Added library home page and navigation bar at the bottom, using emojis as icon placeholders, album page also works.

elipses for settings and icon also work.

App.js

@@ -2,66 +2,98 @@ import React, { useEffect, useState } from 'react';
 import { StatusBar } from 'expo-status-bar';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { ActivityIndicator, View, Text, TouchableOpacity } from 'react-native';
 import DatabaseService from './src/services/DatabaseService';
 import LoginScreen from './src/screens/LoginScreen';
 import RegisterScreen from './src/screens/RegisterScreen';
 import OnboardingScreen from './src/screens/OnboardingScreen';
 import HomeScreen from './src/screens/HomeScreen';
+import SearchScreen from './src/screens/SearchScreen';
+import AlbumsScreen from './src/screens/AlbumsScreen';
 
 const Stack = createNativeStackNavigator();
+const Tab = createBottomTabNavigator();
 
 /**
- * App.js - Navigation Controller Only
- *
- * This component ONLY handles:
- * 1. Database initialization
- * 2. Navigation stack setup
- * 3. Routing to appropriate first screen
- *
- * NO DATA STORAGE OR DISPLAY HERE
- * All screens handle their own state and data
+ * MainTabs - Bottom tab navigator for logged-in users
+ * Tabs: Home (Library), Search, Albums
  */
+function MainTabs({ route }) {
+  const { userId } = route.params || {};
 
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: '#1a73e8',
+        tabBarInactiveTintColor: '#5f6368',
+        tabBarStyle: {
+          backgroundColor: '#fff',
+          borderTopColor: '#e0e0e0',
+          borderTopWidth: 1,
+          height: 56,
+          paddingBottom: 6,
+          paddingTop: 6,
+        },
+        tabBarLabelStyle: {
+          fontSize: 11,
+          fontWeight: '500',
+        },
+      }}
+    >
+      <Tab.Screen
+        name="Photos"
+        component={HomeScreen}
+        initialParams={{ userId }}
+        options={{
+          tabBarLabel: 'Photos',
+          tabBarIcon: ({ color }) => (
+            <Text style={{ fontSize: 22, color }}>🖼️</Text>
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Search"
+        component={SearchScreen}
+        initialParams={{ userId }}
+        options={{
+          tabBarLabel: 'Search',
+          tabBarIcon: ({ color }) => (
+            <Text style={{ fontSize: 22, color }}>🔍</Text>
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Albums"
+        component={AlbumsScreen}
+        initialParams={{ userId }}
+        options={{
+          tabBarLabel: 'Albums',
+          tabBarIcon: ({ color }) => (
+            <Text style={{ fontSize: 22, color }}>📁</Text>
+          ),
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+/**
+ * AppNavigator - Root stack navigator
+ * Handles auth flow (Login/Register/Onboarding) then MainTabs
+ */
 function AppNavigator() {
   return (
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
-        cardStyle: { backgroundColor: '#f5f5f5' },
       }}
     >
-      {/* Authentication Stack - User not logged in */}
-      <Stack.Screen
-        name="Login"
-        component={LoginScreen}
-        options={{
-          animationEnabled: false,
-        }}
-      />
-      <Stack.Screen
-        name="Register"
-        component={RegisterScreen}
-        options={{
-          animationEnabled: true,
-        }}
-      />
-      <Stack.Screen
-        name="Onboarding"
-        component={OnboardingScreen}
-        options={{
-          animationEnabled: true,
-        }}
-      />
-
-      {/* App Stack - User logged in */}
-      <Stack.Screen
-        name="Home"
-        component={HomeScreen}
-        options={{
-          animationEnabled: true,
-        }}
-      />
+      <Stack.Screen name="Login" component={LoginScreen} />
+      <Stack.Screen name="Register" component={RegisterScreen} />
+      <Stack.Screen name="Onboarding" component={OnboardingScreen} />
+      <Stack.Screen name="MainTabs" component={MainTabs} />
     </Stack.Navigator>
   );
 }
@@ -74,41 +106,35 @@ export default function App() {
     initializeApp();
   }, []);
 
-  /**
-   * Initialize database - only purpose of App.js useEffect
-   * All other logic belongs in screen components
-   */
   const initializeApp = async () => {
     try {
       setError(null);
       await DatabaseService.initDatabase();
       setIsReady(true);
-    } catch (error) {
-      console.error('Database initialization failed:', error);
-      setError(error.message || 'Database initialization failed');
+    } catch (err) {
+      console.error('Database initialization failed:', err);
+      setError(err.message || 'Database initialization failed');
       setIsReady(false);
     }
   };
 
-  // Show loading while database initializes
   if (!isReady && !error) {
     return (
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-        <ActivityIndicator size="large" color="#007AFF" />
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' }}>
+        <ActivityIndicator size="large" color="#1a73e8" />
       </View>
     );
   }
 
-  // Show error if database initialization fails
   if (error) {
     return (
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 20 }}>
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 20, backgroundColor: '#fff' }}>
         <Text style={{ fontSize: 16, color: '#333', marginBottom: 12, textAlign: 'center' }}>
           {error}
         </Text>
         <TouchableOpacity
           onPress={initializeApp}
-          style={{ backgroundColor: '#007AFF', paddingHorizontal: 16, paddingVertical: 10, borderRadius: 6 }}
+          style={{ backgroundColor: '#1a73e8', paddingHorizontal: 16, paddingVertical: 10, borderRadius: 6 }}
         >
           <Text style={{ color: '#fff', fontWeight: '600' }}>Retry</Text>
         </TouchableOpacity>
@@ -121,7 +147,7 @@ export default function App() {
       <NavigationContainer>
         <AppNavigator />
       </NavigationContainer>
-      <StatusBar barStyle="dark-content" backgroundColor="#f5f5f5" />
+      <StatusBar style="dark" backgroundColor="#fff" />
     </>
   );
 }