nicer looking month view

interfaces/nativeapp/App.tsx

@@ -1,32 +1,77 @@
 // App.tsx
-import React from 'react';
-import { Platform } from 'react-native';
+import React, { useCallback } from 'react'; // Removed useEffect, useState as they are implicitly used by useFonts
+import { Platform, View } from 'react-native';
 import { Provider as PaperProvider } from 'react-native-paper';
-import { NavigationContainer } from '@react-navigation/native'; // Always used
+import { NavigationContainer, DarkTheme as NavigationDarkTheme } from '@react-navigation/native'; // Import NavigationDarkTheme
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { StatusBar } from 'expo-status-bar';
+import * as SplashScreen from 'expo-splash-screen';
+import { useFonts } from 'expo-font';
 
 import { AuthProvider } from './src/contexts/AuthContext';
 import RootNavigator from './src/navigation/RootNavigator';
-import theme from './src/constants/theme';
-// Import the combined theme
-import { CombinedDarkTheme } from './src/navigation/WebAppLayout'; // Adjust import path if needed
+import theme from './src/constants/theme'; // This is the Paper theme
+// Removed CombinedDarkTheme import as we'll use NavigationDarkTheme directly for NavigationContainer
+
+// Keep the splash screen visible while we fetch resourcesDone, please go ahead with the changes.
+SplashScreen.preventAutoHideAsync();
+
+// Create a navigation theme based on the Paper theme colors but without the incompatible fonts object
+const navigationTheme = {
+  ...NavigationDarkTheme, // Use React Navigation's dark theme as a base
+  colors: {
+    ...NavigationDarkTheme.colors,
+    primary: theme.colors.primary,
+    background: theme.colors.background,
+    card: theme.colors.surface, // Map Paper surface to Navigation card
+    text: theme.colors.text,
+    border: theme.colors.surface, // Use surface for border or another appropriate color
+    notification: theme.colors.primary, // Example mapping
+  },
+};
 
 export default function App() {
+  const [fontsLoaded, fontError] = useFonts({
+    'Inter-Regular': require('./src/assets/fonts/Inter-Regular.ttf'),
+    'Inter-Bold': require('./src/assets/fonts/Inter-Bold.ttf'),
+    'Inter-Medium': require('./src/assets/fonts/Inter-Medium.ttf'),
+    'Inter-Light': require('./src/assets/fonts/Inter-Light.ttf'),
+    'Inter-Thin': require('./src/assets/fonts/Inter-Thin.ttf'),
+    // Add other weights/styles if you have them
+  });
+
+  const onLayoutRootView = useCallback(async () => {
+    if (fontsLoaded || fontError) {
+      // Log font loading status
+      if (fontError) {
+        console.error("Font loading error:", fontError);
+      }
+      await SplashScreen.hideAsync();
+    }
+  }, [fontsLoaded, fontError]);
+
+  if (!fontsLoaded && !fontError) {
+    return null; // Return null or a loading indicator while fonts are loading
+  }
+
+  // If fonts are loaded (or there was an error), render the app
   return (
-    <SafeAreaProvider>
-      <AuthProvider>
-        <PaperProvider theme={theme}>
-          {/* NavigationContainer wraps RootNavigator for ALL platforms */}
-          <NavigationContainer theme={CombinedDarkTheme}>
-             <RootNavigator />
-          </NavigationContainer>
-          <StatusBar
-            style="light" // Assuming dark theme
-            backgroundColor={Platform.OS === 'web' ? theme.colors.background : theme.colors.surface}
-          />
-        </PaperProvider>
-      </AuthProvider>
-    </SafeAreaProvider>
+    <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
+      <SafeAreaProvider>
+        <AuthProvider>
+          {/* PaperProvider uses the full theme with custom fonts */}
+          <PaperProvider theme={theme}>
+            {/* NavigationContainer uses the simplified navigationTheme */}
+            <NavigationContainer theme={navigationTheme}>
+               <RootNavigator />
+            </NavigationContainer>
+            <StatusBar
+              style="light" // Assuming dark theme
+              backgroundColor={Platform.OS === 'web' ? theme.colors.background : theme.colors.surface}
+            />
+          </PaperProvider>
+        </AuthProvider>
+      </SafeAreaProvider>
+    </View>
   );
 }