- remove safeAreaView that caused a wrong offset on the bottom side of the screen

src/screens/PaymentAmountInputScreen.tsx

 import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
-import BalanceContainer from "@components/BalanceContainer";
 import BeasyLogoIcon from "@components/BeasyLogoIcon";
 import Button from "@components/Button";
 import GoBackIconButton from "@components/GoBackIconButton";
 import Input from "@components/Input";
 import PaymentOption from "@components/PaymentOption";
-import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
+import BackgroundDefault from "@components/backgrounds/BackgroundDefault";
 import Box from "@components/bases/Box";
-import { SafeAreaView } from "react-native-safe-area-context";
+import Text from "@components/bases/Text";
+import { useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountInputScreen"> = ({
 	route,
 	navigation,
 }) => {
 	const { paymentType } = route.params;
+	const [amountToPay, setAmountToPay] = useState(0);
 
-	console.log("Payment type :: {}", paymentType);
+	const insets = useSafeAreaInsets();
+
+	const updateAmountToPay = (amount: string) => {
+		const amountParsed = Number.parseInt(amount);
+		if (!Number.isNaN(amountParsed)) {
+			return setAmountToPay(amountParsed);
+		}
+
+		return setAmountToPay(0);
+	};
 
 	return (
-		<BackgroundGreenWhiteContentArea>
-			<SafeAreaView>
-				<Box style={{ height: "100%", width: "100%" }}>
-					<Box
-						px={"l"}
-						flexDirection={"row"}
-						justifyContent={"space-between"}
-						alignItems={"center"}
-						mb={"l"}
-					>
-						<BeasyLogoIcon />
-						<GoBackIconButton onPress={() => navigation.goBack()} />
-					</Box>
-					<Box height={150} alignItems={"center"} justifyContent={"center"}>
+		<BackgroundDefault>
+			{/* <SafeAreaView> */}
+			<Box
+				style={{
+					height: "100%",
+					width: "100%",
+					marginTop: insets.top,
+				}}
+			>
+				<Box
+					px={"l"}
+					flexDirection={"row"}
+					justifyContent={"space-between"}
+					alignItems={"center"}
+					mb={"m"}
+				>
+					<BeasyLogoIcon />
+					<GoBackIconButton onPress={() => navigation.goBack()} />
+				</Box>
+				{/* <Box height={150} alignItems={"center"} justifyContent={"center"}>
 						<BalanceContainer balance={78000} label="Total des ventes" />
+					</Box> */}
+				<Box height={90} padding={"s"} paddingLeft={"l"}>
+					<Text color={"black"}>Montant à payé</Text>
+					<Text color={"black"} variant={"header"}>
+						{amountToPay}
+					</Text>
+				</Box>
+				<Box
+					p={"l"}
+					paddingTop={"xl"}
+					backgroundColor={"white"}
+					flex={1}
+					borderTopLeftRadius={20}
+					borderTopRightRadius={20}
+				>
+					<Box width={75} height={50} mb={"l"} borderRadius={10} overflow={"hidden"}>
+						<PaymentOption onPress={() => {}} paymentMethod={paymentType} />
 					</Box>
-					<Box p={"l"} paddingTop={"xl"}>
-						<Box width={75} height={50} mb={"l"} borderRadius={10} overflow={"hidden"}>
-							<PaymentOption onPress={() => {}} paymentMethod={paymentType} />
-						</Box>
-						<Box mb={"xl"}>
-							<Input
-								label="Entrez le montant"
-								autoFocus={true}
-								keyboardType="numeric"
-							/>
-						</Box>
-						<Button
-							onPress={() => navigation.navigate("numberAndOtpForPaymentScreen")}
-							variant={"full"}
-							textVariants={"primary"}
-							label="Confirmer"
+					<Box mb={"xl"}>
+						<Input
+							label="Entrez le montant"
+							autoFocus={true}
+							keyboardType="numeric"
+							onChangeText={(e) => updateAmountToPay(e)}
 						/>
 					</Box>
+					<Button
+						onPress={() => navigation.navigate("numberAndOtpForPaymentScreen")}
+						variant={"full"}
+						textVariants={"primary"}
+						label="Confirmer"
+					/>
 				</Box>
-			</SafeAreaView>
-		</BackgroundGreenWhiteContentArea>
+			</Box>
+			{/* </SafeAreaView> */}
+		</BackgroundDefault>
 	);
 };