Creating first time user welcome screen in react native

Image source:Pixabay

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:

import React, { Component, PropTypes } from "react";
import {
  AsyncStorage,
  Modal,
  View,
  Text,
  TouchableHighlight
} from "react-native";

Next define render function as follows:

export default class FtueScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false
    };
  }
    render() {
    return (
      <View>
        <Modal
          animationType={"slide"}
          transparent={true}
          style={styles.ftreContainer}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            alert("Modal has been closed.");
          }}
        >
          <View style={styles.ftreContainer}>
            <View style={styles.ftreTitleContainer}>
              <Text style={styles.ftreTitle}>{this.props.title}</Text>
            </View>
            <View style={styles.ftreDescriptionContainer}>
              <Text style={styles.ftreDescription} allowFontScaling={true}>
                {this.props.description}
              </Text>
            </View>
            <View style={styles.ftreExitContainer}>
              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}
              >
                <View style={styles.ftreExitButtonContainer}>
                  <Text style={styles.ftreExitButtonText}>Exit</Text>
                </View>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}

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

componentDidMount() {
    AsyncStorage.getItem(this.props.pagekey, (err, result) => {
      if (err) {
      } else {
        if (result == null) {
          console.log("null value recieved", result);
          this.setModalVisible(true);
        } else {
          console.log("result", result);
        }
      }
    });
    AsyncStorage.setItem(this.props.pagekey, JSON.stringify({"value":"true"}), (err,result) => {
            console.log("error",err,"result",result);
            });
  }
  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }

Next define stylesheet for the component as follows:

import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
ftreContainer:{
		backgroundColor:'black',
		flex:1,
		marginTop:70,
		marginBottom:40,
		marginLeft:20,
		marginRight:20,
		borderRadius:20,
		borderWidth:4,
		borderColor:'red'
	},
	ftreTitle:{
		color:'white',
        fontWeight:'bold',
		fontSize:20,
		textAlign:'center',
		margin:10,	
	},
	ftreDescription:{
		color:'white',
        fontSize:15,
		marginRight:20,
		marginLeft:20
	},
	ftreCloseIcon:{
		alignSelf:'flex-end',
		flex:0.5,
		marginRight:10
	},
	ftreTitleContainer:{
		flex:1,
		flexDirection:'row',
		justifyContent:'center',
		alignItems:'center'
	},
	ftreDescriptionContainer:{
		flex:6.5
	},
	ftreExitContainer:{
		flex:2,
		justifyContent:'flex-start',
		alignItems:'center',
	},
	ftreExitButtonContainer:{
		width:200,
		height:40,
		backgroundColor:'red',
		borderRadius:10,
		justifyContent:'center',
	},
	ftreExitButtonText:{
		color:'white',
		fontSize:20,
		fontWeight:'bold',
		textAlign:'center'
	}
});
export default styles;

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:

import FtreScreen from './ftreScreen';
...
render() {
    return (
      <View>
          <FtreScreen pagekey={"uniquekey"} title={"categort title"} description={"topic description"}/>
      </View>
      )
      }

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

ftreScreen

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