How to Create an App Introduction Slider in React Native

Introduction sliders are beautiful slides that give a brief idea about the app to the user, especially when the user using the app for the first time. We say the first impression is the best impression. Make Introduction slider of your react native app beautiful as well as useful.

What makes react native so popular is the community behind it. There are so many open-source libraries we can implement in our react native projects. Let’s use react native intro slider to create an introduction slider in react native. It’s a FlatList based library and is very easy to implement.

I assume you already have a running react native project. Install react native intro slider using the following command.

npm i react-native-app-intro-slider --save

Firstly, import the library.

import AppIntroSlider from 'react-native-app-intro-slider';

Then define your slide data with images, titles and descriptions.

const slides = [
  {
    key: 'somethun',
    title: 'Title 1',
    text: 'Description.\nSay something cool',
    image: require('./assets/1.jpg'),
    backgroundColor: '#59b2ab',
  },
  {
    key: 'somethun-dos',
    title: 'Title 2',
    text: 'Other cool stuff',
    image: require('./assets/2.jpg'),
    backgroundColor: '#febe29',
  },
  {
    key: 'somethun1',
    title: 'Rocket guy',
    text: 'I\'m already out of descriptions\n\nLorem ipsum bla bla bla',
    image: require('./assets/3.jpg'),
    backgroundColor: '#22bcb5',
  }
];

Now, you can render the slides as given below.

<AppIntroSlider renderItem={this._renderItem} slides={slides} onDone={this._onDone}/>

Yes, I know, you need more clarity. You will get it once you go through the full react native example of the app introduction slider given below.

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
import image1 from './images/1.png';
import image2 from './images/2.png';
import image3 from './images/3.png';

const slides = [
  {
    key: '1',
    title: 'Hello All',
    text: 'Say something cool',
    image: image1,
    backgroundColor: '#59b2ab',
  },
  {
    key: '2',
    title: ' Be Cool',
    text: 'Other cool stuff',
    image: image2,
    backgroundColor: '#febe29',
  },
  {
    key: '3',
    title: 'Let us Start',
    text: 'We are already cool!',
    image: image3,
    backgroundColor: '#22bcb5',
  }
];

export default class App extends Component {
  constructor(props){
    super(props);
    this.state={
      showSlides: true
    }
  }

  renderSlide = ({ item }) => {
    return (
      <View style={styles.slide}>
        <Text style={styles.title}>{item.title}</Text>
        <Image source={item.image} />
        <Text style={styles.text}>{item.text}</Text>
      </View>
    );
  }
  onDone = () => {
    // User finished the introduction. Show real app through
    // navigation or simply by controlling state
    this.setState({ showSlides: false });
  }

  

  render() {
    if (!this.state.showSlides) {
      return <View style={styles.container}>
        <Text style= {styles.text}>
          You are Home!!
        </Text>


      </View>;
    } else {
      return <AppIntroSlider
       showSkipButton
       renderItem={this.renderItem} 
       slides={slides} 
       onDone={this.onDone}/>;
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 16
  }
});

Following is the output of react native example.