How to make starter screen in react native.



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.

Leave a Reply

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