Build WordPress Client App with React Native #22 : Splash Screen on iOS

This series intends to show how I build app to serve content from my WordPress blog by using react native. Since, my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme , offline mode, infinite scroll and many more. You can discover much more in this series.this inspiration to do this tutorial series came from the React Native App Templates from instamobile

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

In this last chapter, 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 our React Native Food Delivery App App UI clone project. For now, we have just put some text on the splash screen which is displayed in the emulator simulation below:

Downloading Required Logo

For this tutorial series, we have the Scooter logo icon which we are going to integrate into the splash screen. The download link for the logo is provided below:

for generate image use this tools

Installing Splash Screen package

Here, we are going to install the react-native-splash-screen package into our project. The react-native-splash-screen package provides us with a splash screen API for react-native which can programmatically hide and show the splash screen. This package works for both iOS as well as Android platforms. All the configuration for the React Native part as well as the native part is provided in the documentation. Now, to install the package, we need to use the following command:

yarn add react-native-splash-screen

for iOS

cd ios ; pod install

Configuring Splash Screen in Xcode

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:

Then, we need to rename the new image set as SplashScreen. Next, we need to add our app logo images to the SplashScreen image set as shown in the screenshot below:

Now, we need to open ‘LaunchScreen.xib’ file where we can find our default splash screen as shown in the screenshot below:

As we can see, all the default setups are shown in the right configuration panel of Xcode.

Next, we need to add our app logo by clicking on the Image View button in the image as shown in the screenshot below:

Next, we need to add the SplashScreen image set to the Image View tab of the right panel. The SplashScreen image is to be added to the Image field as shown in the screenshot below:

Hence, we will get our app logo into our UIImageView. Now, we can shape the size of the logo from the above screen. Therefore, we have successfully completed the styling of the splash screen.

Next, we need to add the react-native-splash-screen package to the Xcode.

Activating splash screen in Xcode

Here, we are going to integrate the  react-native-splash-screen  into our Xcode ios project. For that, we need to go to:

node_modules  ➜  react-native-splash-screen  ➜ ios

Then, we need to add **SplashScreen.xcodeproj**file to it as shown in the screenshot below:

Next, we need to go to: Build Settings → Search Paths → Header Search Paths of the Xcode and add the following path:

$(SRCROOT)/../node_modules/react-native-splash-screen/ios

The visual representation of this step is highlighted in the screenshot below:

Lastly, we need to import the react-native-splash-screen package into the Appdelegate.m file and activate the splash screen. Here, the package is imported as RNSplashScreen.h. Now, to trigger the splash screen, we need to add [RNSplashScreen show] at the position as shown in the code snippet screenshot below:

Lastly, we need to import the react-native-splash-screen package into the Appdelegate.m file and activate the splash screen. Here, the package is imported as RNSplashScreen.h. Now, to trigger the splash screen, we need to add [RNSplashScreen show] at the position as shown in the code snippet screenshot below:

Now, if we re-run our project in the emulator, we will get the following result:

Summary

In this chapter, we learned how to set up the splash screen to both the iOS and Android platforms. In the iOS platform, we got the step-wise guidance of how to set up the splash screen by using the Xcode tool.

Also published on Medium.