DEV Community

Saad
Saad

Posted on

Splash Screen, Tutorial Screens, Authentication Screens Flow in React-Native

Recently I had to start up a project from scratch and I had to make a general flow of splash screens, tutorial screens and authentication screens. Today I am going to share how did I create the flow and what difficulties that I faced during the process. The flow is a very common scenario. It goes like this

  1. First the user sees the splash screen for few seconds
  2. If the user opens the app for the first time then the user will go through some tutorial screens.
  3. If not the first time, the user will be redirected to the authentication screen. If not the first we can not show the tutorial screens again to the users.

Splash Screen

In react native splash screen can be added natively and also using react-native-splash-screen package but I just did it in a very simple way by creating a splash screen component in my react-native side. I had to use set timeout to show the splash screen for few seconds and then redirect back to another screen. The splash screen component is given below:

Note that I had to use resetActions to make the stack empty again while redirecting so that the user can not go back again to splash screen using hardware back button.

Starting Screen

This is the screen where I do not render anything but put my logic to redirect the user to the proper places. The component is given below:

I am using async storage to store the value if the app is already launched or not. In the componentDidMount function I am checking first if the alreadyDidLaunch value from async storage is null or not, if null then I am showing a loader in the render and also changing the value of alreadyLaunched at the same time. So after changing the value I am redirecting the user to the tutorial screens.

Next time when the user opens the app again, the alradyDidLaunched value is set to true and the user will be redirected to authentication screens.

Note that the asyncStorage is asynchronous by nature so it takes some time to get the value. While getting the value I am showing a loader in the meantime.

So that’s how I did it. Kindly let me know the better way that I could do this flow than this. Thanks for reading!

Top comments (7)

Collapse
 
pjullrich profile image
Peter Ullrich

You could have implemented a SwitchNavigator instead of the custom resetAction function, I think. The SwitchNavigator resets the screen whenever they are unmounted and disallows going back, even with the hardware button on Android. A good tutorial is provided in the react-navigator docs: reactnavigation.org/docs/en/auth-f...

Collapse
 
saadbashar profile image
Saad

Thanks a lot Peter!

Collapse
 
jonathanrufino profile image
Jonathan Rufino • Edited

Why do you use an aditional screen (StartingScreen) instead of doing the verification on SplashScreen? And why an unecessary 4 seconds delay?

That way user always needs to wait 4 seconds for app to load, i think thats a lot of time and i would uninstall the app just because that long waiting.

Collapse
 
saadbashar profile image
Saad

You are right. I will change it :) Thanks!

Collapse
 
efleurine profile image
Emmanuel

Did you compile a production build of your app and then did have any white screen before the actual splashscreen appears.

Collapse
 
felipegatti profile image
FelipeGatti

Got this issue. I'm using a native SplashScreen and then this guide reactnavigation.org/docs/en/auth-f... but in between screens i get a white screen. I think my render in the "AuthLoadingPage" is taking to long to start working

Collapse
 
saadbashar profile image
Saad

I did not face this issue in production build