https://medium.com/javascript-in-plain-english/how-to-handle-and-design-the-startup-of-a-react-application-da779f3727e5

App.tsx

import { Splashscreen } from "@images";
import AppLoader from "@modules/app/AppLoader";
import { LoadingProcess } from "@modules/app/types";
import AppNavigator from "@modules/navigation/AppNavigator";
import { CountrySelectionStatus } from "@modules/onboarding/types";
import _ from "lodash";
import React from "react";
import styled from "styled-components/native";

import { useFavoriteCountry } from "@modules/app/hooks/useFavoriteCountry";

function App() {
  // … others import
  const userFavoriteCountryContext = useFavoriteCountry();

  // As long as not all screens are ready, display splashscreen
  const loadingProcesses: LoadingProcess[] = [
    { name: "user_favorite_country", isReady: userFavoriteCountryContext.favoriteCountry !== CountrySelectionStatus.Loading },
  ];

  return (
    <AppLoader
      mandatoryProcesses={loadingProcesses}
      loadingComponent={<SplashImage source={Splashscreen.Default} />}
      minimumLoadingTime={__DEV__ ? 0 : 2000}
    >
      <AppNavigator />
    </AppLoader>
  );
}

const SplashImage = styled.Image`
  height: 100%;
  width: 100%;
`;

export default App;