React Native with Expo : App Stuck on Loading Screen with BottomTabNavigator in Production APK

Question

I'm facing an issue with my React Native app which uses @react-navigation/bottom-tabs and @react-navigation/native-stack. The app functions perfectly in the emulator and with Expo in development mode. However, when I build the production APK and install it on a physical device, it gets stuck on the loading screen (splash screen).

Here's the relevant part of my code:

// Code snippet from StackNavigator.js
import { useEffect, useState } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
//Icons du menu en bas
import  Entypo  from "@expo/vector-icons/Entypo";
import AntDesign  from "@expo/vector-icons/AntDesign";
//Fonts
import * as Font from 'expo-font';
//Screens
import { HomeScreen } from "./screen/HomeScreen";
import { ActivityIndicator, Text } from "react-native";
import Poppins from "./assets/fonts/Poppins-Regular.ttf"
import { ContactScreen } from './screen/ContactScreen';


const StackNavigator = () => {
  const navTheme = {
    colors: {
      background: "transparent",
    },
  };

  const [fontsLoaded, setFontsLoaded] = useState(false);
  const [fontLoadError, setFontLoadError] = useState(false);

  //Chargement des fonts de l'application.
  useEffect(() => {
    let fontLoadTimeout;

    const loadFonts = async () => {
      try {
        await Font.loadAsync({
          'Poppins': Poppins,
          // Autres polices ici si nécessaire
        });
        setFontsLoaded(true);
      } catch (error) {
        console.error("Erreur de chargement des polices :", error);
        setFontLoadError(true);
      } finally {
        clearTimeout(fontLoadTimeout);
      }
    };

    fontLoadTimeout = setTimeout(() => {
      if (!fontsLoaded) {
        console.error("Timeout: Le chargement des polices a pris trop de temps.");
        setFontLoadError(true);
      }
    }, 5000); // Timeout après 5 secondes

    loadFonts();
  }, []);

  if (fontLoadError) {
    return <Text>Erreur de chargement des polices.</Text>;
  }

  if (!fontsLoaded) {
    return <ActivityIndicator size="large" color="#0000ff" />; 
  }

  const Tab = createBottomTabNavigator();
  const Stack = createNativeStackNavigator();

  //Menu en bas de l'écran du téléphone.
  function BottomTabs() {
    return (
      <Tab.Navigator
        screenOptions={{
          tabBarStyle: {
            height: 90,
            width: "100%",
            backgroundColor: "#8383e0",
            border:"none",
          },
        }}
      >
        {/* Accueil menu en bas de l'écran du téléphone. */}
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarLabel: "Accueil",
            headerShown: true,
            tabBarIcon: ({ focused }) =>
              focused ? (
                <Entypo name="home" size={40} color="#02A3FE" />
              ) : (
                <AntDesign name="home" size={40} color="white" /> 
              ),
            tabBarLabelStyle: {
              color: "white",
              fontSize: 13,
              fontFamily: "Poppins",
            },
          }}
        />
        <Tab.Screen
          name="Contact"
          component={ContactScreen}
          options={{
            tabBarLabel: "Contact",
            headerShown: false,
            tabBarIcon: ({ focused }) =>
              focused ? (
                <AntDesign name="contacts" size={40} color="#02A3FE" />
              ) : (
                <AntDesign name="contacts" size={40} color="white" />
              ),
            tabBarLabelStyle: {
              color: "white",
              fontSize: 13,
              fontFamily: "Poppins",
            },
          }}
        />
      </Tab.Navigator>
    );
  }

  return (
    <NavigationContainer theme={navTheme}>
      <Stack.Navigator>
        <Stack.Screen
          name="Main"
          component={BottomTabs}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default StackNavigator;

Dependencies:

"dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "expo": "~49.0.15",
    "expo-font": "~11.4.0",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.5"
  },

I tried running the app in development mode using Expo, where it worked fine. I expected the same behavior when running the production APK on a physical device. However, instead of loading the main screen after the splash screen, the app remains stuck on the splash screen indefinitely. I checked for potential issues with asynchronous tasks, such as font loading and network requests, but couldn't identify any obvious problems. I also ensured all dependencies were up to date and followed the React Navigation documentation for setting up BottomTabNavigator.

I'm looking for insights on why this issue occurs only when running the production APK on a physical device and how I might resolve it. Thank you!