React Native – How to create a custom Splash Screen

Have you ever created an application using React Native? or working on one? so what is the first step your application to load on a device? well I must say  very first element everyone want’s to load in an application when running on a device is “splash screen” or simply we   can say a “Loading Screen” Showing Logo of your application or anything else you want to show to user before he/she actually start using your application every time application opens.

and in React Native I have found that Creating a Splash Screen is a typical task. so I have found a way myself to do it easily within no time!

So now I am going to reveal my secret for making a simple and yet the best splash screen to use in any React Native application whether Android or IOS. as I am an Android guy, for now, I will be sharing only Android Code for this. but it is that simple that you can also tweak it to make it work in IOS also.

So if you have an Existing Application in which you want to add a splash screen then continue reading this post. and if you are new to React Native or want to Learn React Native from the beginning then you can read my earlier articles on React Native and Especially the first one to getting Started with React Native. Click Here to Read our Awesome article on how to getting Started with React Native.

so by now, I am supposing that you have an application running on your emulator or Real Device (Android). so now just add a view/ screen whatever you want to say it. just add a javascript file in your views Folder. did not know where to add this file you can just Read our another article on this. in which I have elaborated the basic folder structure of React Native. Click here to read that article or continue reading this article to add Splash Screen to your Android React Native Application.

So by now, I am again supposing that you have added a new screen in your application. or if you don’t want to add new screen you can just do this work in your index.android.js File but only if you are not doing anything in that screen otherwise you need to move that code to next screen which will be loading after Splash Screen.

So now we are Ready! but before starting do you really know that what is Splash Screen? I forgot to explain in starting so now let’s see what is this Splash Screen basically stands for.

Splash Screen – an image or any message or anything you want to show to the user before the application starts loading actually. i.e a screen that appears for some time like say for 2 or 3 seconds and after that main screen of the app shows off. Splash screen basically gives our Application a nice and clean look also bought us some time to load things in the background for the user.

So now you know that what is splash screen you may have also seen some React Native Packages to add Splash Screen to your React Native Application. but that is something which is hard and time taking to do so. and my method is very very simple to create a Splash Screen.

so for adding a splash screen, we need basic 2 things to work this out.

  • Image – which will be shown on a splash screen or you can write some message simply to make this work for the first time and tweak according to your need.
  • Splash Screen File –  Nothing just a JavaScript file that you may have added in above steps I have listed. this screen is not just for showing a splash screen but you can also load something behind the scenes and saves that in state and pass it to next screen which will be loading after splash screen so that user don’t have to wait before using application.

In my case, I am just showing this Image as splash screen in that JavaScript file.

we are going to use JavaScript SetTimeOut Function. to make it work out.

here is the code to make a splash screen.

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    TouchableOpacity
} from 'react-native';

export default class LoadingScreen extends Component {
    componentWillMount() {
        if(//something we can check to show splash screen)
           {
                setTimeout(function () {
                    that
                        .props
                        .navigator
                        .push({ name: 'MainFeedsScreen' });
                }, 2000);
           }
    }

    render() {
        // getting width according to device screen size for fitting loading image on screen
        var width = Dimensions
            .get('window')
            .width;

        return (
            <TouchableOpacity style={styles.indexContainer}>
                <Image
                    source={require('.././images/loadingscreen.png')}
                    style={[
                        styles.base, {
                            resizeMode: 'cover'
                        }, {
                            alignSelf: 'center'
                        }, {
                            width: width
                        }, {
                            height: 200
                        }
                    ]} />
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    indexContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    welcometxt: {
        textAlign: 'center',
        fontSize: 20,
        color: '#10598F'
    }
});

AppRegistry.registerComponent('LoadingScreen', () => rewindcapsdev);

So, wondering what this above code will do for you? let me make it simple for you to understand.

The Main thing we are doing is in ComponentWillMount() function. this will make our screen to be visible for only about 2 Seconds for the user after that it will be moved to Next Screen. in my case next screen is  MainFeedsScreen. basically, I have just added an Image Component Inside TouchableOpacity Element so that it looks like a splash screen. This Trick works well. as when you touch this image it looks like you are touching a splash screen just because of Image Trapped inside TouchableOpacity Element.

I have just added 2000 ms in TimeOut() function as I need to show the splash screen for only 2 seconds to the user. Now Just Go Ahead and Copy Paste this code of mine to create your Splash Screen Easiest way. and no one gonna knows that you have not used Real Splash Screen Component in your React Native Application.

 


Liked this article! stay tuned for some more Tricks in React Native Like this to make your React Native Development a Cake Walk. don’t forget to share.


Happy Coding

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *