App.tsx

import React, { useEffect } from "react";
import { Text, ActivityIndicator, View } from "react-native";
import { ThemeProvider } from "./src/contexts/ThemeContext";
import HomeScreen from "./src/screens/HomeScreen";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import {
  useFonts,
  JosefinSans_400Regular,
  JosefinSans_700Bold,
} from "@expo-google-fonts/josefin-sans";
import { ConvexProvider } from "convex/react";
import { convex } from "./src/utils/convexClient";
import { FilterProvider } from "./src/contexts/FilterContext";

export default function App() {
  const [fontsLoaded] = useFonts({
    JosefinSans_400Regular,
    JosefinSans_700Bold,
  });

  // Apply global font once fonts load
  useEffect(() => {
    if (fontsLoaded) {
      const TextRender = (Text as any).render;
      (Text as any).render = function (...args: any[]) {
        const origin = TextRender.apply(this, args);
        return React.cloneElement(origin, {
          style: [{ fontFamily: "JosefinSans_400Regular" }, origin.props.style],
        });
      };
    }
  }, [fontsLoaded]);

  // Simple loader while fonts are loading
  if (!fontsLoaded) {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: "#fff",
        }}
      >
        <ActivityIndicator size="large" color="#5596FF" />
      </View>
    );
  }

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ConvexProvider client={convex}>
        <ThemeProvider>
          <FilterProvider>
            <HomeScreen />
          </FilterProvider>
        </ThemeProvider>
      </ConvexProvider>
    </GestureHandlerRootView>
  );
}