2

2

By Krissanawat Kaewsanmuang Following Unfollow Follow   19,298 November 9, 2020 Following Unfollow Follow

Category:

JavaScript

React

React Native

React Native Lessons

Build Real-world React Native App #1: Splash screen and App Icon

In the first step, we are going to implement the Splash Screen using the latest version of React Native and plugins. Major steps in this tutorial are going to take place in Xcode as we need to configure the iOS part of the app for displaying the Splash Screen. The idea is to add the required splash screen icons and configure the native iOS app directory in the Xcode. We are going to make use of the react-native-splash-screen package in the React Native part as well as the iOS part to display the splash screen transition. Most of the work takes place in Xcode for configuring the splash screen and only some minor part is for the react-native side.

If we realize, there is already a default splash screen from react native project. But we are going to implement our own splash screen with our own logo icon for my site. For now, we have just put some text on the splash screen which is displayed in the emulator simulation below:

Generate Icon

Here download the logo from this link first  we use this for build icon

App icon

Then go to  makeappicon drop file then fill email wait for file coming to an inbox

Make app icon site

Now we got icon set for Android and iOS in this one time

Generate icon set for android and ios

Icon and splash screen for iOS

In this step, we are going to configure the app in Xcode in order to integrate the splash screen. First, we need to open our project on Xcode as shown in the screenshot below:

use terminal in VsCode for open Xcode project by this command:

After opening Xcode, we need to add an app icon to Xcode project as directed in the screenshot below:

Add app icon to xcode project

Next, we need to open the folder ./images.xcassest. Then, we need to choose AppIcon and replace the default icon with our new icon. Now, if we re-built our app, we will be able to see the new app icon as demonstrated in the screenshot below:

Change app icon

Update new splash screen

For the splash screen, we use the app icon that we downloaded earlier to generate an image set. We need to go to the Image Sets tab and drop the image. Lastly, we need to click generate to generate the image set as shown in the screenshot below:

Use app icon for splash screen

Now, we have the new image set for splash screen.

Back to Xcode, we need to select + in this top and choose New Image Set. We can name it as SplashScreen:

Add image set to xcode

Then, we need to drop new image set as directed in the screenshot below:

Use app icon in splash screen

Next, we need to open LunchScreen.xib and replace old text as shown in the screenshot below:

Build splash screen in xcode

Then, we need to add new Image View as directed in the screenshot below:

Add image view for build splash screen

Next, we need to choose the image set that we created before as shown in the highlighted section below:

Add app icon to splash screen

Lastly, we need to adjust the icon and splash screen size.

Autoresizing

We need to make the image responsive to the screen size. For that, we need to follow the image below:

Make logo auto resize base on device

Finally, we are done with setting a new splash screen. We can rebuild the app to see the new splash screen:

Final result splash screen in iOS

Icon and Splashscreen for Android

For the Android platform, we are going to use the same image set generated from makeappicon to create the App icon and Splash screen:

Generate app icon to android

First, we need to replace old icons folder with new icons sets as directed in the screenshot below:

App icon directory in android project

Now if we rebuild the app, we will see the new icon as depicted in the screenshots below:

Next, we need to copy the code from the code snippet below and paste it into the background_splash.xml file:

For splash screen, we need to create the file named background_splash.xml in the location shown by the screenshot below:

backgroud_splash location

Next, we need to copy the code from the code snippet below and paste it into the background_splash.xml file:

Next, we need to create the file named colors.xml in folder ./values. The full path to where the file should be created is shown in the image below:

color.xml path

Inside the file, we need to define the color values as shown in the code snippet below:

Next, we need to open styles.xml inside the same folder where we created the colors.xml file. Then, we need to configure the status bar color by using the code from the code snippet below:

Now with colors and styles configured, we need to create a new file named launch_screen.xml inside the layout folder:

lunch_screen.xml

Inside the file, we need to add the code from the code snippet below:

To activate the splash screen, we need to create a new activity file named SplashActivity.java. The file should be created in the located directed by the screenshot below:

SplashActivity.java

Inside the activity file, we need to add the code from the following code snippet:

Next, we need to open AndroidManifest.xml file which is located as shown by the image below:

AndroidManifest.xml path

Here, we need to configure the SplashActivity.java file. For that, we need to add the new activity inside the application element as shown in the code snippet below:

Last thing in MainActivity.java we import SplashScreen package that got from command react-native link

Now if we re-run the app, we will see the splash screen in the Android emulator or device:

Splash screen on Android

Using React Native Splash Screen

Lastly, we need to close the splash screen as well. We need to do that from the React Native environment using the package called react-native-splash-screen. This package will help us hide the splash screen. Hence, we need to install the package first by running the following command in our project terminal:

For iOS, we need to run the following commands:

Now, in the index.js file, we need to SplashScreen component from from ‘react-native-splash-screen’ package:

Then, by using the useEffect hook or alternatively componentDidmount in the class component. we need to call the hide function to hide the Splash screen once the React Native app loads as shown in the code snippet below:

Finally, we have successfully integrated a splash screen and app icon from both Android and iOS platforms.

Conclusion

This chapter was all about integrating the app icon and splash screen for both Android and iOS platforms. The tutorial mostly focuses on icon generation and native codes rather than React Native code. Integrating the app icon and splash screen makes the app look professional.

In the next chapter, we will implement the foundation of any React Native app which is React Navigation.

All the code is available on Github.

About the author

Krissanawat Kaewsanmuang

Registered 09-12-2019 | Last seen 3 years ago 79

3 Comments | 32 Publications