Error: Cannot find native module 'ExpoSplashScreen in IOS', js engine: hermes

Question

I'm building a React native expo app. I am trying to use expo-splash-screen. On importing expo-splash-screen I'm getting an error stating:

ERROR  Error: Cannot find native module 'ExpoSplashScreen', js engine: hermes".

• I am using to call api routes then after that if its successful then splash screen.

• Also sometimes its showing this error also.

  Invariant Violation: "main" has not been registered. This can happen if: 
  * Metro (the local dev server) is run from the wrong folder. Check if Metro is 
  running, stop it and restart it in the current project. 
  * A module failed to load due to an error and "AppRegistry.registerComponent" 
  wasn't called., js engine: hermes 
  

• This error is for IOS part since Android part is working fine. It's happening when I am creating a development build for IOS and running

import React, { useEffect, useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import {
  useFonts,
  Inter_400Regular,
  Inter_600SemiBold,
  Inter_700Bold,
  Inter_800ExtraBold,
} from '@expo-google-fonts/inter';
import Loading from './src/components/Loading';
import { QueryClient, QueryClientProvider } from 'react-query';
import {
  NavigationContainer,
  NavigationProp,
  useNavigation,
} from '@react-navigation/native';
import { DashboardRoutes } from './src/routes/DashboardRoutes';
import { AuthRoutes } from './src/routes/AuthRoutes';
import useAuthenticatedStore from '@stores/useAuthenticatedStore';
import { deleteToken, getToken, getUser } from '@storage/token';
import * as SplashScreen from 'expo-splash-screen';
import { AuthStackParamList } from 'src/types/types';
import { navigationRef } from './src/routes';
import Toast, {
  BaseToast,
  ErrorToast,
  SuccessToast,
} from 'react-native-toast-message';
import { jwtDecode } from 'jwt-decode';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

const queryClient = new QueryClient();

const toastConfig = {
  success: (props: any) => (
    <SuccessToast
      {...props}
      style={{ borderLeftColor: 'green' }}
      contentContainerStyle={{ paddingHorizontal: 15 }}
      text1Style={{
        fontSize: 15,
        fontWeight: '400',
      }}
    />
  ),
  error: (props: any) => (
    <ErrorToast
      {...props}
      text1Style={{
        fontSize: 17,
      }}
      text2Style={{
        fontSize: 15,
      }}
    />
  ),
};

const AppNavigation = () => {
  const { isAuthenticated, setUser, setIsAuthenticated, setProfilePictureUrl } =
    useAuthenticatedStore();
  console.log('isAuthenticated', isAuthenticated);

  let expiry: boolean | undefined;

  useEffect(() => {
    console.log('AppNavigation useEffect');
    async function prepare() {
      const token = await getToken();
      if (token) {
        expiry = await getUser();
      }
      console.log('expiry', expiry);
      try {
        if (token) {
          console.log('token before me api call', token);
          const url = //apicall here;
          const res = await fetch(url, {
            method: 'GET',
            headers: {
              Accept: 'application/json',
              Authorization: `Bearer ${token.trim()}`,
            },
          });
          const data = await res.json();
          console.log('data', data);
          setUser({
            email: data.email,
            name: data.name,
          });
          setProfilePictureUrl(data.profile_picture_url as string);
          setIsAuthenticated(true);
        }
      } catch (e) {
        if (token && expiry === true) {
          await deleteToken();
          setUser(null);
        }
      }
    }

    prepare();
  }, [isAuthenticated, expiry]);

  return null;
};

export default function App() {
  const [isReady, setIsReady] = useState(false);
  const [fontsLoaded] = useFonts({
    Inter_400Regular,
    Inter_600SemiBold,
    Inter_700Bold,
    Inter_800ExtraBold,
  });
  const { user } = useAuthenticatedStore();
  useEffect(() => {
    SplashScreen.preventAutoHideAsync().finally(() => setIsReady(true));
  }, []);

  useEffect(() => {
    if (isReady && fontsLoaded) {
      SplashScreen.hideAsync();
    }
  }, [isReady, fontsLoaded]);

  console.log('User', user);
  console.log('isReady', isReady);

  if (!isReady || !fontsLoaded) {
    return <Loading />;
  }

  return (
    <QueryClientProvider client={queryClient}>
      <NavigationContainer ref={navigationRef}>
        <GestureHandlerRootView style={{ flex: 1 }}>
          <AppNavigation />
          {user ? <DashboardRoutes /> : <AuthRoutes />}
          <Toast config={toastConfig} />
          <StatusBar style="dark" translucent />
        </GestureHandlerRootView>
      </NavigationContainer>
    </QueryClientProvider>
  );
}