resolved some conflicts leftover issues. This is now the cleanest latest Dev

component/multiStepForm/formComponent/formPages/basicInformation.tsx

@@ -1,97 +0,0 @@
-import { View, Text, StyleSheet } from "react-native";
-import NormalInput from "../../../global/normal_input";
-import { useState } from "react";
-import DateModal from "../../../global/date_input";
-import NormalButton from "../../../global/normal_button";
-import useSignUpStore from "../../../../providers/signup_form_store";
-
-type basicInformationProps = {
-	goToNextPage: () => void;
-};
-
-const BasicInformation: React.FC<basicInformationProps> = ({ goToNextPage }) => {
-	const { signUpFormData, setSignUpFormData } = useSignUpStore();
-	const [error, setError] = useState("");
-	const handleNext = () => {
-		if (signUpFormData.name === "" || signUpFormData.password === "" || signUpFormData.birthDate === "") {
-			setError("請確保所有資料都已填寫。");
-		} else {
-			setError("");
-			goToNextPage();
-		}
-	};
-
-	const nameFieldPlaceholder = signUpFormData.name ? signUpFormData.name : "姓名";
-
-	return (
-		<>
-			<View style={styles.container}>
-				<Text style={styles.text}>請填妥以下資料</Text>
-				<View
-					style={{
-						display: "flex",
-						flexDirection: "column",
-						gap: 10,
-					}}
-				>
-					<NormalInput
-						value={signUpFormData.name}
-						placeholder={nameFieldPlaceholder}
-						onChangeText={(text) => {
-							setSignUpFormData({ ...signUpFormData, name: text });
-						}}
-					/>
-
-					<NormalInput
-						placeholder="帳戶密碼"
-						onChangeText={(text) => {
-							setSignUpFormData({ ...signUpFormData, password: text });
-						}}
-						secureTextEntry={true}
-					/>
-
-					<View style={{ display: "flex", flexDirection: "row", gap: 10 }}>
-						{/* await YoYo's code review for gender */}
-						<NormalInput
-							placeholder="性別"
-							onChangeText={(t) => console.log(t)}
-							extendedStyle={{ width: "50%" }}
-						/>
-
-						<DateModal
-							placeholder={signUpFormData.birthDate ? signUpFormData.birthDate : "DD/MM/YY"}
-							onDateChange={(date) => {
-								setSignUpFormData({ ...signUpFormData, birthDate: date });
-							}}
-						/>
-					</View>
-					<NormalButton
-						title={<Text style={{ color: "#fff" }}>下一步</Text>}
-						onPress={handleNext}
-						extendedStyle={{}}
-					/>
-				</View>
-				{error && <Text style={styles.errorMessage}>{error}</Text>}
-			</View>
-		</>
-	);
-};
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		marginHorizontal: 20,
-	},
-	text: {
-		fontSize: 20,
-		paddingBottom: 10,
-	},
-	errorMessage: {
-		fontSize: 14,
-		color: "#ff0033",
-		fontWeight: "400",
-		marginLeft: 10,
-		marginTop: 10,
-	},
-});
-export default BasicInformation;

component/multiStepForm/multi_step_form.tsx

@@ -1,29 +0,0 @@
-import { View, StyleSheet } from 'react-native';
-import { StatusBar } from 'expo-status-bar';
-import { useEffect } from 'react';
-import useSignUpStore from '../../providers/signup_form_store';
-import Form from '../registrationMultiStepForm/formComponent/form';
-
-const MultiStepForm: React.FC = () => {
-    const { signUpFormData } = useSignUpStore();
-    //logging to check if parent component can successfully receive user input in the multi-step form
-    useEffect(() => {
-        console.log('Current Zustand Store:', signUpFormData);
-    }, [signUpFormData]);
-
-    return (
-        <View style={styles.container}>
-            <Form />
-            <StatusBar style="auto" />
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#FFFFFF'
-    }
-});
-
-export default MultiStepForm;

component/registrationMultiStepForm/formComponent/form.tsx

