App.js

import React, { useState } from 'react';
import { View, StyleSheet, Platform, StatusBar as RNStatusBar } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
import RootNavigator from './src/navigation/RootNavigator';
import SplashScreen from './src/screens/SplashScreen';
import { ThemeProvider, useTheme } from './src/context/ThemeContext';

function MainApp() {
    const [isLoading, setIsLoading] = useState(true);
    const { theme } = useTheme();

    // Create a Navigation Theme based on our custom theme
    const navigationTheme = {
        ...DefaultTheme,
        colors: {
            ...DefaultTheme.colors,
            background: theme.background,
            card: theme.surface,
            text: theme.textPrimary,
            border: theme.border,
            primary: theme.primary,
        },
    };

    if (isLoading) {
        return (
            <>
                <StatusBar style={theme.isDark ? "light" : "dark"} />
                <SplashScreen onFinish={() => setIsLoading(false)} />
            </>
        );
    }

    return (
        <NavigationContainer theme={navigationTheme}>
            <StatusBar style={theme.isDark ? "light" : "dark"} />
            <View style={[styles.container, { backgroundColor: theme.background }]}>
                <RootNavigator />
            </View>
        </NavigationContainer>
    );
}

export default function App() {
    return (
        <SafeAreaProvider>
            <ThemeProvider>
                <MainApp />
            </ThemeProvider>
        </SafeAreaProvider>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        // Background color is handled dynamically now
        paddingTop: Platform.OS === 'android' ? RNStatusBar.currentHeight : 0,
    },
});