47 lines
2.3 KiB
TypeScript
47 lines
2.3 KiB
TypeScript
import { router } from "expo-router";
|
|
import { Text, TouchableOpacity, View, Image } from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
import tw from "twrnc";
|
|
import Swiper from "react-native-swiper";
|
|
import { useRef, useState } from "react";
|
|
import { onboarding } from "@/constants";
|
|
import CustomButton from "@/components/CustomButton";
|
|
const Onboarding = () => {
|
|
const swiperRef = useRef<Swiper>(null);
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
const isLastSlide = activeIndex === onboarding.length-1;
|
|
return (
|
|
<SafeAreaView style={tw`flex h-full items-center justify-between bg-white`}>
|
|
<TouchableOpacity
|
|
onPress={() => { router.replace("/(auth)/sign-up"); }}
|
|
style={tw`w-full flex justify-end items-end p-5 `}>
|
|
<Text style={tw`text-black flex text-base font-JakartaBold `}>Skip</Text>
|
|
</TouchableOpacity>
|
|
<Swiper ref={swiperRef} loop={false}
|
|
dot={<View style={tw`w-[32px] h-[4px] mx-1 bg-[#E2E8F0] rounded-full `} />}
|
|
activeDot={
|
|
<View style={tw`w-[32px] h-[4px] mx-1 bg-[#0286FF] rounded-full `} />
|
|
}
|
|
onIndexChanged={(index) => setActiveIndex(index)}
|
|
>
|
|
{onboarding.map((item) =>
|
|
(<View key={item.id} style={tw`flex items-center justify-center p-5`}>
|
|
<Image
|
|
source={item.image}
|
|
style={tw`w-full h-[300px]`}
|
|
resizeMode="contain"
|
|
/>
|
|
<View style={tw`flex flex-row items-center justify-center w-full mt-10`}>
|
|
<Text style={tw`text-black text-3xl font-bold mx-10 text-center`}>{item.title}</Text>
|
|
</View>
|
|
<Text style={tw`text-lg font-JakartaSemiBold text-center text-[#858585] mx-10 mt-3`}>{item.description}</Text>
|
|
</View>))
|
|
}
|
|
</Swiper>
|
|
<CustomButton title={isLastSlide ? "Get Started": "Next"}
|
|
onPress={()=>isLastSlide ? router.replace("/(auth)/sign-up") : swiperRef.current ?. scrollBy(1)}
|
|
style={tw`w-11/12 mt-10`}/>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
export default Onboarding;
|