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:
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.w3wiki.net/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.w3wiki.net/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.w3wiki.net/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:
Contact Us