@@ -1,117 +1,153 @@
-import { useState } from "react";
-import { View, Text, StyleSheet, Pressable, TouchableWithoutFeedback, Keyboard } from "react-native";
-import Verification from "./formPages/verification";
-import BasicInformation from "./formPages/basicInformation";
-import UberDriver from "./formPages/uberDriver";
-import CarInformation from "./formPages/carInformation";
-import PaginationIndicator from "../../global/PaginationIndicator";
-import CreateWallet from "./formPages/createWallet";
-import FinishSignUp from "./formPages/finishSignUp";
-import LoginPage from "./formPages/loginPage";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import { useState } from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    Pressable,
+    TouchableWithoutFeedback,
+    Keyboard
+} from 'react-native';
+import Verification from './formPages/verification';
+import BasicInformation from './formPages/basicInformation';
+import UberDriver from './formPages/uberDriver';
+import CarInformation from './formPages/carInformation';
+import PaginationIndicator from '../../global/PaginationIndicator';
+import CreateWallet from './formPages/createWallet';
+import FinishSignUp from './formPages/finishSignUp';
+import LoginPage from './formPages/loginPage';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 
 type FormProps = {};
 const Form: React.FC<FormProps> = ({}) => {
-	const [screen, setScreen] = useState<number>(0);
-	const FormTitle = [
-		"",
-		"註冊 - 電話驗證",
-		"註冊 - 基本資料",
-		"註冊 - Uber Driver",
-		"註冊 - 車輛資料",
-		"註冊 - 設立銀包",
-	];
+    const [screen, setScreen] = useState<number>(0);
+    const FormTitle = [
+        '',
+        '註冊 - 電話驗證',
+        '註冊 - 基本資料',
+        '註冊 - Uber Driver',
+        '註冊 - 車輛資料',
+        '註冊 - 設立銀包'
+    ];
 
-	const ScreenDisplay = () => {
-		switch (screen) {
-			case 0:
-				return <LoginPage goToNextPage={goToNextPage} />;
-			case 1:
-				return <Verification setScreen={setScreen} />;
-			case 2:
-				return <BasicInformation goToNextPage={goToNextPage} />;
-			case 3:
-				return <UberDriver goToNextPage={goToNextPage} />;
-			case 4:
-				return <CarInformation goToNextPage={goToNextPage} />;
-			case 5:
-				return <CreateWallet goToNextPage={goToNextPage} />;
-			case 6:
-				return <FinishSignUp />;
-			default:
-				return <></>;
-		}
-	};
+    const ScreenDisplay = () => {
+        switch (screen) {
+            case 0:
+                return <LoginPage goToNextPage={goToNextPage} />;
+            case 1:
+                return <Verification setScreen={setScreen} />;
+            case 2:
+                return <BasicInformation goToNextPage={goToNextPage} />;
+            case 3:
+                return <UberDriver goToNextPage={goToNextPage} />;
+            case 4:
+                return <CarInformation goToNextPage={goToNextPage} />;
+            case 5:
+                return <CreateWallet goToNextPage={goToNextPage} />;
+            case 6:
+                return <FinishSignUp />;
+            default:
+                return <></>;
+        }
+    };
 
-	const goToPreviousPage = () => {
-		setScreen((prevState) => {
-			if (prevState > 0) {
-				return prevState - 1;
-			} else {
-				return prevState;
-			}
-		});
-	};
+    const goToPreviousPage = () => {
+        setScreen((prevState) => {
+            if (prevState > 0) {
+                return prevState - 1;
+            } else {
+                return prevState;
+            }
+        });
+    };
 
-	const goToNextPage = () => {
-		setScreen((prevState) => {
-			if (prevState < 6) {
-				return prevState + 1;
-			} else {
-				return prevState;
-			}
-		});
-	};
+    const goToNextPage = () => {
+        setScreen((prevState) => {
+            if (prevState < 6) {
+                return prevState + 1;
+            } else {
+                return prevState;
+            }
+        });
+    };
 
-	return (
-		<>
-			<KeyboardAwareScrollView enableOnAndroid={true} resetScrollToCoords={{ x: 0, y: 0 }}>
-				{/* not showing title and pagination on the first and last page */}
-				{screen == 0 ||
-					(screen < 6 && (
-						//dismiss keyboard when user click outside of the input field to improve user experience
-						<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
-							<View style={styles.topContainer}>
-								<Text style={styles.text}>{FormTitle[screen]}</Text>
-								<View style={styles.breakline} />
-								<View style={styles.previouspageAndPaginationWrapper}>
-									<Pressable onPress={goToPreviousPage}>
-										<Text style={{ color: "#888888" }}>{`<  上一步`}</Text>
-									</Pressable>
-									<PaginationIndicator totalPages={FormTitle.length} currentPage={screen} />
-									<Pressable disabled={true} onPress={goToNextPage}>
-										<Text style={{ color: "#888888", opacity: 0 }}>{`下一步  >`}</Text>
-									</Pressable>
-								</View>
-							</View>
-						</TouchableWithoutFeedback>
-					))}
+    return (
+        <>
+            <KeyboardAwareScrollView
+                enableOnAndroid={true}
+                resetScrollToCoords={{ x: 0, y: 0 }}
+            >
+                {/* not showing title and pagination on the first and last page */}
+                {screen == 0 ||
+                    (screen < 6 && (
+                        //dismiss keyboard when user click outside of the input field to improve user experience
+                        <TouchableWithoutFeedback
+                            onPress={() => Keyboard.dismiss()}
+                        >
+                            <View style={styles.topContainer}>
+                                <Text style={styles.text}>
+                                    {FormTitle[screen]}
+                                </Text>
+                                <View style={styles.breakline} />
+                                <View
+                                    style={
+                                        styles.previouspageAndPaginationWrapper
+                                    }
+                                >
+                                    <Pressable onPress={goToPreviousPage}>
+                                        <Text
+                                            style={{ color: '#888888' }}
+                                        >{`<  上一步`}</Text>
+                                    </Pressable>
+                                    <PaginationIndicator
+                                        totalPages={FormTitle.length}
+                                        currentPage={screen}
+                                    />
+                                    <Pressable
+                                        disabled={true}
+                                        onPress={goToNextPage}
+                                    >
+                                        <Text
+                                            style={{
+                                                color: '#888888',
+                                                opacity: 0
+                                            }}
+                                        >{`下一步  >`}</Text>
+                                    </Pressable>
+                                </View>
+                            </View>
+                        </TouchableWithoutFeedback>
+                    ))}
 
-				<View style={styles.bottomContainer}>{ScreenDisplay()}</View>
-			</KeyboardAwareScrollView>
-		</>
-	);
+                <View style={styles.bottomContainer}>{ScreenDisplay()}</View>
+            </KeyboardAwareScrollView>
+        </>
+    );
 };
 
 const styles = StyleSheet.create({
-	topContainer: {
-		flex: 1,
-		alignItems: "center",
-		justifyContent: "center",
-		paddingBottom: "20%",
-		paddingTop: "15%",
-	},
-	previouspageAndPaginationWrapper: {
-		display: "flex",
-		width: "100%",
-		flexDirection: "row",
-		justifyContent: "space-between",
-		alignItems: "center",
-		paddingHorizontal: 25,
-	},
-	bottomContainer: { flex: 2.5 },
-	breakline: { width: 24, height: 1, backgroundColor: "#000000", marginVertical: 17 },
-	text: { fontSize: 24, fontWeight: "300" },
+    topContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingBottom: '20%',
+        paddingTop: '15%'
+    },
+    previouspageAndPaginationWrapper: {
+        display: 'flex',
+        width: '100%',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingHorizontal: 25
+    },
+    bottomContainer: { flex: 2.5 },
+    breakline: {
+        width: 24,
+        height: 1,
+        backgroundColor: '#000000',
+        marginVertical: 17
+    },
+    text: { fontSize: 24, fontWeight: '300' }
 });
 
 export default Form;

