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

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.