Error: No native splash screen registered for given view controller. for react-native expo using expo-splash-screen

Question

Unhandled promise rejection: Error: No native splash screen registered for given view controller. Call 'SplashScreen.show' for given view controller first.

I get the following warning only on my ios emulator when I first launch the app. Not on my ios physical device or android emulator. I am using expo-splash-screen for my splash screen. Is this something I can just ignore or do I need to resolve it because I can't figure out how to resolve it. The splash screen seems to load fine. Is it an error with expo-splash-screen? I followed expo's tutorial on setting it up.

warning:

[Unhandled promise rejection: Error: No native splash screen registered for given view controller. Call 'SplashScreen.show' for given view controller first.]
at node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:103:50 in promiseMethodWrapper
at node_modules/@unimodules/react-native-adapter/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
at node_modules/expo-splash-screen/build/SplashScreen.js:23:17 in hideAsync
at node_modules/expo-splash-screen/build/SplashScreen.js:19:7 in hideAsync
at [native code]:null in callFunctionReturnFlushedQueue

index.js

import React, { useState, useEffect, useCallback } from 'react';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import { Asset } from 'expo-asset';
import AppLoading from 'expo-app-loading';

import Navigation from './config/Navigation';

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        // keep splash screen visible while we fetch resources
        await SplashScreen.preventAutoHideAsync();
        // Pre-load fonts, make any api calls here
        await Asset.loadAsync(require('../assets/IMG_0024.jpg'));
        // 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 app to render
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      // This tells the splash screen to hide immediately! If we call this after
      // `setAppIsReady`, then we may see a blank screen while the app is
      // loading its initial state and rendering its first pixels. So instead,
      // we hide the splash screen once we know the root view has already
      // performed layout.
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  onLayoutRootView();

  if (!appIsReady) {
    return <AppLoading />;
  }

  return <Navigation />;
}

app.json

{
  "expo": {
    "name": "name",
    "slug": "slug",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#fffffb"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["assets/images/*"],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFB"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

Answer 1

The problem is caused because u're using AppLoading, this component is currently having this bug on iOS.

You can solve this avoid using this component until the bug is resolved, an alternative is create a Screen like your Splashscreen and replace <AppLoading /> to <MyAwesomeSplashScreen />

... or in a ruder and lazy way (bad UX) just change <AppLoading /> to <View />