component/registrationMultiStepForm/formComponent/formPages/basicInformation.tsx

@@ -3,29 +3,23 @@ import NormalInput from '../../../global/normal_input';
 import { useState } from 'react';
 import DateModal from '../../../global/date_input';
 import NormalButton from '../../../global/normal_button';
-import {
-    SignUpFormData,
-    HandleSignUpFormDataChange
-} from '../../../../types/signup';
+import useSignUpStore from '../../../../providers/signup_form_store';
 import DropdownSelect from '../../../global/dropdown_select';
 
 type basicInformationProps = {
     goToNextPage: () => void;
-    handleFormDataChange: HandleSignUpFormDataChange;
-    formData: SignUpFormData;
 };
 
 const BasicInformation: React.FC<basicInformationProps> = ({
-    handleFormDataChange,
-    goToNextPage,
-    formData
+    goToNextPage
 }) => {
+    const { signUpFormData, setSignUpFormData } = useSignUpStore();
     const [error, setError] = useState('');
     const handleNext = () => {
         if (
-            formData.name === '' ||
-            formData.password === '' ||
-            formData.birthDate === ''
+            signUpFormData.name === '' ||
+            signUpFormData.password === '' ||
+            signUpFormData.birthDate === ''
         ) {
             setError('請確保所有資料都已填寫。');
         } else {
@@ -34,17 +28,14 @@ const BasicInformation: React.FC<basicInformationProps> = ({
         }
     };
 
-    const dropdownOptions = [
+    const nameFieldPlaceholder = signUpFormData.name
+        ? signUpFormData.name
+        : '姓名';
+
+    const genderDropdownOptions = [
         { label: '男', value: 'male' },
-        { label: '女', value: 'female' },
-        { label: 'Test Item 3', value: '3' },
-        { label: 'Test Item 4', value: '4' },
-        { label: 'Test Item 5', value: '5' },
-        { label: 'Test Item 6', value: '6' },
-        { label: 'Test Item 7', value: '7' },
-        { label: 'Test Item 8', value: '8' }
+        { label: '女', value: 'female' }
     ];
-
     return (
         <>
             <View style={styles.container}>
@@ -57,18 +48,27 @@ const BasicInformation: React.FC<basicInformationProps> = ({
                     }}
                 >
                     <NormalInput
-                        placeholder="姓名"
-                        onChangeText={(text) =>
-                            handleFormDataChange('name', text)
-                        }
+                        value={signUpFormData.name}
+                        placeholder={nameFieldPlaceholder}
+                        onChangeText={(text) => {
+                            setSignUpFormData({
+                                ...signUpFormData,
+                                name: text
+                            });
+                        }}
                     />
+
                     <NormalInput
                         placeholder="帳戶密碼"
-                        onChangeText={(text) =>
-                            handleFormDataChange('password', text)
-                        }
+                        onChangeText={(text) => {
+                            setSignUpFormData({
+                                ...signUpFormData,
+                                password: text
+                            });
+                        }}
                         secureTextEntry={true}
                     />
+
                     <View
                         style={{
                             display: 'flex',
@@ -77,20 +77,27 @@ const BasicInformation: React.FC<basicInformationProps> = ({
                         }}
                     >
                         <DropdownSelect
-                            onSelect={(value) =>
-                                handleFormDataChange('gender', value)
-                            }
-                            dropdownOptions={dropdownOptions}
+                            onSelect={(value) => {
+                                setSignUpFormData({
+                                    ...signUpFormData,
+                                    gender: value
+                                });
+                            }}
+                            dropdownOptions={genderDropdownOptions}
                             placeholder={'性別'}
                         />
+
                         <DateModal
                             placeholder={
-                                formData.birthDate
-                                    ? formData.birthDate
+                                signUpFormData.birthDate
+                                    ? signUpFormData.birthDate
                                     : 'DD/MM/YY'
                             }
                             onDateChange={(date) => {
-                                handleFormDataChange('birthDate', date);
+                                setSignUpFormData({
+                                    ...signUpFormData,
+                                    birthDate: date
+                                });
                             }}
                         />
                     </View>

component/registrationMultiStepForm/formComponent/formPages/carInformation.tsx

@@ -1,97 +1,112 @@
-import { View, Text, StyleSheet } from "react-native";
-import NormalInput from "../../../global/normal_input";
-import NormalButton from "../../../global/normal_button";
-import { useState } from "react";
-import useSignUpStore from "../../../../providers/signup_form_store";
+import { View, Text, StyleSheet } from 'react-native';
+import NormalInput from '../../../global/normal_input';
+import NormalButton from '../../../global/normal_button';
+import { useState } from 'react';
+import useSignUpStore from '../../../../providers/signup_form_store';
 
 type CarInformationProps = {
-	goToNextPage: () => void;
+    goToNextPage: () => void;
 };
 
 const CarInformation: React.FC<CarInformationProps> = ({ goToNextPage }) => {
-	const { signUpFormData, setSignUpFormData } = useSignUpStore();
-	const [error, setError] = useState("");
-	const handleNext = () => {
-		if (
-			signUpFormData.vehicleModel === "" ||
-			signUpFormData.vehicleModel === "" ||
-			signUpFormData.licensePlate === ""
-		) {
-			setError("請確保所有資料都已填寫。");
-		} else {
-			setError("");
-			goToNextPage();
-		}
-	};
+    const { signUpFormData, setSignUpFormData } = useSignUpStore();
+    const [error, setError] = useState('');
+    const handleNext = () => {
+        if (
+            signUpFormData.vehicleModel === '' ||
+            signUpFormData.vehicleModel === '' ||
+            signUpFormData.licensePlate === ''
+        ) {
+            setError('請確保所有資料都已填寫。');
+        } else {
+            setError('');
+            goToNextPage();
+        }
+    };
 
-	const vehicleTypeFieldPlaceholder = signUpFormData.vehicleType ? signUpFormData.vehicleType : "車輛品牌";
-	const vehicleModelFieldPlaceholder = signUpFormData.vehicleModel ? signUpFormData.vehicleModel : "車輛型號";
-	const licensePlateFieldPlaceholder = signUpFormData.licensePlate ? signUpFormData.licensePlate : "車輛號碼";
+    const vehicleTypeFieldPlaceholder = signUpFormData.vehicleType
+        ? signUpFormData.vehicleType
+        : '車輛品牌';
+    const vehicleModelFieldPlaceholder = signUpFormData.vehicleModel
+        ? signUpFormData.vehicleModel
+        : '車輛型號';
+    const licensePlateFieldPlaceholder = signUpFormData.licensePlate
+        ? signUpFormData.licensePlate
+        : '車輛號碼';
 
-	return (
-		<>
-			<View style={styles.container}>
-				<Text style={styles.text}>您的車輛</Text>
-				<View
-					style={{
-						display: "flex",
-						flexDirection: "column",
-						gap: 10,
-					}}
-				>
-					<NormalInput
-						value={signUpFormData.vehicleType}
-						placeholder={vehicleTypeFieldPlaceholder}
-						onChangeText={(vehicleType) => {
-							setSignUpFormData({ ...signUpFormData, vehicleType: vehicleType });
-						}}
-					/>
-					<NormalInput
-						value={signUpFormData.vehicleModel}
-						placeholder={vehicleModelFieldPlaceholder}
-						onChangeText={(vehicleModel) => {
-							setSignUpFormData({ ...signUpFormData, vehicleModel: vehicleModel });
-						}}
-					/>
-					<NormalInput
-						value={signUpFormData.licensePlate}
-						placeholder={licensePlateFieldPlaceholder}
-						onChangeText={(licensePlate) => {
-							setSignUpFormData({ ...signUpFormData, licensePlate: licensePlate });
-						}}
-					/>
-					<NormalButton
-						title={<Text style={{ color: "#fff" }}>下一步</Text>}
-						onPress={handleNext}
-						extendedStyle={{}}
-					/>
-					{error && <Text style={styles.errorMessage}>{error}</Text>}
-					<NormalButton
-						title={<Text style={{ color: "#888888" }}>略過</Text>}
-						onPress={goToNextPage}
-						extendedStyle={{ backgroundColor: "transparent" }}
-					/>
-				</View>
-			</View>
-		</>
-	);
+    return (
+        <>
+            <View style={styles.container}>
+                <Text style={styles.text}>您的車輛</Text>
+                <View
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 10
+                    }}
+                >
+                    <NormalInput
+                        value={signUpFormData.vehicleType}
+                        placeholder={vehicleTypeFieldPlaceholder}
+                        onChangeText={(vehicleType) => {
+                            setSignUpFormData({
+                                ...signUpFormData,
+                                vehicleType: vehicleType
+                            });
+                        }}
+                    />
+                    <NormalInput
+                        value={signUpFormData.vehicleModel}
+                        placeholder={vehicleModelFieldPlaceholder}
+                        onChangeText={(vehicleModel) => {
+                            setSignUpFormData({
+                                ...signUpFormData,
+                                vehicleModel: vehicleModel
+                            });
+                        }}
+                    />
+                    <NormalInput
+                        value={signUpFormData.licensePlate}
+                        placeholder={licensePlateFieldPlaceholder}
+                        onChangeText={(licensePlate) => {
+                            setSignUpFormData({
+                                ...signUpFormData,
+                                licensePlate: licensePlate
+                            });
+                        }}
+                    />
+                    <NormalButton
+                        title={<Text style={{ color: '#fff' }}>下一步</Text>}
+                        onPress={handleNext}
+                        extendedStyle={{}}
+                    />
+                    {error && <Text style={styles.errorMessage}>{error}</Text>}
+                    <NormalButton
+                        title={<Text style={{ color: '#888888' }}>略過</Text>}
+                        onPress={goToNextPage}
+                        extendedStyle={{ backgroundColor: 'transparent' }}
+                    />
+                </View>
+            </View>
+        </>
+    );
 };
 
 const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		marginHorizontal: 20,
-	},
-	text: {
-		fontSize: 20,
-		paddingBottom: 10,
-	},
-	errorMessage: {
-		fontSize: 14,
-		color: "#ff0033",
-		fontWeight: "400",
-		marginLeft: 10,
-		marginTop: 10,
-	},
+    container: {
+        flex: 1,
+        marginHorizontal: 20
+    },
+    text: {
+        fontSize: 20,
+        paddingBottom: 10
+    },
+    errorMessage: {
+        fontSize: 14,
+        color: '#ff0033',
+        fontWeight: '400',
+        marginLeft: 10,
+        marginTop: 10
+    }
 });
 export default CarInformation;

component/registrationMultiStepForm/multi_step_form.tsx

@@ -1,34 +1,19 @@
-import { Text, View, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
-import Form from './formComponent/form';
-import { useEffect, useState } from 'react';
-import { SignUpFormData } from '../../types/signup';
+import { useEffect } from 'react';
+import useSignUpStore from '../../providers/signup_form_store';
+import Form from '../registrationMultiStepForm/formComponent/form';
 
 const MultiStepForm: React.FC = () => {
-    const [formData, setFormData] = useState<SignUpFormData>({
-        phone: '',
-        phoneVerificationStatus: false,
-        name: '',
-        gender: '',
-        password: '',
-        email: '',
-        birthDate: '',
-        isUberDriver: undefined,
-        vehicleType: '',
-        vehicleModel: '',
-        licensePlate: '',
-        address: '',
-        paymentMethod: ''
-    });
-
+    const { signUpFormData } = useSignUpStore();
     //logging to check if parent component can successfully receive user input in the multi-step form
     useEffect(() => {
-        console.log(formData);
-    }, [formData]);
+        console.log('Current Zustand Store:', signUpFormData);
+    }, [signUpFormData]);
 
     return (
         <View style={styles.container}>
-            <Form formData={formData} setFormData={setFormData} />
+            <Form />
             <StatusBar style="auto" />
         </View>
     );

package-lock.json

@@ -5404,15 +5404,6 @@
                 "node": ">= 8"
             }
         },
