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}
+			<SafeAreaViewTopLeftRightFull>{children}</SafeAreaViewTopLeftRightFull>
 		</ImageBackground>
-		</View>
 	);
 };
 

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"]}>
-				<Box
-					style={{
-						height: "100%",
-						width: "100%",
-					}}
-				>
+			<SafeAreaViewTopLeftRightFull>
 				<Box
 					px={"l"}
 					flexDirection={"row"}
@@ -25,8 +19,7 @@ const BackgroundWithBeasyIconAndWhiteContentArea = ({ children }: { children?: R
 					<BeasyLogoIcon />
 				</Box>
 				<WrapperTopEdgeCurved>{children}</WrapperTopEdgeCurved>
-				</Box>
-			</SafeAreaView>
+			</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