RnDanovinExpo/App.js

import { StyleSheet, View } from "react-native";
import { useFonts } from "expo-font";
// import AppLoading from "expo-app-loading";
import * as SplashScreen from "expo-splash-screen";
import Navigation from "./navigation/index";
import AlertModal from "./src/components/AlertModal";
import { Provider } from "react-redux";
import { store, persistor } from "./src/redux/store";
import React from "react";
import { PersistGate } from "redux-persist/integration/react";

const App = () => {
  const [appIsReady, setAppIsReady] = React.useState(false);
  let [fontsLoaded] = useFonts({
    light: require("./assets/fonts/Farsi/Light.ttf"),
    regular: require("./assets/fonts/Farsi/Regular.ttf"),
    bold: require("./assets/fonts/Farsi/Medium.ttf"),
    demi: require("./assets/fonts/Farsi/DemiBold.ttf"),
  });

  React.useEffect(() => {
    async function prepare() {
      try {
        // Keep the splash screen visible while we fetch resources
        await SplashScreen.preventAutoHideAsync();
        // Pre-load fonts, make any API calls you need to do here
        // Artificially delay for two seconds to simulate a slow loading
        // experience. Please remove this if you copy and paste the code!
        await new Promise((resolve) => setTimeout(resolve, 2000));
      } catch (e) {
        console.warn(e);
      } finally {
        // Tell the application to render
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);

  const onLayoutRootView = React.useCallback(async () => {
    if (fontsLoaded) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded]);

  if (!fontsLoaded) {
    return null;
  }

  return (
    <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <Navigation />
          <AlertModal />
        </PersistGate>
      </Provider>
    </View>
  );
};

const styles = StyleSheet.create({});

export default App;