This tutorial is the first part of our implementation of the React Native eCommerce app. In the previous part, we successfully set up react-native 0.61 for the initial project. This part is the continuation of the same tutorial series where we are going to implement a Splash Screen for the iOS platform. So, for the implementation of Splash Screen in the Android platform it is highly recommended to go through the second part of this tutorial series.
As mentioned in the previous part, this tutorial series was inspired by the React Native Eccomerce template which enables us to develop powerful ready to deploy eCommerce applications that anyone can use to build eCommerce startups or sell the application templates. This part follows the coding implementations and designs from the Youtube video tutorial by Handlebar Labs for the Splash Screen in iOS. The video tutorial uses the old version of React Native and the required plugins. Here, we are going to use the same design and coding implementation for the splash screen but with the latest version of React Native and required plugins.
Overview
In this part, we are going to implement the Splash Screen for the iOS platform using the latest version of React Native and plugins. Most of the phases 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 accurately. 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 properly, there is already a default splash screen from react native project. But we are going to implement our own splash screen with an icon for our React Native eCommerce app.
Downloading Required Logo
For this tutorial series, we have the basket logo which we are going to place in the splash screen. The download link for the logo is provided below:
Imgur
Post with 1 views.
Note that developers can use any logo if they do not completely follow this tutorial series.
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 both on iOS as well as Android. 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
#react-native #reactjs #mobile-apps