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
},
{
key: '2' ,
title: 'Explore Features' ,
text: 'Discover the amazing features that make our app stand out' ,
image:
// Replace with your own images
},
{
key: '3' ,
title: 'Get Started' ,
text: 'Start using our app and enjoy the benefits it offers' ,
image:
// Replace with your own images
},
]; 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:
Recommended Articles