basic layout created and welcome onboarding screen implemented

components/custom-button.tsx

@@ -0,0 +1,58 @@
+import { ButtonProps } from "@/types/type";
+import React from "react";
+import { Text, TouchableOpacity } from "react-native";
+
+const getBgVariantStyle = (variant: ButtonProps["bgVariant"]) => {
+  switch (variant) {
+    case "secondary":
+      return "bg-gray-500";
+    case "danger":
+      return "bg-rose-500";
+    case "success":
+      return "bg-emerald-500";
+    case "outline":
+      return "bg-transparent-500 border-neutral-300 border-[0.5px]";
+    default:
+      return "bg-[#0286ff]";
+  }
+};
+
+const getTextVariantStyle = (variant: ButtonProps["textVariant"]) => {
+  switch (variant) {
+    case "primary":
+      return "text-black";
+    case "secondary":
+      return "text-gray-100";
+    case "danger":
+      return "text-rose-100";
+    case "success":
+      return "text-emerald-100";
+    default:
+      return "text-white";
+  }
+};
+
+export const CustomButton = ({
+  onPress,
+  title,
+  bgVariant = "primary",
+  textVariant = "default",
+  iconLeft: IconLeft,
+  iconRight: IconRight,
+  className,
+  ...props
+}: ButtonProps) => (
+  <TouchableOpacity
+    onPress={onPress}
+    className={`w-full rounded-full p-3 flex flex-row justify-center items-center shadow-md shadow-neutral-400/70 ${getBgVariantStyle(bgVariant)} ${className}`}
+    {...props}
+  >
+    {IconLeft && <IconLeft />}
+
+    <Text className={`text-lg font-bold ${getTextVariantStyle(textVariant)}`}>
+      {title}
+    </Text>
+
+    {IconRight && <IconRight />}
+  </TouchableOpacity>
+);