App.tsx

// Import necessary dependencies
import React, { useEffect, useState } from "react";
import { View } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import * as Font from "expo-font";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import ExpoClientConfig from "expo-constants";
import * as Sentry from "sentry-expo";
import { Provider } from "react-redux";
import { enableScreens } from "react-native-screens";

import AppNavigator from "./app/navigation/Navigator/AppNavigator";
import store from "./app/redux/store";

// Ignore TypeScript error for the next line
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
// Get the release version from Expo config, or use "0.0.0" as default
const release = ExpoClientConfig.revisionId || "0.0.0";

// Initialize Sentry for error tracking in non-development environments
if (!__DEV__) {
  Sentry.init({
    dsn: process.env.SENTRY_DSN,
    enableInExpoDevelopment: false,
    debug: true,
    release,
  });
}

// Define the main App component
const App: React.FC = () => {
  // Enable screens for better performance in React Navigation
  enableScreens();

  // State to track whether fonts are loaded
  const [ready, setReady] = useState(false);

  // Use effect hook to load fonts when component mounts
  useEffect(() => {
    Promise.all([
      Font.loadAsync({
        ...Ionicons.font,
        ...MaterialCommunityIcons.font,
        "Lato-Black": require("./assets/fonts/Lato-Black.ttf"),
        "Lato-Bold": require("./assets/fonts/Lato-Bold.ttf"),
        "Lato-Light": require("./assets/fonts/Lato-Light.ttf"),
        "Lato-Medium": require("./assets/fonts/Lato-Regular.ttf"),
      }),
    ])
      .then(() => {
        // Set ready state to true when fonts are loaded
        setReady(true);
      })
      .catch((error) => {
        // Capture any errors during font loading
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        Sentry.captureException(error);
      });
  }, []); // Empty dependency array ensures this effect runs only once

  // Initialize body with an empty View
  let body = <View />;

  // If fonts are loaded, render the main app content
  if (ready) {
    body = (
      <Provider store={store}>
        {/* AppNavigator is rendered regardless of __DEV__ status */}
        {__DEV__ ? (
          <AppNavigator />
        ) : (
          <AppNavigator />
        )}
      </Provider>
    );
  }

  // Return the main app structure
  return (
    <SafeAreaProvider>
      <StatusBar style="dark" />
      {body}
    </SafeAreaProvider>
  );
};

// Export the App component as default
export default App;