rename the Input component to InputWithTopLabel

src/components/Input.tsx → src/components/InputWithTopLabel.tsx

 import type { VariantProps } from "@shopify/restyle";
 import type { Theme } from "@themes/Theme";
-import { TextInput } from "react-native";
 import type { TextInputProps } from "react-native";
+import { TextInput } from "react-native";
 import Box from "./bases/Box";
 import Text from "./bases/Text";
 
@@ -10,7 +10,7 @@ type Props = TextInputProps &
 		label: string;
 	};
 
-const Input = ({ label, textVariants, ...rest }: Props) => {
+const InputWithTopLabel = ({ label, textVariants, ...rest }: Props) => {
 	return (
 		<Box>
 			<Text variant={textVariants}>{label}</Text>
@@ -21,4 +21,4 @@ const Input = ({ label, textVariants, ...rest }: Props) => {
 	);
 };
 
-export default Input;
+export default InputWithTopLabel;

src/screens/NumberAndOtpForPaymentScreen.tsx

@@ -2,7 +2,7 @@ import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
 import BeasyLogoIcon from "@components/BeasyLogoIcon";
 import Button from "@components/Button";
 import GoBackIconButton from "@components/GoBackIconButton";
-import Input from "@components/Input";
+import InputWithTopLabel from "@components/InputWithTopLabel";
 import PaymentOption from "@components/PaymentOption";
 import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
 import Box from "@components/bases/Box";
@@ -40,12 +40,16 @@ const NumberAndOtpForPaymentScreen: PaymentStackScreenComponentProps<
 							<PaymentOption onPress={() => {}} paymentMethod={"OM"} />
 						</Box>
 						<Box mb={"l"}>
-							<Input
+							<InputWithTopLabel
 								label="Entrez le numero"
 								keyboardType="numeric"
 								textVariants={"black"}
 							/>
-							<Input label="Code OTP" keyboardType="numeric" textVariants={"black"} />
+							<InputWithTopLabel
+								label="Code OTP"
+								keyboardType="numeric"
+								textVariants={"black"}
+							/>
 						</Box>
 						<Button
 							onPress={() => {}}

src/screens/PaymentAmountInputScreen.tsx

@@ -3,7 +3,7 @@ import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
 import BeasyLogoIcon from "@components/BeasyLogoIcon";
 import Button from "@components/Button";
 import GoBackIconButton from "@components/GoBackIconButton";
-import Input from "@components/Input";
+import InputWithTopLabel from "@components/InputWithTopLabel";
 import PaymentOption from "@components/PaymentOption";
 import BackgroundDefault from "@components/backgrounds/BackgroundDefault";
 import Box from "@components/bases/Box";
@@ -134,7 +134,7 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 						<PaymentOption onPress={() => {}} paymentMethod={paymentType} />
 					</Box>
 					<Box mb={"xl"}>
-						<Input
+						<InputWithTopLabel
 							label="Entrez le montant"
 							autoFocus={true}
 							keyboardType="numeric"

src/screens/UserLoginScreen.tsx

@@ -4,7 +4,7 @@ import authenticateUser from "@/utils/requests/authenticateUser";
 import getUserInformations from "@/utils/requests/userInformations";
 import Button from "@components/Button";
 import ContainerBorderTopCurved from "@components/ContainerBorderTopCurved";
-import Input from "@components/Input";
+import InputWithTopLabel from "@components/InputWithTopLabel";
 import BackgroundDefault from "@components/backgrounds/BackgroundDefault";
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
@@ -107,14 +107,14 @@ const UserLoginScreen: MainStackScreenComponentProps<"userLoginScreen"> = ({ nav
 							</Box>
 
 							<Box gap={"m"}>
-								<Input
+								<InputWithTopLabel
 									label="Email"
 									// value={email}
 									autoCorrect={false}
 									textContentType="emailAddress"
 									onChangeText={setEmail}
 								/>
-								<Input
+								<InputWithTopLabel
 									label="Mot de passe"
 									secureTextEntry={true}
 									textContentType="oneTimeCode"