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:
},
{
key:
'2'
,
title:
'Explore Features'
,
text:
'Discover the amazing features that make our app stand out'
,
image:
},
{
key:
'3'
,
title:
'Get Started'
,
text:
'Start using our app and enjoy the benefits it offers'
,
image:
},
];
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 = () => {
Alert.alert(
'Welcome!'
,
`Thank you
for
using MyApp.
Start exploring and enjoy!`,
[
{
text:
'OK'
,
onPress: () => console.log(
'Welcome alert closed'
)
}
]
);
};
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'
,
backgroundColor:
'#0f1f24'
,
},
title: {
fontSize: 30,
fontWeight:
'bold'
,
marginBottom: 16,
color:
'#fff'
,
textAlign:
'center'
,
},
text: {
fontSize: 18,
textAlign:
'center'
,
color:
'#fff'
,
marginHorizontal: 20,
},
image: {
width: 250,
height: 250,
resizeMode:
'contain'
,
marginBottom: 32,
},
doneButton: {
backgroundColor:
'#2ecc71'
,
padding: 15,
borderRadius: 10,
marginVertical: 20,
},
doneButtonText: {
color:
'#fff'
,
fontSize: 18,
fontWeight:
'bold'
,
textAlign:
'center'
,
},
});
export
default
App;