basic layout created and welcome onboarding screen implemented

2024-08-29 08:29:58 +00:00
parent a72a83ebe3
commit 77030fd4c2
16 changed files with 481 additions and 12 deletions
@@ -0,0 +1,65 @@
+import { CustomButton } from "@/components/custom-button";
+import { onboarding } from "@/constants";
+import { router } from "expo-router";
+import { useRef, useState } from "react";
+import { Image, Text, TouchableOpacity, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import Swiper from "react-native-swiper";
+
+const Welcome = () => {
+  const swiperRef = useRef<Swiper>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const isLastSlide = activeIndex === onboarding.length - 1;
+
+  return (
+    <SafeAreaView className="flex h-full items-center justify-between bg-white">
+      <TouchableOpacity
+        onPress={() => router.replace("/(auth)/sign-up")}
+        className="w-full flex justify-end items-end p-5"
+      >
+        <Text className="text-black text-base font-JakartaBold">Skip</Text>
+      </TouchableOpacity>
+
+      <Swiper
+        ref={swiperRef}
+        loop={false}
+        dot={<View className="w-8 h-1 mx-1 bg-[#E2E8F0] rounded-full" />}
+        activeDot={<View className="w-8 h-1 mx-1 bg-[#0286FF] rounded-full" />}
+        index={activeIndex}
+        onIndexChanged={setActiveIndex}
+      >
+        {onboarding.map((item) => (
+          <View key={item.id} className="flex items-center justify-center p-5">
+            <Image
+              source={item.image}
+              className="w-full h-[300px]"
+              resizeMode="contain"
+            />
+
+            <View className="flex flex-row items-center justify-center w-full mt-10">
+              <Text className="text-black text-3xl font-bold mx-10 text-center">
+                {item.title}
+              </Text>
+            </View>
+
+            <Text className="text-base font-JakartaSemiBold text-center text-[#858585] mx-10 mt-3">
+              {item.description}
+            </Text>
+          </View>
+        ))}
+      </Swiper>
+
+      <CustomButton
+        onPress={() =>
+          isLastSlide
+            ? router.replace("/(auth)/sign-up")
+            : swiperRef.current?.scrollBy(1)
+        }
+        title={isLastSlide ? "Get Started" : "Next"}
+        className="w-11/12 mt-10"
+      />
+    </SafeAreaView>
+  );
+};
+
+export default Welcome;