What is intro slider in React Native ?

We will walk through the process of creating a beautiful image slider in a React Native application using the react-native-app-intro-slider package. The image slider will serve as an onboarding feature, introducing users to key features of your app.

Prerequisites:

• React Native
• Node and NPM

Approach:

• We’ll use React Native, a popular framework for building mobile applications, along with the react-native-app-intro-slider package to simplify the creation of the image slider.
• The onboarding experience will consist of a series of slides with titles, descriptions, and images to guide users through the app’s features.
• slides array contains data for individual slides, including titles, descriptions, and image paths.
• The App component renders an AppIntroSlider component with custom render functions for slides and a “Done” button.
• renderSlide function generates JSX for each slide, displaying title, image, and description in a styled view.
• The styles object defines styles for slides, titles, descriptions, images, and the “Done” button, creating a visually appealing UI.
• Pressing the “Done” button triggers the onDone function, displaying a welcome alert and allowing for additional actions, such as navigating to the main screen.

Steps to Create the Application:

Step 1: Set Up a React Native Project

npx react-native init ImageSliderApp

Step 2: Switching to the project directory:

cd ImageSliderApp

Step 3: Install the Required Package

npm install react-native-app-intro-slider

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react-native-paper": "4.9.2",
    "@expo/vector-icons": "^13.0.0",
    "react-native-swiper": "*",
    "react-native-app-intro-slider": "*"
}

Example: Below is the basic example of the intro slider:

Javascript

import React from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
    TouchableOpacity,
    Alert
} from 'react-native';
import AppIntroSlider
    from 'react-native-app-intro-slider';

const slides = [
    {
        key: '1',
        title: 'Welcome to MyApp!',
        text: 'A simple and beautiful intro slider for your app',
        image:
        // Replace with your own images
{ uri: 'https://media.geeksforgeeks.org/wp-content/uploads/20240125144446/intro1.png' },
    },
    {
        key: '2',
        title: 'Explore Features',
        text: 'Discover the amazing features that make our app stand out',
        image:
        // Replace with your own images
{ uri: 'https://media.geeksforgeeks.org/wp-content/uploads/20240123225418/intro3.jpeg' },
    },
    {
        key: '3',
        title: 'Get Started',
        text: 'Start using our app and enjoy the benefits it offers',
        image:
        // Replace with your own images
{ uri: 'https://media.geeksforgeeks.org/wp-content/uploads/20240123225418/intro3.jpeg' },
    },
];

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

    const onDone = () => {
        // Display a welcome alert
        Alert.alert(
            'Welcome!',
            `Thank you for using MyApp.
            Start exploring and enjoy!`,
            [
                {
                    text: 'OK',
                    onPress: () => console.log('Welcome alert closed')
                }
            ]
        );

        // You can also perform additional actions here,
        // such as navigating to the main screen
    };

    const renderDoneButton = () => {
        return (
            <TouchableOpacity onPress={onDone}
                style={styles.doneButton}>
                <Text style={styles.doneButtonText}>
                    Done
                </Text>
            </TouchableOpacity>
        );
    };

    return (
        <AppIntroSlider
            data={slides}
            renderItem={renderSlide}
            renderDoneButton={renderDoneButton}
            onDone={onDone} />
    );
};

const styles = StyleSheet.create({
    slide: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        // Background color for the slides
        backgroundColor: '#0f1f24',
    },
    title: {
        fontSize: 30,
        fontWeight: 'bold',
        marginBottom: 16,
        // Text color for the title
        color: '#fff',
        textAlign: 'center',
    },
    text: {
        fontSize: 18,
        textAlign: 'center',
        // Text color for the description
        color: '#fff',
        marginHorizontal: 20,
    },
    image: {
        width: 250,
        height: 250,
        resizeMode: 'contain',
        marginBottom: 32,
    },
    doneButton: {
        // Background color for the "Done" button
        backgroundColor: '#2ecc71',
        padding: 15,
        borderRadius: 10,
        marginVertical: 20,
    },
    doneButtonText: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'center',
    },
});

export default App;

Step to run the app:

npx react-native run-android
# or
npx react-native run-ios

Output: