React-native splash screen example using react-navigation

In this article, we learn about custom React-native splash screen example using react-navigation, to do this follow the steps to install libraries, In this we simply start the app with a splash screen then redirect to the home screen using react-navigation, so let’s start

React-native splash screen
React-native splash screen using react-navigation

1.Install react-navigation

Install react-navigation using the following command, also you can learn more about react-navigation latest v5.0 from this post

2. Install navigation transition

Run the following command to install navigation transition

3. Add the following imports

In the above imports, NavigationDrawerButton from the components folder is my previous project with DrawerNavigation in which I want to add a splash screen, for that I had created one SplashScreen.js which is following

4. SplashScreen.js

This is the source code splashScreen.js. as you can see below I have added setTimeout with  2000 milisecound in componentDidMount method which calls at the begining to screen. also you can add if else condition to manage session to decide which screen will opens after splash screen.

5. App.js

6. Home screen

For home screen please check my previous project, I added this splash screen in this project, simply define screens inside App.js and call them using createAppContainer as you see in the above App.js

 

Thank you 🙂

Leave a Reply

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