resourcing tabs

deskripsi:
- coba tabs

app/index.tsx

@@ -1,23 +1,33 @@
 import Spacing from "@/components/_ShareComponent/Spacing";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import ButtonCustom from "@/components/Button/ButtonCustom";
-import { TextInputCustom } from "@/components/TextInput/TextInputCustom";
 import { MainColor } from "@/constants/color-palet";
 import { globalStyles } from "@/constants/global-styles";
-import { useNavigation, useRouter } from "expo-router";
-import { useEffect, useState } from "react";
+import { useRouter } from "expo-router";
+import { useState } from "react";
 import { Text, View } from "react-native";
+import PhoneInput, { ICountry } from "react-native-international-phone-number";
 
 export default function Login() {
   const router = useRouter();
-  const navigation = useNavigation();
-  const [phone, setPhone] = useState("");
 
-  useEffect(() => {
-    navigation.setOptions({
-      headerShown: false,
-    });
-  }, [navigation]);
+  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
+  const [inputValue, setInputValue] = useState<string>("");
+
+  function handleInputValue(phoneNumber: string) {
+    setInputValue(phoneNumber);
+  }
+
+  function handleSelectedCountry(country: ICountry) {
+    setSelectedCountry(country);
+  }
+
+  function handleLogin() {
+    const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
+    const fixNumber = callingCode + inputValue;
+    console.log(fixNumber);
+    router.push("/verification");
+  }
 
   return (
     <ViewWrapper>
@@ -35,6 +45,7 @@ export default function Login() {
             <Text style={globalStyles.authTitle}>HIPMI BADUNG APPS</Text>
             <Spacing height={5} />
           </View>
+          <Spacing height={50} />
           <Text
             style={{
               position: "absolute",
@@ -51,21 +62,32 @@ export default function Login() {
         </View>
 
         {/* Input dengan prefix teks */}
-        <TextInputCustom
+        {/* <TextInputCustom
           label="Nomor Telepon"
           placeholder="Masukkan nomor"
           value={phone}
           onChangeText={setPhone}
           iconLeft="+62"
           keyboardType="phone-pad"
+        /> */}
+
+        <PhoneInput
+          value={inputValue}
+          onChangePhoneNumber={handleInputValue}
+          selectedCountry={selectedCountry}
+          onChangeSelectedCountry={handleSelectedCountry}
+          defaultCountry="ID"
+          placeholder="Masukkan nomor"
         />
 
+        <Spacing height={20} />
+
         <ButtonCustom
           title="Login"
           backgroundColor={MainColor.yellow}
           textColor={MainColor.black}
           radius={10}
-          onPress={() => router.push("/verification")}
+          onPress={handleLogin}
         />
       </View>
     </ViewWrapper>