Creating a Splash Screen in bare React Native using async and setTimeout

In this article, we will create a splash screen using bare react native

We have created 2 screens in this project

  1. Splash Screen: This will be the first screen which will shown to the user for 5 seconds.
  2. Main Screen: This is the screen which will be shown to the user after our splash screen completes 5 seconds timeout.

In App.js we will code our logic to show splash screen for some time and then show the main screen to the user

So to do that we will create once state variable inside the constructor.

constructor(props) {
    super(props);
    this.state = {
      showTheRealApp: true,
    };
  }

Next, we will create one arrowFn in App.js which will be async function and will return promise once the timeout is done.

splashScreenTimer = async () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('result');
      }, 5000);
    });
  };

Next, on componentDidMount we will change our state variable on the basis of our arrowFn value and we will render the Screen according to the flag value.

async componentDidMount() {
    const data = await this.splashScreenTimer();
    if (data !== null) {
      this.setState({showTheRealApp: false});
    }
  }
  render() {
    if (this.state.showTheRealApp) {
      return <SplashSceen />;
    }
    return <TheArrowFnMainScreen />;
  }

To check how you can design the splash screen you can download the full source code from the link given below.

Download the source code:

Icon image which is used in this project is downloaded from icon8.

Implementation preview:

3rd Party Library Used in this project :

1.React Navigation

If you enjoyed reading this article, please share this article with others and also do follow us ????

If you have any comment, question, or recommendation, feel free to post them in the comment section below!

See you soon with another design with react native. Peace ✌️

0 Shares:
Leave a Reply

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

You May Also Like