React Native App Intro Slider

App Intro Slider is a group of slides shown at start of application (generally before login)

Typically, it contains information about application in picture format

Creating new React Native App

Check React Native Installation for installation related info

Use react-native init command to create a new React Native project (here named IntroSliderApp)

react-native init IntroSliderApp

This creates a directory named IntroSliderApp and initializes it as a react native application directory

This can be skipped in case an existing react native project is being integrated into

Dependency

Go to project directory (here IntroSliderApp)

cd IntroSliderApp

Add react-native-document-picker to current project using yarn

yarn add react-native-intro-slider

or using npm

npm install react-native-intro-slider --save

iOS

After yarn add command, cd into ios folder inside project directory and usepod command to install any required CocoaPods dependencies:

cd ios && pod install && cd ..

Usage

A state showApp decides whether to show app or intro slider

This state can also be stored in some local storage thingy, to make the intro slider appear only if used is not logged in or something like that

Properties of AppIntroSlider

data : array of slides (Json format)
renderItem : takes a slide as argument, and returns layout for slide
onDone : callback for Done button which appears at last slide

A slide has following properties :

key: key for a slide
title: Title of slide
text: Description text for slide
image: Image path in slide here
titleStyle textStyle imageStyle: styles
backgroundColor: background hex color code or color name

App code

Following code implements AppIntroSlider

App.js

import React from 'react';
import { StyleSheet, View, Text, Image, Dimensions } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
export const { width, height } = Dimensions.get("window");
const title_height = height * 0.13;

const slides = [
  {
    key: '1',
    title: 'Packed Up?',
    image: require('./img/android.jpg'),
    backgroundColor: '#59b2ab',
  },
  {
    key: '2',
    title: '',
    text: 'Time to leave?',
    image: require('./img/planet.jpg'),
    backgroundColor: '#febe29',
  },
  {
    key: '3',
    title: 'Take a leap',
    image: {uri:'https://blog.adrenaline-hunter.com/wp-content/uploads/2018/05/bungee-jumping-barcelona-1680x980.jpg'},
    backgroundColor: '#22bcb5',
  }
];

const styles = StyleSheet.create({
  slide: {
    flex: 1,
    justifyContent: 'center',
  },
  image: {
    width: '100%',
    height: '100%',
    marginVertical: 32,
    zIndex: -2,
  },
  text: {
    color: 'dodgerblue',
    textAlign: 'center',
    fontSize: 26,
  },
  title: {
    textAlign: 'center',
    fontWeight: 'bold',
    color: 'magenta',
    fontSize: 30
  },
  titleContainer: {
    position: 'absolute',
    height: title_height,
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    flex: 1
  }
});

export default class App extends React.Component {
  constructor() {
    super();

    this.state = {
      showApp: false
    }
  };

  _renderItem = ({ item }) => {
    return (
      <View  style={styles.slide}>
        <View style={[{top:0, paddingVertical: title_height * 0.55}, styles.titleContainer]}>
          <Text style={styles.title}>{item.title}</Text>
        </View>
        <Image
              resizeMode="stretch"
              style={styles.image}
              source={item.image}
            />
        <View style={[{bottom:0, paddingVertical: height * 0.13}, styles.titleContainer]}>
          <Text  style={styles.text}>{item.text}</Text>
        </View>
      </View>
    );
  }

  _onDone = () => {
    // User finished the introduction. Show real app through
    // navigation or simply by controlling state
    this.setState({ showApp: true });
  }
  render() {
    if (this.state.showApp) {
      return <Screen1 />;
    } else {
      return <AppIntroSlider renderItem={this._renderItem} data={slides} onDone={this._onDone}/>;
    }
  }
}

class Screen1 extends React.Component {
   render() {
    return (
      <View style={{alignItems:'center', justifyContent:'center', flex:1}}>
        <Text style={styles.text}> App Screen after Intro Slider </Text>
      </View>
    );
  };
}

Run instructions

Running in Android

cd into project directory (here IntroSliderApp)

cd IntroSliderApp

Run metro server to serve js

react-native start

Go to project directory in another terminal tab

Enter following run command for Android:

react-native run-android

Running in ios

cd into project directory (here IntroSliderApp)

cd IntroSliderApp

Enter following command :

react-native run-ios

This might take some time

If the app shows error about metro server not configured (check Running an App in iOS), then run metro server in another tab:

react-native start

Reload the app

Re-run react-native run-ios command if reloading doesn't work

React Native Welcome Slide Screen