React Native Splash Screen - support for different themes

Hello everyone! It's the dev.family team is in touch. In this article, we are sharing a short guide on how to install Splash Screen in a cross-platform app written in React Native with support for multiple themes.

Splash screen is the first screen that users see before loading into the main application. This screen is perhaps the best way to make the name of your app, and in general, its entire name, more memorable.

But this is not the main role of the splash screen. Under it, for example, you can hide receiving data from the API and loading the main application. We do this when we show the loader on the screen when loading the same data. This allows you to improve the UX and immediately demonstrate the finished application to the user. And as a result, remove the extra loader when opening it for the first time.

In this short guide, we will look at installing splash screens for iOS and Android using the react-native framework using the react-native-splash-screen library.

Step-by-step instruction

Preparations

yarn add react-native-splash-screen

After this, in the ios folder you need to run the command to install the pods:

cd ios && pod install && cd ..

(go to the ios directory, install pods and go back)

Next, there are two configuration options:

1. Use for the splash screen an image exported, for example, from the same Figma
2. Making this screen by hand is more difficult and takes longer.

Let's first look at the screen itself.

Let's say we chose the option when a picture is used. We export it in high resolution (in our case x3). But, since we are doing everything for two themes at once, we need to export both copies (for light and dark). Next, go to AppIcon and drag first one image, then another.

Then click Generate, download the assets and place them in the assets folder in the project root.

НNow that the general preparations are complete, let’s move on directly to installation in the mobile application. Let's start with iOS.

Setting up Splash Screen iOS

First of all, open the .xcworkspace of our project. There we see an empty AppIcon (if you did not add an application icon or other assets). Now let's create an image set file. Let's call it, for example, SplashScreen (yes, it’s very original, I know :))

After creation, in the settings we see Apperances with the None option selected. Click on it and select Any, Light, Dark. In Any and Light we drag assets for the light iOS theme. In Dark - for dark, respectively. It turns out like this:

We’re almost there.

Open LaunchScreen.storyboard. Select View Controller Scene > View Controller > View and delete everything from there. After that, select View, click on the triangle icon at the top right and uncheck Layout Guides > Safe Area. Click on the plus and add it to our View Image View. Remove all margins and check the Constraints to margins checkbox.

In the settings, we specify the resource for our Splash Screen. And select Content View, which suits us best. In this case - Scale To Fill. But Aspect Fit is suitable for most.

Here you can view the dark theme and check that the picture has changed correctly.

We've sorted out the easy part of installing on iOS.

As for the difficult one, everything is much more fun. I cannot provide a ready-made solution. You will have to export all the pictures and colors that make up your Splash Screen yourself, and customize LaunchScreen.storyboard manually.

We'll show you how we do it:

In general, as you can see on the screenshots, the technique is similar, except that not one whole picture is added, but a composite screen. We should do everything in a similar way: add colors, set different palettes to them depending on the theme, and with the pictures we act as in the example above.

The greatest difficulty of this approach is scaling for different iPhone models. This can be solved with different indentations. They can be static - used equally on all models. Conventionally, 30px on the left - and this will be the case on all models, regardless of whether the screen is smaller or larger. There may also be dynamic indents, as, for example, in the case of a logo. Everything is configured in the View settings (for the image):

As well as the location for the screens of different models. It would probably be even more correct to say the indentation that is preserved:

In a word, if you choose this method, you will have to play around with it yourself.

The final touch is to go to the AppDelegate.m file and add the following

[super application:application didFinishLaunchingWithOptions:launchOptions];


  [RNSplashScreen show]; // call our SplashScreen


  return YES;

Instead of a line

return [super application:application didFinishLaunchingWithOptions:launchOptions];

And add import

#import "RNSplashScreen.h"

Android setup

We've sorted out iOS, now let's start setting up Android. Here, as well we’ll start with a simple option, when we just use a picture.

First of all, transfer the generated materials to the res folder (android > app > src > main > res). It should come out like this:

Next, go to the res > values folder and create a theme.xml file, insert the following there

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <attr name="launchImage" format="reference"/>
</resources>

Here we have added a custom launchImage attribute.
Next, go to the styles.xml file (android/app/src/main/res/values/styles.xml) and add the following:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <resources>

      <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        ....
      </style>

      <!-- Add this -->
      <style name="LightTheme" parent="AppTheme">
        <item name="launchImage">@drawable/launch_screen_light</item>
      </style>

      <!-- Add this -->
      <style name="DarkTheme" parent="AppTheme">
        <item name="launchImage">@drawable/launch_screen_dark</item>
      </style>

    </resources>

Here we added two themes, Light Theme and Dark Theme, and wrote down the values that predetermine our launchImage image.

Then in our res folder we create a layout folder and add the launch_screen.xml file to it. In this file we write:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" 
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView 
            android:layout_width="match_parent" 
            android:layout_height="match_parent"
            android:src="?attr/launchImage"
            android:scaleType="centerCrop" 
        />
    </RelativeLayout>

Here we define a link to our image attribute. Pay attention to android:scaleType="fitXY". This value may not suit you, you can look for available options here

Finally we go to MainActivity.java (android > app > src > main > java > com > packageName > appName > MainActivity.java) and overwrite the onCreate method with the following:

@Override
protected void onCreate(Bundle savedInstanceState) {
switch (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) {
case Configuration.UI_MODE_NIGHT_YES:
setTheme(R.style.DarkTheme);


break;
case Configuration.UI_MODE_NIGHT_NO:
setTheme(R.style.LightTheme);
break;
default:
setTheme(R.style.LightTheme);
}


SplashScreen.show(this);
super.onCreate(savedInstanceState);
}

In the super.onCreate() method we pass null if the react-native-screens package is used.

Also at the very top you need to add two imports

import org.devio.rn.splashscreen.SplashScreen;
import android.content.res.Configuration;


public class MainActivity extends ReactActivity { …

Library implementation

Now all the preparations are completed. All that remains is to implement the library in our application

App.tsx
// import the library

import SplashScreen from 'react-native-splash-screen' 

export default function App {

    useEffect() {
    // any asynchronous code can be here 
    // before opening the application

    // hide our Splash Screen
        SplashScreen.hide();
    }

    . . . render function

}

All that remains is to do yarn run ios / yarn run android and make sure that everything works well.

That's all. Our guide on implementing Splash Screen for different themes in react-native is complete. We hope it helps you, and remember that the Splash Screen is a pretty important part of the application, since it is the first thing the user sees. So don't treat it with disdain. Best wishes! The dev.family team was in touch, see you soon!