77 lines
3.2 KiB
TypeScript
77 lines
3.2 KiB
TypeScript
// App.tsx
|
|
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, 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'; // 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 (
|
|
<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>
|
|
);
|
|
} |