How to Create an App Introduction Slider in React Native

Last Updated on December 11, 2019.

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.

I hope this react native tutorial helped you!

3 thoughts on “How to Create an App Introduction Slider in React Native”

  1. TypeError: Cannot read property ‘length’ of undefined

    152 | return (
    153 | (this.flatList = ref)} data={this.props.data} horizontal pagingEnabled showsHorizontalScrollIndicator={false} bounces={false} style={styles.flatList} renderItem={this._renderItem} onMomentumScrollEnd={this._onMomentumScrollEnd} extraData={extra} onLayout={this._onLayout}
    154 | // make sure all slides are rendered so we can use dots to navigate to them
    > 155 | initialNumToRender={data.length} {…otherProps}/>
    | ^ 156 | {renderPagination
    157 | ? renderPagination(this.state.activeIndex)
    158 | : this._renderPagination()}

    I am studying RN now only, I am unable to solve this error

    1. I’m not sure if you still require any help with this, but I also ran into this issue and managed to find a fix. The issue can be resolved by changing the prop called slides in the returned instance in the render() block, to data. e.g:

      From this:

      To this:

      Seems like the class needs a prop specifically called data in order to use the array of slides.Hope this also solves the issue for you!

Leave a Reply to redman6 Cancel reply

%d bloggers like this: