- 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%" }}>
+		<BackgroundDefault>
+			{/* <SafeAreaView> */}
+			<Box
+				style={{
+					height: "100%",
+					width: "100%",
+					marginTop: insets.top,
+				}}
+			>
 				<Box
 					px={"l"}
 					flexDirection={"row"}
 					justifyContent={"space-between"}
 					alignItems={"center"}
-						mb={"l"}
+					mb={"m"}
 				>
 					<BeasyLogoIcon />
 					<GoBackIconButton onPress={() => navigation.goBack()} />
 				</Box>
-					<Box height={150} alignItems={"center"} justifyContent={"center"}>
+				{/* <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"}>
+				<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>
@@ -43,6 +73,7 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 							label="Entrez le montant"
 							autoFocus={true}
 							keyboardType="numeric"
+							onChangeText={(e) => updateAmountToPay(e)}
 						/>
 					</Box>
 					<Button
@@ -53,8 +84,8 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 					/>
 				</Box>
 			</Box>
-			</SafeAreaView>
-		</BackgroundGreenWhiteContentArea>
+			{/* </SafeAreaView> */}
+		</BackgroundDefault>
 	);
 };