Introduction

The first thing users encounter when launching your app is the splash screen. After tapping the app icon, the app opens, briefly displaying an image known as the splash screen. These screens typically feature the app's logo or visually appealing graphics, offering users a glimpse of what to expect. Splash screens are a common feature in mobile apps, enhancing the user experience during initialization and providing a sense of a seamless and responsive startup process.

In this example, we will be using the SplashScreen module from expo-splash-screen. This library aids developers in managing the lifecycle of the splash screen, offering simplified integration for both Android and iOS platforms, effectively prevents flashes of a blank and offers many more functionalities...

Step-by-Step Implementation

Start with new, empty project:

npx create-expo-app -t expo-template-blank-typescript splash-screen-example

Imagine you're developing a web application designed to track the moon's position, aptly named MO_ON. To get a glimpse of what your app's initial presentation will look like, check out this link for an example of the app's splash screen

Once you've downloaded the image, rename it to splash.png and place it in the assets folder of your newly created project. To begin testing, open the terminal on your computer, navigate to the project's directory, and launch the app on your device using the following command:

npx expo run:ios

At this moment, as you open the app, you should see your splash screen! Now, let's proceed to add the library using the command provided below:

npm install expo-splash-screen

Basic implementation of Splash Screen Management

Now, move to the App.tsx file and add some code:

import * as SplashScreen from 'expo-splash-screen';
import React, { useCallback, useEffect, useState } from 'react';
import { Text, View } from 'react-native';

const HIDE_DELAY = 5000;

// Prevent the splash screen from hiding initially
SplashScreen.preventAutoHideAsync();

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

  useEffect(() => {
    async function prepare() {
      try {
        // Simulate a delay to mimic a slow loading process (for demonstration purposes only)
        await new Promise((resolve) => setTimeout(resolve, HIDE_DELAY));
      } catch (e) {
        console.warn('An error occurred during preparation:', e);
      } finally {
        // Indicate that the app is ready to render its content
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      // Hide the splash screen only after the app is ready and the root view layout is completed
      // to avoid showing a blank screen during initial render
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    // Render nothing until the app is ready
    return null;
  }

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} onLayout={onLayoutRootView}>
      <Text>Welcome to the SplashScreen Demo! 👋</Text>
    </View>
  );
}

When you integrate this code into your app, you'll notice that the splash screen disappears after 5 seconds. This occurs because a timeout has been set in the useEffect hook, which controls the splash screen's visibility.

Conclusion

I think one of the best things you can do is add a little wait time or get data from the backend before showing the main screen. This way, we can make sure everything on the app looks right and ready just after the first screen goes away. This also lets us get screens ready for users with the right information already on them.

This helps make the app look smoother and nicer for users. It also gives developers a good opportunity to add new features to the app. More examples of using the expo-splash-screen library will be covered in upcoming articles, so stay tuned!