Create application introduction for React Native applications

firstlaunchscreen
firstlaunchscreen

In today’s tutorial we are going to create an application introduction screen for React Native applications.

We are going to use wix react-native navigation for setting up our application, the process for which is mentioned on the official website here.

Once you are done with basic application setup let us start setting up our application directory structure as follows:

Steps are as follows:

Set up index file to point to App.js file

Set up screens in screen.js file as follows:

Next we set up single screen app for our application in App.js following official documentation keeping startTour screen as first launch screen:

Next we set up startTour with simple title and button to direct user to app introduction screen:

We are going to use react-native-app-intro npm module for this purpose:

We have set up one introduction page with 3 slides for giving information about various sections of applications. The skip and done button handlers redirect the user back to home screen.

Now we need to make sure that the app intro is shown only when user first launches the application and then home screen is shown on subsequent application launches which can be done using AsyncStorage in react native.

Let us modify App.js file as follows:

Here we first check whether the application is launched for the first time using notFirstLaunch string variable.

The application now looks as follows:

That concludes today’s tutorial for setting app introduction screens for reactnative applications. You can go through the entire source code for the application on github here: Pro365

In the next tutorial we will create home screen for the application using tab based navigation. You can follow facebook page here: TechnoeticsClub or this publication on medium to get notified about upcoming posts: Technoetics. Till then keep experimenting and learning new things everyday.

Share post-
About Saurabh Mhatre 70 Articles
Currently working in web and hybrid application development