App.js

import React, { useEffect, useState } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import DrawerContent from "./drawers/DrawerContent";
import MainStack from "./drawers/MainStack";
import * as Font from "expo-font";
import * as SplashScreen from "expo-splash-screen";
import { Text, TextInput } from "react-native";
import AppStyles from "./AppStyles";

SplashScreen.preventAutoHideAsync();

const Drawer = createDrawerNavigator();

const App = () => {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    const loadFonts = async () => {
      await Font.loadAsync({
        "Montserrat-Medium": require("./assets/fonts/Montserrat-Medium.ttf"),
        "Montserrat-Bold": require("./assets/fonts/Montserrat-Bold.ttf"),
      });
      setFontsLoaded(true);
      SplashScreen.hideAsync();
    };

    loadFonts();
  }, []);

  if (!fontsLoaded) {
    return null;
  }

  Text.defaultProps = Text.defaultProps || {};
  Text.defaultProps.style = AppStyles.text;

  TextInput.defaultProps = TextInput.defaultProps || {};
  TextInput.defaultProps.style = AppStyles.textInput;

  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerContent={(props) => <DrawerContent {...props} />}
        screenOptions={{
          drawerType: "front",
          headerShown: false,
          swipeEnabled: false,
          overlayColor: "#00000060",
          drawerStyle: {
            backgroundColor: "#131111",
            width: 250,
          },
        }}
      >
        <Drawer.Screen name="MainStack" component={MainStack} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;