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

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

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.

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

App icon

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

Make app icon site

Make app icon site

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

Generate icon set for android and ios

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:

xed ios/kriss.xcodeproj

1

xed ios/kriss.xcodeproj

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

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

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

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

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

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

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

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

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

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

Final result splash screen in iOS

react-native mobile-apps programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

A Short Guide to React Native App Development

React Native is undoubtedly one of the most widely used cross-platform frameworks for creating native-like apps. This framework can be easily used for developing brand-new apps from scratch and even in existing iOS or Android projects.easily used for developing brand-new apps from scratch and even in existing iOS or Android projects.