Creating first time user welcome screen in react native

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 or subscribe to our mailing list below:

Technoetics list