From 0db3e2e3b1e985e594c0e57247f19f9cc6716f77 Mon Sep 17 00:00:00 2001
From: G <idouattara@ldfgroupe.com>
Date: Tue, 18 Jun 2024 10:17:57 +0000
Subject: [PATCH] using the new container component SafeArea. remove marginTop as it will be handled by the wrapper

---
 src/components/backgrounds/BackgroundDefault.tsx                          | 19 +++++++++----------
 src/components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea.tsx | 27 ++++++++++-----------------
 src/screens/PaymentAmountInputScreen.tsx                                  |  2 +-
 3 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/src/components/backgrounds/BackgroundDefault.tsx b/src/components/backgrounds/BackgroundDefault.tsx
index bb46f75..f12b71c 100644
--- a/src/components/backgrounds/BackgroundDefault.tsx
+++ b/src/components/backgrounds/BackgroundDefault.tsx
@@ -1,18 +1,17 @@
-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>
 	);
 };
 
diff --git a/src/components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea.tsx b/src/components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea.tsx
index c19ba7f..38064de 100644
--- a/src/components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea.tsx
+++ b/src/components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea.tsx
@@ -1,32 +1,25 @@
 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>
 	);
 };
diff --git a/src/screens/PaymentAmountInputScreen.tsx b/src/screens/PaymentAmountInputScreen.tsx
index 6e6664f..8dabf19 100644
--- a/src/screens/PaymentAmountInputScreen.tsx
+++ b/src/screens/PaymentAmountInputScreen.tsx
@@ -82,7 +82,7 @@ const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountI
 				style={{
 					height: "100%",
 					width: "100%",
-					marginTop: insets.top,
+					// marginTop: insets.top,
 				}}
 			>
 				<Box
--
libgit2 0.27.1