App.tsx

import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
import { useFonts } from "expo-font";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { useEffect } from "react";
import { LogBox } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { useDeviceContext } from "twrnc";

import tw from "@/lib/tailwind";
import { AuthProvider } from "@/providers/AuthProvider";
import { CircleProvider } from "@/providers/CircleProvider";
import { LocationProvider } from "@/providers/LocationProvider";
import { AppRoutes } from "@/routes";

SplashScreen.preventAutoHideAsync();

LogBox.ignoreAllLogs();

export default function App() {
	useDeviceContext(tw);

	const [loaded, error] = useFonts({
		OpenRunde: require("@/assets/fonts/OpenRunde-Regular.otf"),
		OpenRundeMedium: require("@/assets/fonts/OpenRunde-Medium.otf"),
		OpenRundeSemibold: require("@/assets/fonts/OpenRunde-Semibold.otf"),
		OpenRundeBold: require("@/assets/fonts/OpenRunde-Bold.otf"),
	});

	useEffect(() => {
		if (error) throw error;
	}, [error]);

	useEffect(() => {
		if (loaded) {
			setTimeout(() => {
				SplashScreen.hideAsync();
			}, 1000);
		}
	}, [loaded]);

	if (!loaded) return null;

	return (
		<AuthProvider>
			<LocationProvider>
				<CircleProvider>
					<GestureHandlerRootView style={tw`flex-1`}>
						<BottomSheetModalProvider>
							<SafeAreaProvider>
								<StatusBar style="dark" />
								<AppRoutes />
							</SafeAreaProvider>
						</BottomSheetModalProvider>
					</GestureHandlerRootView>
				</CircleProvider>
			</LocationProvider>
		</AuthProvider>
	);
}