React native comes with many predefined libraries, there is also a well known plugin called ‘react-native-app-intro’ which helps the app to have the introduction screen or we call it as tour.
For this , we need to install the plugin using this command “npm install react-native-app-intro” inside your project directory , you can also use it with ‘–save’ to save it under package.json file.
To make starter screen in react-native, follow the following steps.
Step 1:- First create your project. To create project enter following command.
react-native init starterExample
Step 2:- Go to your project and install react-native-app-intro library. To install this library enter following command.
npm install –save react-native-app-intro
Step 3:- Go to your index.android.js or index.ios.js and repace with following Codereact-native-app-intro
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Alert,
Image,
Dimensions,
} from 'react-native';
import AppIntro from 'react-native-app-intro';
import styles from './homeStyle';
import * as Helper from './utils/const';
const windowsWidth = Dimensions.get('window').width;
const windowsHeight = Dimensions.get('window').height;
export default class starterExample extends Component {
static navigationOptions = {
headerMode: 'none',
header: null,
gesturesEnabled: false
}
constructor(){
super()
this.state = {};
}
onSkipBtnHandle = (index) => {
console.log(index);
}
doneBtnHandle = () => {
this.props.navigation.navigate('login')
}
nextBtnHandle = (index) => {
console.log(index);
}
onSlideChangeHandle = (index, total) => {
console.log(index, total);
}
render() {
return (
<AppIntro
doneBtnLabel='Go'
skipBtnLabel= 'Skip'
onNextBtnClick={this.nextBtnHandle}
onDoneBtnClick={this.doneBtnHandle}
onSkipBtnClick={this.onSkipBtnHandle}
onSlideChange={this.onSlideChangeHandle}
>
<View style={[styles.slide,{ backgroundColor: '#fa931d' }]}>
<View style={[styles.header, {width: windowsWidth}]}>
<View>
<Image style={{ width: 75 * 2.5, height: 63 * 2.5 }} source={Helper.BACKGROUND_1} />
</View>
<View style={{position: 'absolute', top: 80, left: 30, width: windowsWidth, height: windowsHeight, }} level={20}>
<Image style={{ width: 46 * 2.5, height: 28 * 2.5 }} source={Helper.BACKGROUND_2} />
</View>
<View style={{
position: 'absolute',
top: 23,
left: 25,
width: windowsWidth,
height: windowsHeight,
}} level={20}
>
<Image style={{ width: 109 * 2.5, height: 68 * 2.5 }} source={Helper.BACKGROUND_5} />
</View>
<View style={{
position: 'absolute',
top: 65,
left: 35,
width: windowsWidth,
height: windowsHeight,
}} level={5}
>
<Image style={{ width: 23 * 2.5, height: 17 * 2.5 }} source={Helper.BACKGROUND_3} />
</View>
</View>
<View style={styles.info}>
<View level={10}><Text style={styles.title}>AppIntro</Text></View>
<View level={15}><Text style={styles.description}>Pretty Simple Useful in your app tour!</Text></View>
</View>
</View>
<View style={[styles.slide, { backgroundColor: '#a4b602' }]}>
<View style={[styles.header, {width: windowsWidth}]}>
<View>
<Image style={{ width: 75 * 2.5, height: 63 * 2.5 }} source={Helper.IMAGE_21} />
</View>
<View style={{
position: 'absolute',
top: 30,
left: 40,
width: windowsWidth,
height: windowsHeight,
}} level={20}
>
<Image style={{ width: 101 * 2.5, height: 71 * 2.5 }} source={Helper.IMAGE_22} />
</View>
<View style={{
position: 'absolute',
top: 10,
left: 50,
width: windowsWidth,
height: windowsHeight,
}} level={-20}
>
<Image style={{ width: 85 * 2.5, height: 73 * 2.5 }} source={Helper.IMAGE_23} />
</View>
</View>
<View style={styles.info}>
<View level={10}><Text style={styles.title}>Title!</Text></View>
<View level={15}><Text style={styles.description}>description!</Text></View>
</View>
</View>
<View style={[styles.slide, { backgroundColor: '#406E9F' }]}>
<View style={[styles.header, {width: windowsWidth}]}>
<View style={{
position: 'absolute',
top: 20,
left: 20,
width: windowsWidth,
height: windowsHeight,
}}
>
<Image style={{ width: 138 * 2.5, height: 83 * 2.5 }} source={Helper.IMAGE_33} />
</View>
<View style={{
position: 'absolute',
top: 25,
left: 40,
width: windowsWidth,
height: windowsHeight,
}} level={-15}
>
<Image style={{ width: 103 * 2.5, height: 42 * 2.5 }} source={Helper.IMAGE_34} />
</View>
<View level={10}>
<Image style={{ width: 95 * 2.5, height: 55 * 2.5 }} source={Helper.IMAGE_31} />
</View>
<View style={{
position: 'absolute',
top: 65,
left: 120,
width: windowsWidth,
height: windowsHeight,
}} level={25}
>
<Image style={{ width: 47 * 2.5, height: 43 * 2.5 }} source={Helper.IMAGE_32} />
</View>
</View>
<View style={styles.info}>
<View level={10}><Text style={styles.title}>Title!</Text></View>
<View level={15}><Text style={styles.description}>description!</Text></View>
</View>
</View>
<View style={[styles.slide, { backgroundColor: '#DB4302' }]}>
<View style={[styles.header, {width: windowsWidth}]}>
<View style={{
position: 'absolute',
top: 25,
left: 55,
width: windowsWidth,
height: windowsHeight,
}} level={15}
>
<Image style={{ width: 96 * 2.5, height: 69 * 2.5 }} source={Helper.IMAGE_44} />
</View>
<View>
<Image style={{ width: 50 * 2.5, height: 63 * 2.5 }} source={Helper.IMAGE_41} />
</View>
<View style={{
position: 'absolute',
top: 20,
left: 70,
width: windowsWidth,
height: windowsHeight,
}} level={20}
>
<Image style={{ width: 46 * 2.5, height: 98 * 2.5 }} source={Helper.IMAGE_43} />
</View>
</View>
<View style={styles.info}>
<View level={10}><Text style={styles.title}>Title!</Text></View>
<View level={15}><Text style={styles.description}>description!</Text></View>
</View>
</View>
</AppIntro>
);
}
};
AppRegistry.registerComponent("starterExample", () => App);
style.js
import {
StyleSheet,
Dimensions,
Platform
} from 'react-native';
const {height, width} = Dimensions.get('window');
const styles = StyleSheet.create({
slide: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB',
padding: 15,
},
header: {
flex: 0.5,
justifyContent: 'center',
alignItems: 'center',
},
pic: {
width: 75 * 2,
height: 63 * 2,
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold',
},
info: {
flex: 0.5,
alignItems: 'center',
padding: 40
},
title: {
color: '#fff',
fontSize: 30,
paddingBottom: 20,
},
description: {
color: '#fff',
fontSize: 20,
},
});
module.exports = styles;
There are following props, you can customise your page.
1. dotColor => dot color
2. activeDotColor => dot color of active page.
3. leftTextColor => left side text color, by default text is skip and color is white.
4. onSlideChange=> a function for page change.
5. onSkipBtnClick => A function for skip button (left side button)
6. onDoneBtnClick=> A function for done button (Right side Button)
7. onNextBtnClick => A function which is called when next button clicked.
8. doneBtnLabel=> text label for done button.
For more info go to git repository of react-native app intro.
If you have any issue, feel free to comment.