#4 - React Native Splash Screen | React Native open-source eCommerce App

Summary

In this tutorial, users are guided through adding splash screens to both iOS and Android apps. For iOS, the steps include modifying the default splash screen in Xcode, adding an image, and using a library to hide the splash after the app loads. For Android, the tutorial covers creating a new splash activity, adjusting the manifest, and setting up drawable resources for the splash screen. Both platforms focus on customizing the appearance, scaling images based on screen size, and ensuring the splash screens work seamlessly across devices.

Takeaways

• 😀 Modify the iOS splash screen by changing the background to black and adding a custom image in the Launch Screen storyboard.
• 😀 Ensure the splash image fits the screen width and scales based on the device's screen size in Xcode.
• 😀 Add the splash screen image to the Assets folder in Xcode and rename it to 'splash'.
• 😀 Install a splash screen library for iOS (optional) and import it into the AppDelegate file.
• 😀 Use `useEffect` in your React/React Native app to hide the splash screen after the main component is mounted.
• 😀 When testing the iOS splash screen, uninstall the app from the simulator if changes don't appear immediately.
• 😀 For Android, create a new Splash Activity in Android Studio and update the AndroidManifest.xml to include it.
• 😀 In Android Studio, set the splash screen style using a custom theme with a black background and the splash image.
• 😀 Add the splash image to the Android project's drawable resources and use a `LayerList` in `splash_background.xml`.
• 😀 Modify the Android MainActivity to reference the splash screen theme and ensure compatibility with API level 21 or higher.
• 😀 Create a layout file for the splash screen in Android with a `LinearLayout` and reference it in the manifest.

Q & A

What is the first step in adding a splash screen to an iOS app?

The first step is to modify the default iOS splash screen in the `LaunchScreen.storyboard` in Xcode. You need to remove any unnecessary text, set a black background, and prepare the screen for an image.

How do you center an image on the iOS splash screen?

To center the image on the iOS splash screen, you add an `ImageView` to the `LaunchScreen.storyboard`, set the image to fill the width, and position it as a square in the center of the screen.

What library is used in the iOS splash screen setup, and what is its purpose?

The `react-native-splash-screen` library is used to handle the display and hiding of the splash screen. It helps manage the splash screen visibility and allows you to hide it once the app has fully loaded.

What is the role of the `useEffect` hook in hiding the iOS splash screen?

The `useEffect` hook is used to trigger the hiding of the splash screen when the app component is mounted. It runs once, immediately after the component is loaded, and calls a method to hide the splash screen.

What is the significance of testing the splash screen in the iOS simulator?

Testing the splash screen in the simulator ensures that the splash screen behaves as expected—appearing when the app is launched and disappearing once the component is mounted. It's important to clear any previous app instances to ensure the changes are picked up correctly.

How do you implement a splash screen in Android Studio?

In Android Studio, you implement a splash screen by creating a new splash activity, modifying the AndroidManifest.xml to register the activity, and defining a layout for the splash screen in XML with a black background and image.

What do you need to do in the `AndroidManifest.xml` for the splash screen to work?

You need to add the splash activity to the `AndroidManifest.xml` and ensure that the `exported` attribute is set to true for the splash activity. Additionally, you must remove the intent filter from the main activity.

What XML resources are involved in configuring the splash screen for Android?

For Android, you configure the splash screen by creating a `styles.xml` file to set the background color and adding the splash image in the `drawable` folder. You also define a `launch_screen.xml` layout with the appropriate root element and image settings.

What is the required minimum SDK version for the splash screen functionality in Android?

The minimum SDK version required for the splash screen functionality is API level 21. If the app targets lower versions, you must override resources to ensure the splash screen works properly.

What is the final step after configuring the splash screen on both iOS and Android?

The final step is to build and run the app on both iOS and Android simulators/emulators to test that the splash screen displays correctly, and hides after the app is fully loaded and the main component is mounted.