Using auto live updates with the Capacitor Splash Screen plugin

Using the Splash Screen plugin in conjunction with auto live updates requires a specific configuration in order to ensure that the splash screen a) does not render indefinitely, and b) is dismissed only after the update is either fetched or confirmed unavailable.

The splash screen plugin must have launchAutoHide disabled in capacitor.config.ts:

  plugins: { 
    SplashScreen: { 
      launchAutoHide: false, 
    }, 
  },

The main app component must execute SplashScreen.hide() upon receiving the deviceready signal. In React, this can be achieved by setting an event listener inside a useEffect hook in the App.tsx file.

  useEffect(() => { 
    // Create a function to register with the event. It hides the splash screen. 
    const onDeviceReady = () => SplashScreen.hide(); 

    // When `deviceready` fires, call `onDeviceReady` to hide the splash screen. 
    document.addEventListener('deviceready', onDeviceReady); 

    // When the component unmounts, remove the event listener 
    return () => { 
      document.removeEventListener('deviceready', onDeviceReady); 
    }; 
  }, []);

After adding these two changes, auto live updates should be ready to go. Note that a new native build is required for the changes to take place.