In this article, I will guide you on how to create a really cool and beautiful welcome screen in React Native using the library: react-native-app-intro-slider.

The Welcome screen will include 3 sliders along with some lovely page transition animations. Welcome

Create a new React Native project and install the library using the following command:

npx react-native init IntroSliderApp

npm install react-native-app-intro-slider

react-native-vector-icons

Update the App component as follows:

import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
import {IMAGES} from './assets/images';
import Ionicons from "react-native-vector-icons/Ionicons";

const sliders = [
  {
    key: 'one',
    title: 'Title 1',
    text: 'Description.\nSay something cool',
    image: IMAGES.intro1,
    backgroundColor: '#59b2ab',
  },
  {
    key: 'two',
    title: 'Title 2',
    text: 'Other cool stuff',
    image: IMAGES.intro2,
    backgroundColor: '#febe29',
  },
  {
    key: 'three',
    title: 'Rocket guy',
    text: "I'm already out of descriptions\n\nLorem ipsum bla bla bla",
    image: IMAGES.intro3,
    backgroundColor: '#22bcb5',
  },
];

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showRealApp: false,
    };
  }

  _renderItem = ({item}) => {
    return (
      <View style={styles.slide}>
        <Text style={styles.title}>{item.title}</Text>
        <Image style={styles.image} source={item.image} />
        <Text style={styles.text}>{item.text}</Text>
      </View>
    );
  };

  _isDone = () => {
    this.setState({
      showRealApp: true,
    });
  };

  _renderNextButton = () => {
    return (
      <View style={styles.buttonCircle}>
        <Ionicons
          name="arrow-forward"
          color="rgba(255, 255, 255, .9)"
          size={24}
        />
      </View>
    );
  };
  _renderDoneButton = () => {
    return (
      <View style={styles.buttonCircle}>
        <Ionicons
          name="checkmark"
          color="rgba(255, 255, 255, .9)"
          size={24}
        />
      </View>
    );
  };

  render() {
    if (this.state.showRealApp) {
      return (
        <Text>Login Screen!</Text>
      );
    } else {
      return (
        <AppIntroSlider
          renderItem={this._renderItem}
          data={sliders}
          onDone={this._isDone}
          renderNextButton={this._renderNextButton}
          renderDoneButton={this._renderDoneButton}
        />
      );
    }
  }
}

const styles = StyleSheet.create({
  slide: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'hsla(0, 100%, 50%, 0.1);',
  },
  image: {
    width: 320,
    height: 320,
    marginVertical: 32,
  },
  text: {
    textAlign: 'center',
  },
  title: {
    fontSize: 22,
    textAlign: 'center',
  },
  buttonCircle: {
    width: 40,
    height: 40,
    backgroundColor: 'rgba(0, 0, 0, .2)',
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Prepare three images corresponding to the three sliders, you can click to download them below:

Next, put the images into the IntroSliderApp/src/assets/images folder. Create an index.js file in the images folder with the following content:

// IntroSliderApp\src\assets\images\index.js
export const IMAGES = {
  intro1: require('../images/1.jpg'),
  intro2: require('../images/2.jpg'),
  intro3: require('../images/3.jpg'),
};

That’s it! Now, build and run the app on your Android device to experience it!

Please note that I am using icons from react-native-vector-icons/Ionicons. If the icons do not work, add the following line of code: apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" In the android/app/build.gradle file, the icons will be displayed correctly.