Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024

React Native splash Screen

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

The splash screen, also known as the launch screen, is the initial screen a user sees when they open your app and remains visible while it loads. The splash screen is the initial screen that the user sees before they can access the rest of the features of your application.

Creating a splash screen in React Native has numerous advantages. It's used when an app needs to know something vital before it can start; for example, it must determine whether the user is authorized and which screen to display. It would be best to show a loader while the user waits for the app to initialize. Showing a loader as soon as the app starts helps you present an ordered, well-designed display to the user.


Click on the following link to read further: Hooks in React JS

Creating a splash screen (Android):

  • Download
npm i react-native-splash-screen
  • Plugin Install
react-native link react-native-splash-screen
  • Adding an image to the splash screen
    Customize your launch screen by creating an image for your splash screen and name it "splash.png" (you can choose any name of your choice, but for the sake of understanding, we will refer to the image as "splash.png" in this tutorial)
    Go to android/app/src/main/res. There you will find minmap folders. 
    drawable-ldpi
    drawable-mdpi
    drawable-hdpi
    drawable-xhdpi
    drawable-xxhdpi
    drawable-xxxhdpi
    Add "splash.png" to all minmap folders.
  • Make a folder called drawable in the android/app/src/main/res directory. Create a “background_splash.xml” file within that folder. Add the following code snippet to the file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item
 android:drawable="@mipmap/splash"
 android:gravity="fill" />
</layer-list>
  • Inside android/app/src/main/res directory, create a folder named “layout”(if doesn’t exist already). Inside that, create a file named “launch_screen.xml”. Add the following code snippet to the file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@drawable/background_splash"
/>
  • Go to res/values/styles.xml and add:
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
 <item name="android:windowBackground">@drawable/background_splash</item>
</style>
  • To make your “AndroidManifest.xml” look like this, edit it:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.splashexample">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
         <activity
         android:name=".SplashActivity"
         android:theme="@style/SplashTheme"
         android:label="@string/app_name">
         <intent-filter>
           <action android:name="android.intent.action.MAIN" />
           <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
        <intent-filter>
           <action android:name="android.intent.action.MAIN" />
           <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>
    </application>
</manifest>
  • Create "SplashActivity.java" in main/java/com/{your_package_name}
package com.splashexample; //change your package name
import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
public class SplashActivity extends AppCompatActivity {
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         Intent intent = new Intent(this, MainActivity.class);
         startActivity(intent);
         finish();
     }
}
  • In the “MainActivity.java” file:
package com.splashexample; // change package name
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // add this
import android.os.Bundle; // add this
public class MainActivity extends ReactActivity {
  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override                                             // add this
  protected void onCreate(Bundle savedInstanceState) {  // add this
    SplashScreen.show(this);                            // add this
    super.onCreate(savedInstanceState);                 // add this
  }                                                     // add this
  @Override
  protected String getMainComponentName() {
    return "splashexample";
  }
}
  • Go to App.js in the src folder.

import SplashScreen from 'react-native-splash-screen' at top of the file;

Inside the App function add useEffect (Make sure to import it)

useEffect(() => {
   SplashScreen.hide();
 }, [])
  • Type in the terminal:
react-native run-android
  • Your splash screen is ready. Enjoy it.

Also see,  React Native Reanimated

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Creating a splash-screen(iOS):

  • Install splash screen
npm i react-native-splash-screen --save
  • Then run:
cd ios && pod install && cd ..
  • Replace the code in AppDelegate.m with the following:
#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
// Import RNSplashScreen
#import "RNSplashScreen.h"
#ifdef FB_SONARKIT_ENABLED
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
static void InitializeFlipper(UIApplication *application) {
  FlipperClient *client = [FlipperClient sharedClient];
  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
  [client addPlugin:[FlipperKitReactPlugin new]];
  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
  [client start];
}
#endif
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"MySplashScreen"
                                            initialProperties:nil];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  // Set the splash screen to show by default.
  [RNSplashScreen show]; 
  return YES;
}
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
@end

We made two significant changes to the AppDeligate file in this section. First, we imported the RNSplashScreen that we had previously installed into AppDeligate.m. Next, we use the code [RNSplashScreen show] to make the RNSplashScreen show by default.

  • In Xcode, open the project workspace and select images. Right-click below Appicon and select your picture using xcassets. Open the assets folder, navigate to the Images folder, then open the iOS folder. Set the image name to “LaunchScreen”.
  • After that, choose LaunchScreen.storyboard. Select the labels SplashScreen and "Powered by React Native" from View and erase them with your keyboard. To use the ruler, go to View and click the ruler icon. Uncheck the "Safe Area Layout Guide," then use the plus (+) symbol to find a picture. The picture view should be dragged to the View. Finally, go to the restrictions icon and turn off all of the limitations
  • Now that we've got our image view set up go ahead and change the image to LaunchScreen by clicking the image property icon. Set the content mod to aspect fill.
  • Run an Xcode build to see if your app can be successfully launched.

Frequently asked questions

What is the splash screen in React Native?

A splash screen is a view that appears when the app initially launches and comprises text or images. The splash screen is the initial screen that the user sees before they can access the rest of the features of your application.

In SVG, what is viewBox?

The viewBox attribute specifies the position and size of an SVG viewport in user space. The viewBox attribute takes a list of four values as its value: min-x, min-y, width, and height.

Why use a splash screen?

While the user waits for the app to initialize, you should show a loader. Showing a loader as soon as the app starts helps you present an ordered, well-designed display to the user.

What is the meaning of a splash logo?

A splash screen is a graphical control element that consists of a window with a picture, a logo, and the software's current version. While a game or software is starting up, a splash screen may display.

When the splash screen disappears?

After a few seconds (3-5), the Splash Screen will disappear from the screen and reappear when the application is launched the next time.

Conclusion

In this article, we have discussed Splash Screen and learned how to build a splash screen using react-native. We have discussed the steps involved in setting up a splash screen in our Android/iOS application.

After learning how to create a splash screen using react-native, are you curious to explore more articles on the topic related to the development of mobile applications? We have you covered. Check out MobileMobile TechnologiesHow To Make A Mobile App In 9 Easy Steps, and guided path on Fundamentals of React Native.

Refer to guided paths on Coding Ninjas Studio to upskill yourself in Data Structure and AlgorithmsCompetitive ProgrammingJavaScriptSystem Design, and many more. If you want to test your competency in coding, you may check out the mock test series and participate in a contest hosted by Coding Ninjas Studio! But suppose you have just started the learning process and looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc. In that case, you must look at the problemsinterview experiences, and interview bundle for placement preparations.

Nevertheless, you may consider our paid courses to give your career an edge over others!

Do upvote our blogs if you find them helpful and engaging!

Happy learning!
 

Topics covered
1.
Introduction
2.
Creating a splash screen (Android):
3.
Creating a splash-screen(iOS):
4.
Frequently asked questions
4.1.
What is the splash screen in React Native?
4.2.
In SVG, what is viewBox?
4.3.
Why use a splash screen?
4.4.
What is the meaning of a splash logo?
4.5.
When the splash screen disappears?
5.
Conclusion