created a localised login system

App.js

@@ -1,20 +1,127 @@
+import React, { useEffect, useState } from 'react';
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+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';
 
-export default function App() {
+const Stack = createNativeStackNavigator();
+
+/**
+ * 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
+ */
+
+function AppNavigator() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <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.Navigator>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+export default function App() {
+  const [isReady, setIsReady] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    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');
+      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>
+    );
+  }
+
+  // Show error if database initialization fails
+  if (error) {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 20 }}>
+        <Text style={{ fontSize: 16, color: '#333', marginBottom: 12, textAlign: 'center' }}>
+          {error}
+        </Text>
+        <TouchableOpacity
+          onPress={initializeApp}
+          style={{ backgroundColor: '#007AFF', paddingHorizontal: 16, paddingVertical: 10, borderRadius: 6 }}
+        >
+          <Text style={{ color: '#fff', fontWeight: '600' }}>Retry</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <>
+      <NavigationContainer>
+        <AppNavigator />
+      </NavigationContainer>
+      <StatusBar barStyle="dark-content" backgroundColor="#f5f5f5" />
+    </>
+  );
+}