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

@@ -6,7 +6,8 @@ import {
   TextInputCustom,
   ViewWrapper,
 } from "@/components";
-import { useLocalSearchParams } from "expo-router";
+import { MainColor } from "@/constants/color-palet";
+import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 import { Text } from "react-native";
 
@@ -21,10 +22,10 @@ export default function ProfileEdit() {
     <ViewWrapper
       bottomBarComponent={
         <ButtonCustom
-          radius={30}
           disabled={!nama || !email || !alamat}
           onPress={() => {
             console.log("data >>", nama, email, alamat);
+            // router.back();
           }}
         >
           Simpan

components/Button/ButtonCustom.tsx

@@ -3,9 +3,14 @@
 import React from "react";
 import { Text, TouchableOpacity } from "react-native";
 import buttonStyles from "./buttonCustomStyles";
-import { RADIUS_BUTTON } from "@/constants/constans-value";
+import { radiusMap } from "@/constants/radius-value";
+import { MainColor } from "@/constants/color-palet";
 
-// Definisi props dengan TypeScript
+// Import radiusMap
+
+
+// Definisi type untuk radius
+type RadiusType = keyof typeof radiusMap | number;
 
 interface ButtonProps {
   children?: React.ReactNode;
@@ -13,36 +18,28 @@ interface ButtonProps {
   title?: string;
   backgroundColor?: string;
   textColor?: string;
-  radius?: number;
+  radius?: RadiusType; // ← bisa string enum atau number
   disabled?: boolean;
   iconLeft?: React.ReactNode;
 }
 
-/**
- * Props untuk ButtonCustom
- * @param onPress: () => void
- * @param title?: string
- * @param backgroundColor?: string
- * @param textColor?: string
- * @param radius?: number
- * @param disabled?: boolean
- * @param iconLeft?: React.ReactNode
- * @example iconLeft={<Icon name="arrow-right" size={20} color={MainColor.black}/>
- */
 const ButtonCustom: React.FC<ButtonProps> = ({
   children,
   onPress,
   title = "Button",
-  backgroundColor = "#007AFF",
-  textColor = "#FFFFFF",
-  radius = 8,
+  backgroundColor = MainColor.yellow,
+  textColor = MainColor.black,
+  radius = "full", // default md
   disabled = false,
   iconLeft,
 }) => {
+  const borderRadius =
+    typeof radius === "number" ? radius : radiusMap[radius ?? "md"]; // fallback ke 'md'
+
   const styles = buttonStyles({
     backgroundColor,
     textColor,
-    borderRadius: RADIUS_BUTTON || radius,
+    borderRadius,
   });
 
   return (
@@ -54,7 +51,7 @@ const ButtonCustom: React.FC<ButtonProps> = ({
     >
       {/* Render icon jika tersedia */}
       {iconLeft && iconLeft}
-      <Text style={styles.buttonText}>{children}</Text>
+      <Text style={styles.buttonText}>{children || title}</Text>
     </TouchableOpacity>
   );
 };

constants/radius-value.ts

@@ -0,0 +1,10 @@
+// constants/radius.ts
+
+export const radiusMap = {
+  xs: 2,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  full: 100,
+} as const;

screens/Authentication/LoginView.tsx

@@ -23,8 +23,13 @@ export default function LoginView() {
   function handleLogin() {
     const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
     const fixNumber = callingCode + inputValue;
-    console.log(fixNumber);
-    const id = fixNumber.replace(/\D/g, "");
+    // console.log("fixNumber", fixNumber); 
+    // router.navigate("/verification");
+
+    const randomAlfabet = Math.random().toString(36).substring(2, 8);
+    const randomNumber = Math.floor(Math.random() * 1000000);
+    const id = randomAlfabet + randomNumber + fixNumber;
+    console.log("user id :", id);
 
     router.navigate(`/(application)/profile/${id}`);
     // router.navigate("/(application)/home");
@@ -67,13 +72,7 @@ export default function LoginView() {
 
         <Spacing height={20} />
 
-        <ButtonCustom
-          title="Login"
-          backgroundColor={MainColor.yellow}
-          textColor={MainColor.black}
-          radius={10}
-          onPress={handleLogin}
-        />
+        <ButtonCustom onPress={handleLogin}>Login</ButtonCustom>
       </View>
     </ViewWrapper>
   );

screens/Authentication/RegisterView.tsx

@@ -7,8 +7,14 @@ import { GStyles } from "@/styles/global-styles";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { Text, View } from "react-native";
+import { useState } from "react";
 
 export default function RegisterView() {
+  const [username, setUsername] = useState("Bagas Banuna");
+  const handleRegister = () => {
+    console.log("Success register", username);
+    router.push("/(application)/home");
+  };
   return (
     <>
       <ViewWrapper withBackground>
@@ -30,24 +36,18 @@ export default function RegisterView() {
               <Text style={GStyles.textLabel}>+6282xxxxxxxxx</Text>
               <Spacing />
             </View>
-            <TextInputCustom placeholder="Masukkan username" />
-
-            <ButtonCustom
-              title="Daftar"
-              backgroundColor={MainColor.yellow}
-              textColor={MainColor.black}
-              radius={10}
-              onPress={() => (
-                console.log("Success register"),
-                router.push("/(application)/home")
-              )}
+            <TextInputCustom
+              placeholder="Masukkan username"
+              value={username}
+              onChangeText={(text) => setUsername(text)}
             />
+
+            <ButtonCustom onPress={handleRegister}>Daftar</ButtonCustom>
             {/* <Spacing />
             <ButtonCustom
               title="Coba"
               backgroundColor={MainColor.yellow}
               textColor={MainColor.black}
-              radius={10}
               onPress={() => {
                 console.log("Home clicked");
                 router.push("/(application)/coba");

screens/Authentication/VerificationView.tsx

@@ -8,6 +8,10 @@ import { Text, View } from "react-native";
 import { OtpInput } from "react-native-otp-entry";
 
 export default function VerificationView() {
+  const handleVerification = () => {
+    console.log("Verification clicked");
+    router.push("/register");
+  };
   return (
     <>
       <ViewWrapper withBackground>
@@ -48,12 +52,12 @@ export default function VerificationView() {
           </View>
 
           <ButtonCustom
-            title="Verifikasi"
             backgroundColor={MainColor.yellow}
             textColor={MainColor.black}
-            radius={10}
-            onPress={() => router.push("/register")}
-          />
+            onPress={() => handleVerification()}
+          >
+            Verifikasi
+          </ButtonCustom>
         </View>
       </ViewWrapper>
     </>