140 lines
3.6 KiB
JavaScript
140 lines
3.6 KiB
JavaScript
import React, { useRef, useEffect, useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
Image,
|
|
FlatList,
|
|
Dimensions,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
} from "react-native";
|
|
import { useNavigation } from "@react-navigation/native"; // Mengimpor useNavigation
|
|
|
|
const { width } = Dimensions.get("window");
|
|
|
|
const slides = [
|
|
{
|
|
id: "1",
|
|
image: require("../assets/images/onboarding1.png"),
|
|
text: "Temukan lokasi tempat pembuangan sampah terdekat.",
|
|
},
|
|
{
|
|
id: "2",
|
|
image: require("../assets/images/onboarding2.png"),
|
|
text: "Laporkan sampah dan bantu lingkungan jadi lebih bersih.",
|
|
},
|
|
{
|
|
id: "3",
|
|
image: require("../assets/images/onboarding3.png"),
|
|
text: "Tukar poinmu dengan barang bermanfaat untuk sehari-hari.",
|
|
},
|
|
];
|
|
|
|
const Onboarding = () => {
|
|
const flatListRef = useRef(null);
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
const navigation = useNavigation(); // Mendapatkan objek navigasi
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
if (currentIndex < slides.length - 1) {
|
|
flatListRef.current?.scrollToIndex({
|
|
index: currentIndex + 1,
|
|
animated: true,
|
|
});
|
|
}
|
|
}, 1000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [currentIndex]);
|
|
|
|
const handleNext = () => {
|
|
navigation.navigate("AksesAkun"); // Mengarahkan ke layar "AksesAkun"
|
|
};
|
|
|
|
const renderItem = ({ item }) => (
|
|
<View style={styles.slide}>
|
|
<Image source={item.image} style={styles.image} resizeMode="contain" />
|
|
<Text style={styles.text}>{item.text}</Text>
|
|
</View>
|
|
);
|
|
|
|
const onViewableItemsChanged = useRef(({ viewableItems }) => {
|
|
if (viewableItems.length > 0) {
|
|
setCurrentIndex(viewableItems[0].index);
|
|
}
|
|
}).current;
|
|
|
|
const viewConfigRef = useRef({ viewAreaCoveragePercentThreshold: 50 });
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<FlatList
|
|
ref={flatListRef}
|
|
data={slides}
|
|
horizontal
|
|
pagingEnabled
|
|
showsHorizontalScrollIndicator={false}
|
|
renderItem={renderItem}
|
|
keyExtractor={(item) => item.id}
|
|
onViewableItemsChanged={onViewableItemsChanged}
|
|
viewabilityConfig={viewConfigRef.current}
|
|
/>
|
|
|
|
<View style={styles.dotsContainer}>
|
|
{slides.map((_, index) => (
|
|
<View
|
|
key={index}
|
|
style={[styles.dot, index === currentIndex && styles.activeDot]}
|
|
/>
|
|
))}
|
|
</View>
|
|
|
|
{currentIndex === slides.length - 1 && (
|
|
<TouchableOpacity style={styles.nextButton} onPress={handleNext}>
|
|
<Text style={styles.nextText}>LANJUT</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: "#fff", marginBottom: 0 },
|
|
slide: { width, alignItems: "center", justifyContent: "center", padding: 20 },
|
|
image: { width: 250, height: 250, marginBottom: 30 },
|
|
text: {
|
|
fontSize: 18,
|
|
color: "#000",
|
|
textAlign: "center",
|
|
paddingHorizontal: 20,
|
|
},
|
|
dotsContainer: {
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
marginBottom: 40,
|
|
},
|
|
dot: {
|
|
width: 10,
|
|
height: 10,
|
|
borderRadius: 5,
|
|
backgroundColor: "#aaa",
|
|
marginHorizontal: 5,
|
|
},
|
|
activeDot: { backgroundColor: "#435739" },
|
|
nextButton: {
|
|
position: "absolute",
|
|
bottom: 50,
|
|
alignSelf: "flex-end",
|
|
backgroundColor: "#435739",
|
|
paddingHorizontal: 26,
|
|
paddingVertical: 16,
|
|
elevation: 3,
|
|
borderRadius: 10,
|
|
marginHorizontal: 20,
|
|
},
|
|
nextText: { color: "#fff", fontSize: 18, fontWeight: "bold" },
|
|
});
|
|
|
|
export default Onboarding;
|