Workaround expo react native web splashscreen

Question

Is there any existing workaround to show a splashscreen on web? It is not yet supported, and I'd like to avoid seeing a white screen while loading the website.

Ref.: https://docs.expo.io/versions/v41.0.0/sdk/splash-screen/

Known issue on github: https://github.com/expo/expo/issues/10839

Answer 1

I tested (and use) it with SDK 47 and adapted the example on https://docs.expo.dev/versions/latest/sdk/splash-screen/#usage like this (I simplified some components and functions here for better readability, so this example never "run" like this in reality):

import React, { useEffect, useState } from 'react';
import { Text, View, Platform } from 'react-native';
import Entypo from '@expo/vector-icons/Entypo';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import { runAllTheInitStuff } from './init';
import SomeProvider from './SomeProvider';
import AnotherProvider from './AnotherProvider';
import WebSplashScreen from './WebSplashScreen';

// Keep the splash screen visible while we fetch resources
SplashScreen.preventAutoHideAsync();

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

  useEffect(() => {
    async function prepare() {
      await runAllTheInitStuff();
      // Tell the application to render
      setAppIsReady(true);
      // hide splash screen
      await SplashScreen.hideAsync();
    }

    prepare();
  }, []);

  // check if app is ready
  if(!appIsReady) {
    // check if we are in web
    if(Platform.OS === 'web') {
      return <WebSplashScreen />;
    } else {
      return null;
    }
  }

  return (
    <SomeProvider>
      <AnotherProvider>
        <View
          style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>SplashScreen Demo! 👋</Text>
          <Entypo name="rocket" size={30} />
        </View>
      </AnotherProvider>
    </SomeProvider>
  );
}

I do not use a <View> component as first entry point, but a lot of provider, so it would be quite challenging to use onLayout prop in my case. That's the reason why hiding the splash screen is done directly in the useEffect hook...

The WebSplashScreen component can be anything (i.e. the splash screen used in mobile app as image or what ever), I use a simple activity indicator from a material ui library...