feature

deskripsi:
- new component stack

app/(application)/profile/[id]/edit.tsx

@@ -1,11 +1,18 @@
-import { Text, View } from "react-native";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { TextInputCustom, ViewWrapper } from "@/components";
+import { StackCustom } from "@/components/Stack";
 import { useLocalSearchParams } from "expo-router";
 
 export default function ProfileEdit() {
   const { id } = useLocalSearchParams();
   return (
-        <View>
+    <ViewWrapper>
-            <Text>Profile Edit {id}</Text>
+      <StackCustom>
-        </View>
+        <TextInputCustom label="Nama" value="Nama" required />
-    )
+        <TextInputCustom label="Email" value="Email" required />
+        <TextInputCustom label="Alamat" value="Alamat" required />
+        
+      </StackCustom>
+    </ViewWrapper>
+  );
 }

app/(application)/profile/_layout.tsx

@@ -1,7 +1,6 @@
-import { MainColor } from "@/constants/color-palet";
+import { BackButton } from "@/components";
 import { GStyles } from "@/styles/global-styles";
-import { Ionicons } from "@expo/vector-icons";
+import { Stack } from "expo-router";
-import { router, Stack } from "expo-router";
 
 export default function ProfileLayout() {
   return (
@@ -12,14 +11,7 @@ export default function ProfileLayout() {
           headerTitleStyle: GStyles.headerTitleStyle,
           headerTitleAlign: "center",
           headerBackButtonDisplayMode: "minimal",
-          headerLeft: () => (
+          headerLeft: () => <BackButton />,
-            <Ionicons
-              name="arrow-back"
-              size={20}
-              color={MainColor.yellow}
-              onPress={() => router.back()}
-            />
-          ),
         }}
       >
         {/* <Stack.Screen name="[id]/index" options={{ headerShown: false }} /> */}

components/Stack/StackCustom.tsx

@@ -0,0 +1,66 @@
+// components/Stack.tsx
+
+import React from "react";
+import { View, ViewStyle, StyleSheet } from "react-native";
+
+import { AlignType, GapSizeType, JustifyType } from "@/components/Stack/stack-types";
+
+interface StackProps {
+  children: React.ReactNode;
+  align?: AlignType;
+  justify?: JustifyType;
+  gap?: GapSizeType;
+  direction?: "row" | "column";
+  style?: ViewStyle | ViewStyle[];
+}
+
+const StackCustom: React.FC<StackProps> = ({
+  children,
+  align = "stretch",
+  justify = "flex-start",
+  gap = "md",
+  direction = "column",
+  style,
+}) => {
+  const spacing = convertToSpacing(gap);
+
+  return (
+    <View
+      style={[
+        // styles.stack,
+        {
+          flexDirection: direction,
+          alignItems: align,
+          justifyContent: justify,
+          gap: spacing,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+// Fungsi untuk mengubah nilai gap ke dalam ukuran pixel
+const convertToSpacing = (value: GapSizeType): number => {
+  if (typeof value === "number") return value;
+
+  const sizes: Record<string, number> = {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+  };
+
+  return sizes[value] || 16; // default md
+};
+
+const styles = StyleSheet.create({
+  stack: {
+    flex: 1,
+  },
+});
+
+export default StackCustom;

components/Stack/index.ts

@@ -0,0 +1,3 @@
+import StackCustom from "./StackCustom";
+
+export { StackCustom };

components/Stack/stack-types.ts

@@ -0,0 +1,19 @@
+// types/stack.types.ts
+
+export type AlignType =
+  | "stretch"
+  | "flex-start"
+  | "center"
+  | "flex-end"
+  | "baseline";
+
+export type JustifyType =
+  | "flex-start"
+  | "center"
+  | "flex-end"
+  | "space-between"
+  | "space-around"
+  | "space-evenly";
+
+export type GapSizeType = "xs" | "sm" | "md" | "lg" | "xl" | number;
+// | string;

components/TextInput/index.ts

@@ -0,0 +1,3 @@
+import { TextInputCustom } from "./TextInputCustom";
+
+export { TextInputCustom };

screens/Authentication/LoginView.tsx

@@ -8,7 +8,6 @@ import { useState } from "react";
 import { Text, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
 
-
 export default function LoginView() {
   const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
   const [inputValue, setInputValue] = useState<string>("");
@@ -25,9 +24,10 @@ export default function LoginView() {
     const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
     const fixNumber = callingCode + inputValue;
     console.log(fixNumber);
-    // router.navigate("/(application)/profile/1");
+    const id = fixNumber.replace(/\D/g, "");
-    router.navigate("/(application)/home");
 
+    router.navigate(`/(application)/profile/${id}`);
+    // router.navigate("/(application)/home");
   }
 
   return (