2
import React from "react";
import AppLoading from "expo-app-loading";

export default function App() {
    return <AppLoading />;
}

Isn't the above code supposed to show the splash screen to me? All I get is a white screen. Would really appreciate knowing what I did wrong here. I have splash.png in my assets folder.

My app.json file:

{
  "expo": {
     ...
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#e2fcff"
     },
     ...
  }
}
alpha_ulrich
  • 536
  • 5
  • 21

2 Answers2

1

The code you have shown looks fine. However, there's more to it.

It's quite unclear to me what is actually supposed to work and not. For me, who runs a custom-managed workflow, AppLoading works when I prebuild android/ios and run the standalone app. When I run in Expo Go app I simply see a blank screen instead of the splash screen.

People have discussed if AppLoading works in bare workflow and according to Expo's sdk it should. It also works for me with a prebuild, so bare workflow is supported (in Expo SDK 42).

I have seen no mentions about showing a splash screen within the Expo Go app though, so can't tell whether that is supported or not.

And then web... Once again, not sure if it should work or not - it doesn't for me. It shows a blank page while loading. And in the fonts guide there is an Expo snack which uses AppLoading that shows a splash screen on Android but merely a blank page on web. The AppLoading docs claims it has support for web. If that means it won't crash, or actually display a splash screen image is left untold. The AppLoading docs further claims it uses SplashScreen to show the splash screen, which doesn't have web support. So, I suppose there's nothing such a splash screen for web (which wouldn't surprise me, because splash screens are uncommon on web).

Personally, I'm fine with Android/iOS support for standalone apps. I only use Expo Go for testing. Furthermore, the splash screen I will use for mobile devices won't work well on web anyway. The skeleton I will show won't look the same as the web version, so I would rather implement at custom splash screen for web.

Summary for AppLoading support:

  • Managed and bare workflow are both supported.
  • It works on standalone apps.
  • Not sure if it will display the splash screen in Expo Go app.
  • Web appears to fallback to displaying a blank page.

If I'm wrong somewhere, or if someone knows if AppLoading works in Expo Go App, please fill me in!

Dennis Persson
  • 843
  • 7
  • 23
0

App loading documentation In the documentation, it says that you need to provide additional arrugments

export default function App() {

  const [isLoading, setLoading] = useState(true);

  if (isLoading) {
   return(
    <AppLoading 
      startAsync={() => console.log('starting')}
      onFinish={() => { setTimeout(() => {setLoading(false)}, 1000) }}
      onError={(err) => {console.log(err)}}
    />
   )
  }

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}
Aakash Rathee
  • 523
  • 3
  • 17