Creating first time user welcome screen in react native

firstlaunchscreen
firstlaunchscreen

Most of the android applications have app descriptions on their play store page, however some applications provide information about application elements on first application launch providing a guided tour to their application components which take user experience level to a next level. In today’s tutorial we are going to create a simple modal popup screen which will display basic application information on first application launch.

We are going to create a separate component which takes title,uniquepagekey to identify the component and description as prop values. First import relevant components:

Next define render function as follows:

 

Next limit launching of modal only once in the beginning and define setModalVisible function as follows:

Next define stylesheet for the component as follows:

You can find the complete source code for the component on here: GithubGist

Next you can use the component in any of the application screens as follows:

Here is the screenshot of how the component looks on first app launch:

ftueScreen
ftueScreen

That concludes today’s part of tutorial.

Bonus Tips:

Some of applications provide mutiple swipable cards as welcome screen. You can extend above component using react-native-swiper to achieve that kind of effect.

Connect Deeper:

In the next part of tutorial I am planning to cover advanced tabs based navigation using wix-navigation module. So if you want to get notified you can follow our facebook page: Technoetics or subscribe to our mailing list below:

Technoetics newsletter

Get notified about upcoming articles,tips and tricks personally hand-delivered to your inbox

 

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