App.tsx

import "react-native-gesture-handler";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { NativeBaseProvider, Box } from "native-base";
import React, { useState, useEffect, useCallback } from "react";
import { View, Platform } from "react-native";
import { Provider as PaperProvider } from "react-native-paper";
import { Provider as ReduxProvider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
// import root navigator
import useCachedResources from "./src/hooks/useCachedResources";
import RootNavigator from "./src/navigation";
// importing screens
import SplashScreenWeb from "./src/screens/SplashScreen.web";
// importing services
import { store, persister } from "./src/services/redux/index";
import { CombinedDarkTheme } from "./src/services/themes";

export default function App() {
  const isAppReady = useCachedResources();

  // make sure the splash screen doesn't auto hide
  // also remember `expo-splash-screen` is not supported by web
  useEffect(() => {
    (async () => {
      try {
        await SplashScreen.preventAutoHideAsync();
        // we can also load required assets here like initial API requests, fonts, etc.
      } catch (err) {
        console.log(err);
      } finally {
      }
    })();
  }, []);

  // use a onLayout callback to avoid flicker when transitioning from splash to rendered app
  const onLayout = useCallback(async () => {
    if (isAppReady) {
      await SplashScreen.hideAsync();
    }
  }, [isAppReady]);

  if (!isAppReady) {
    if (Platform.OS === "web") {
      return <SplashScreenWeb />;
    }
    return null;
  }

  return (
    <NativeBaseProvider>
      <View onLayout={onLayout} style={{ flex: 1 }}>
        <ReduxProvider store={store}>
          <PersistGate loading={false} persistor={persister}>
            <PaperProvider theme={CombinedDarkTheme}>
              <StatusBar style="auto" />
              <RootNavigator />
            </PaperProvider>
          </PersistGate>
        </ReduxProvider>
      </View>
    </NativeBaseProvider>
  );
}