4

Im developing my first React Native app with Expo and are having some troubles with the splash screen.

In my app.json I have set the following under expo:

{
  "expo": {
    "name": "my-iOS-Android-app",
    "slug": "my-iOS-Android-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "backgroundColor": "#C808F9"
    },
    "owner": "linus",
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "my.test.app"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

I have followed the guide on Expo´s website and this is my code:

useEffect(() => {
    async function prepare() {
      try {
        await SplashScreen.preventAutoHideAsync();
        let data = await fetchData();
        await new Promise(resolve => setTimeout(resolve, 8000));
        setData(data);
      } catch (e) {
        console.warn(e);
      } finally {
        setAppIsReady(true);
      }
    }

    prepare();
    // initSorting();
  }, [])

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

As you can see I have added an 8 second timeout. The purple screen pops up while expo is downloading the code to my phone, then a blank screen is seen for 8 seconds. Im using an iOS device for the testing.

Can someone explain what Im doing wrong? Or have I misunderstood the purpose of expos´s splash screen?

Thanks!

linus
  • 41
  • 1
  • 4
  • Can you show the whole `app.json` file? We should make sure you have that setting in the `expo` config block. Also, what platform is this on? The docs for splash screen have a small note that changes to the app manifest register differently across Android/iOS: https://docs.expo.dev/guides/splash-screens/ – Tyler Williams Feb 15 '22 at 21:08
  • @TylerWilliams I have updated my post! Im using an iPhone 13 Pro. – linus Feb 15 '22 at 21:54
  • Hmm, are you using Expo Go? I'm having the same issues in Expo Go + Expo Snacks. This comment in a different question suggests maybe Splash screen doesn't work in Expo Go, and you may have to try it out in the simulator on its own: https://stackoverflow.com/a/69289654/12502416 – Tyler Williams Feb 15 '22 at 22:52
  • @TylerWilliams Yes, Im using Expo Go. Ok I will try it out on a simulator. Otherwise, would it be a good practise to return a custom splash screen while ```appIsReady == false```? Right now I have a custom splash screen as the initial route in my Drawer Navigator and Im not sure whether this is ok or not. – linus Feb 16 '22 at 18:31
  • I don't think you're supposed to use the custom splash screen approach, based on the docs here. I haven't done it myself, but it may be one of those scenarios where doing it the "wrong" way is good enough and solves your problem. Let me know if the simulator works and maybe we can add an updated answer to your question. – Tyler Williams Feb 16 '22 at 19:08
  • @TylerWilliams So I uploaded the app to Testflight (I guess this would have the same outcome as a simulator?) but got the same problem. A purple screen for about 1 second and then a blank screen. – linus Feb 18 '22 at 20:38
  • Dang, that's so weird. Maybe see if using the custom splash screen fixes this? Looking at the app I primarily work on, we do something like that (ours is a lot more convoluted so it's hard to compare apples-to-apples here) – Tyler Williams Feb 18 '22 at 20:53
  • @TylerWilliams Yes I will probably try that out. Right now I return a custom splash screen component instead of null when ```!appIsReady```. I have removed everything with "splash" in my app.json. Seems to work as I want so far, except for that millisecond the screen is blank before my custom splash screen loads in. Hopefully that is just when Expo is loading the app... Anyway, thanks for your help, appreciate it! – linus Feb 18 '22 at 21:56
  • Hopefully someone can come in here and clear it up for the both of us, haha. I will keep an eye on this post. Good luck out there. – Tyler Williams Feb 18 '22 at 22:00

0 Answers0