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
- First the user sees the splash screen for few seconds
- If the user opens the app for the first time then the user will go through some tutorial screens.
- 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)
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...
Thanks a lot Peter!
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.
You are right. I will change it :) Thanks!
Did you compile a production build of your app and then did have any white screen before the actual splashscreen appears.
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
I did not face this issue in production build