Media-Aggregation-and-Sorting-System/App.js

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 { 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';

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 (
    <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>
  );
}

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" />
    </>
  );
}