using the new container component SafeArea. remove marginTop as it will be handled by the wrapper

src/components/backgrounds/BackgroundDefault.tsx

-import { containers, images } from "@styles/Commons";
-import { ImageBackground, View } from "react-native";
+import SafeAreaViewTopLeftRightFull from "@components/containers/SafeAreaViewTopLeftRightFull";
+import { images } from "@styles/Commons";
+import { ImageBackground } from "react-native";
 
 type Props = { children: React.ReactNode };
 
 const BackgroundDefault = ({ children }: Props) => {
 	return (
-		<View style={containers.containerFull}>
-			<ImageBackground
-				source={require("../../../assets/beasy_default.png")}
-				style={images.background}
-			>
-				{children}
-			</ImageBackground>
-		</View>
+		<ImageBackground
+			source={require("../../../assets/beasy_default.png")}
+			style={images.background}
+		>
+			<SafeAreaViewTopLeftRightFull>{children}</SafeAreaViewTopLeftRightFull>
+		</ImageBackground>
 	);
 };
 

src/components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea.tsx

 import BeasyLogoIcon from "@components/BeasyLogoIcon";
 import WrapperTopEdgeCurved from "@components/WrapperTopEdgeCurved";
 import Box from "@components/bases/Box";
+import SafeAreaViewTopLeftRightFull from "@components/containers/SafeAreaViewTopLeftRightFull";
 import type { ReactElement } from "react";
-import { SafeAreaView } from "react-native-safe-area-context";
 import BackgroundDefault from "./BackgroundDefault";
 
 const BackgroundWithBeasyIconAndWhiteContentArea = ({ children }: { children?: ReactElement }) => {
 	return (
 		<BackgroundDefault>
-			<SafeAreaView edges={["top", "left", "right"]}>
+			<SafeAreaViewTopLeftRightFull>
 				<Box
-					style={{
-						height: "100%",
-						width: "100%",
-					}}
+					px={"l"}
+					flexDirection={"row"}
+					justifyContent={"space-between"}
+					alignItems={"center"}
+					mb={"m"}
 				>
-					<Box
-						px={"l"}
-						flexDirection={"row"}
-						justifyContent={"space-between"}
-						alignItems={"center"}
-						mb={"m"}
-					>
-						<BeasyLogoIcon />
-					</Box>
-					<WrapperTopEdgeCurved>{children}</WrapperTopEdgeCurved>
+					<BeasyLogoIcon />
 				</Box>
-			</SafeAreaView>
+				<WrapperTopEdgeCurved>{children}</WrapperTopEdgeCurved>
+			</SafeAreaViewTopLeftRightFull>
 		</BackgroundDefault>
 	);
 };

src/screens/PaymentAmountInputScreen.tsx

@@ -82,7 +82,7 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 				style={{
 					height: "100%",
 					width: "100%",
-					marginTop: insets.top,
+					// marginTop: insets.top,
 				}}
 			>
 				<Box