Create application introduction for React Native applications
Published in
6 min readOct 6, 2017
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:
├── src
│ ├── App.android.js <--Set up single screen app here
│ ├── components
│ │ └── icons
│ │ └── iconSource.js <--icons extracted from fonts
│ ├── screens
│ │ ├── AppIntro.js <--Info about application here
│ │ ├── Home.js <-- Main app screen after intro
│ │ └── StartTour.js <-- First screen to greet user
│ └── screens.js
├── __tests__
│ ├── index.android.js <--Entry file for application
│ └── index.ios.jsSteps are as follows:
Set up index file to point to App.js file
/* eslint-disable no-unused-vars */
import App from './src/App';Set up screens in screen.js file as follows:
/* eslint-disable import/prefer-default-export */
import { Navigation } from 'react-native-navigation';/**
* All screens need to be added here
*/
import AppIntro from './screens/AppIntro';
import StartTour from './screens/StartTour';
import Home from './screens/Home';export function registerScreens() {
Navigation.registerComponent('app.AppIntro', () => AppIntro);
Navigation.registerComponent('app.StartTour', () => StartTour);
Navigation.registerComponent('app.Home', () => Home);
}
Next we set up single screen app for our application in App.js following official documentation keeping startTour screen as first launch screen:
import { Navigation } from 'react-native-navigation';import { registerScreens } from './screens';registerScreens(); // this is where you register all of your app's screens// start the app
Navigation.startSingleScreenApp({
screen: {
screen: 'app.StartTour', // unique ID registered with Navigation.registerScreen
title: '', // title of the screen as appears in the nav bar (optional)
navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
navigatorButtons: {}, // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
},
passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
animationType: 'slide-down' // optional, add transition animation to root change: 'none', 'slide-down', 'fade'
});
Next we set up startTour with simple title and button to direct user to app introduction screen:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/import React, { Component } from 'react';
import {
Button,
StyleSheet,
Text,
View
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import PropTypes from 'prop-types';export default class StartTour extends Component {
constructor(props) {
super(props);
}
onPressStartTour(event){
this.props.navigator.resetTo({
screen: 'app.AppIntro', // unique ID registered with Navigation.registerScreen
title: "Tour", // navigation bar title of the pushed screen (optional)
passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
animated: true, // does the resetTo have transition animation or does it happen immediately (optional)
animationType: 'fade', // 'fade' (for both) / 'slide-horizontal' (for android) does the resetTo have different transition animation (optional)
});
}
render() {
return (
<View style={styles.container}>
<View style={styles.upperContainer}>
<Icon key={"iconKey"} name="ios-globe" size={90} color={"red"}/>
<Text style={styles.appTitle}>
Project 365
</Text>
</View>
<View style={styles.lowerContainer}>
<View style={styles.buttonContainer}>
<Button
onPress={(event) => this.onPressStartTour(event)}
title=" Start Tour "
color="red"
accessibilityLabel="Start Tour"
/>
</View>
</View>
</View>
);
}
}StartTour.navigatorStyle = {
navBarTextColor: 'white', // change the text color of the title (remembered across pushes)
navBarHidden: true,
tabBarHidden: true,
};StartTour.PropTypes = {
navigator: PropTypes.object,
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000000',
},
upperContainer:{
flex: 0.7,
justifyContent: 'center',
alignItems: 'center',
},
lowerContainer:{
flex: 0.3,
justifyContent: 'flex-start',
alignItems: 'center',
},
appTitle: {
fontSize: 30,
textAlign: 'center',
margin: 10,
color:'#ffffff'
},
buttonContainer:{
width: 200,
height: 150
}
});
We are going to use react-native-app-intro npm module for this purpose:
/**
* AppIntro&TourScreen
*/import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import Intro from 'react-native-app-intro';
import PropTypes from 'prop-types';
import { iconsMap, iconsLoaded } from '../components/icons/iconSource';
export default class AppIntro extends Component {
onSkipBtnHandle = (index) => {
this.props.navigator.resetTo({
screen: 'app.Home', // unique ID registered with Navigation.registerScreen
title: "Home", // navigation bar title of the pushed screen (optional)
passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
animated: true, // does the resetTo have transition animation or does it happen immediately (optional)
animationType: 'fade', // 'fade' (for both) / 'slide-horizontal' (for android) does the resetTo have different transition animation (optional)
});
}
doneBtnHandle = () => {
this.props.navigator.resetTo({
screen: 'app.Home', // unique ID registered with Navigation.registerScreen
title: "Home", // navigation bar title of the pushed screen (optional)
passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
animated: true, // does the resetTo have transition animation or does it happen immediately (optional)
animationType: 'fade', // 'fade' (for both) / 'slide-horizontal' (for android) does the resetTo have different transition animation (optional)
});
}
nextBtnHandle = (index) => {
Alert.alert('Next');
console.log(index);
}
onSlideChangeHandle = (index, total) => {
console.log(index, total);
}
render() {
const pageArray = [{
title: 'Introduction',
description: 'Discover new facts about getting healthy,wealthy and wise everyday',
img: iconsMap['ios-flower'],
imgStyle: {
height: 150,
width: 150,
resizeMode: "contain"
},
backgroundColor: '#03A9F4',
fontColor: '#fff',
level: 10,
}, {
title: 'Healthy',
description: 'This section covers all articles related to workouts, medicines and general healthcare',
img: iconsMap['ios-pulse'],
imgStyle: {
height: 200,
width: 200,
resizeMode: "contain"
},
backgroundColor: '#F44336',
fontColor: '#fff',
level: 10,
}, {
title: 'Wealthy',
description: 'This section covers all articles related to managing finances, generating wealth and long term investment plans',
img: iconsMap['ios-cash'],
imgStyle: {
height: 200,
width: 200,
resizeMode: "contain"
},
backgroundColor: '#009688',
fontColor: '#fff',
level: 10,
}, {
title: 'Wise',
description: 'This section covers all articles related to interesting facts, stories of rise of famous personalities and much more',
img: iconsMap['ios-bulb'],
imgStyle: {
height: 200,
width: 200,
resizeMode: "contain"
},
backgroundColor: '#FBC02D',
fontColor: '#fff',
level: 10,
}];
return (
<Intro
onNextBtnClick={this.nextBtnHandle}
onDoneBtnClick={this.doneBtnHandle}
onSkipBtnClick={this.onSkipBtnHandle}
onSlideChange={this.onSlideChangeHandle}
pageArray={pageArray}
/>
);
}
}AppIntro.navigatorStyle = {
navBarHidden: true,
tabBarHidden: true,
};AppIntro.PropTypes = {
navigator: PropTypes.object,
}const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
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:
import { Navigation } from 'react-native-navigation';import { registerScreens } from './screens';registerScreens(); // this is where you register all of your app's screens
import {
AsyncStorage,
} from 'react-native';AsyncStorage.getItem('notFirstLaunch').then((value) => launchApp(value));var launchApp = function(value){
if(value == "true"){
// start the app
Navigation.startSingleScreenApp({
screen: {
screen: 'app.Home', // unique ID registered with Navigation.registerScreen
title: '', // title of the screen as appears in the nav bar (optional)
navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
navigatorButtons: {}, // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
},
passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
animationType: 'slide-down' // optional, add transition animation to root change: 'none', 'slide-down', 'fade'
});
}
else{
AsyncStorage.setItem('notFirstLaunch', "true");
// start the app
Navigation.startSingleScreenApp({
screen: {
screen: 'app.StartTour', // unique ID registered with Navigation.registerScreen
title: '', // title of the screen as appears in the nav bar (optional)
navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
navigatorButtons: {}, // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
},
passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
animationType: 'slide-down' // optional, add transition animation to root change: 'none', 'slide-down', 'fade'
});
}}
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.