-        "node_modules/@react-native-picker/picker": {
-            "version": "2.7.6",
-            "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.7.6.tgz",
-            "integrity": "sha512-Cs3PxRmE2vu6TofM9vt9TV8ZYFOtEPSupNxwoorH9lpkKM9HGG8QwK2i29KOEoODpUbtudKHUTtqhMZSuX9pgA==",
-            "peerDependencies": {
-                "react": "*",
-                "react-native": "*"
-            }
-        },
         "node_modules/@react-native/assets-registry": {
             "version": "0.74.83",
             "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.74.83.tgz",
@@ -12720,20 +12711,6 @@
                 }
             }
         },
-        "node_modules/react-native-dropdown-picker": {
-            "version": "5.4.6",
-            "resolved": "https://registry.npmjs.org/react-native-dropdown-picker/-/react-native-dropdown-picker-5.4.6.tgz",
-            "integrity": "sha512-T1XBHbE++M6aRU3wFYw3MvcOuabhWZ29RK/Ivdls2r1ZkZ62iEBZknLUPeVLMX3x6iUxj4Zgr3X2DGlEGXeHsA==",
-            "peerDependencies": {
-                "react": "*",
-                "react-native": "*"
-            }
-        },
-        "node_modules/react-native-dropdown-select-list": {
-            "version": "2.0.5",
-            "resolved": "https://registry.npmjs.org/react-native-dropdown-select-list/-/react-native-dropdown-select-list-2.0.5.tgz",
-            "integrity": "sha512-TepbcagQVUMB6nLuIlVU2ghRpQHAECOeZWe8K04ymW6NqbKbxuczZSDFfdCiABiiQ2dFD+8Dz65y4K7/uUEqGg=="
-        },
         "node_modules/react-native-element-dropdown": {
             "version": "2.12.0",
             "resolved": "https://registry.npmjs.org/react-native-element-dropdown/-/react-native-element-dropdown-2.12.0.tgz",

providers/signup_form_store.tsx

@@ -15,6 +15,7 @@ const useSignUpStore = create<SignUpFormState>((set) => ({
 		licensePlate: "",
 		address: "",
 		paymentMethod: "",
+		gender: ""
 	},
 	setSignUpFormData: (newFormData) =>
 		set((state) => ({

types/signUpFormData.d.ts

@@ -1,19 +1,20 @@
 export interface SignUpFormData {
-	phone: string;
-	phoneVerificationStatus: boolean;
-	name: string;
-	password: string;
-	email: string;
-	birthDate: string;
-	isUberDriver?: boolean | undefined;
-	vehicleType: string;
-	vehicleModel: string;
-	licensePlate: string;
-	address: string;
-	paymentMethod: string;
+    phone: string;
+    phoneVerificationStatus: boolean;
+    name: string;
+    gender: string;
+    password: string;
+    email: string;
+    birthDate: string;
+    isUberDriver?: boolean | undefined;
+    vehicleType: string;
+    vehicleModel: string;
+    licensePlate: string;
+    address: string;
+    paymentMethod: string;
 }
 
 export interface SignUpFormState {
-	signUpFormData: SignUpFormData;
-	setSignUpFormData: (newFormData: Partial<SignUpFormData>) => void;
+    signUpFormData: SignUpFormData;
+    setSignUpFormData: (newFormData: Partial<SignUpFormData>) => void;
 }

types/signUpFormData.ts

@@ -1,19 +0,0 @@
-export interface SignUpFormData {
-	phone: string;
-	phoneVerificationStatus: boolean;
-	name: string;
-	password: string;
-	email: string;
-	birthDate: string;
-	isUberDriver?: boolean | undefined;
-	vehicleType: string;
-	vehicleModel: string;
-	licensePlate: string;
-	address: string;
-	paymentMethod: string;
-}
-
-export interface SignUpFormState {
-	signUpFormData: SignUpFormData;
-	setSignUpFormData: (newFormData: Partial<SignUpFormData>) => void;
-}

types/signup_store.d.ts

@@ -1,3 +0,0 @@
-import { SignUpFormData } from "./signup";
-
-export interface ISignUpStore extends SignUpFormData {}