Newby Coder header banner

React Native Welcome Slide Screen

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


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


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 ..


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

A slide has following properties :

App code

Following code implements AppIntroSlider

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:''},
    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() {

    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 style={[{bottom:0, paddingVertical: height * 0.13}, styles.titleContainer]}>
          <Text  style={styles.text}>{item.text}</Text>

  _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>

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