use custom wrapper BackgroundGreenWhiteContent

src/components/backgrounds/BackgroundGreenWhiteContentArea.tsx

+import { containers, images } from "@styles/Commons";
+import { ImageBackground, View } from "react-native";
+
+type Props = { children: React.ReactNode };
+
+const BackgroundGreenWhiteContentArea = ({ children }: Props) => {
+	return (
+		<View style={containers.containerFull}>
+			<ImageBackground
+				source={require("../../../assets/beasy_background.png")}
+				resizeMode="cover"
+				style={images.cover}
+			>
+				{children}
+			</ImageBackground>
+		</View>
+	);
+};
+
+export default BackgroundGreenWhiteContentArea;

src/screens/UserLoginScreen.tsx

 import Button from "@components/Button";
 import Input from "@components/Input";
+import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
-import { containers, images } from "@styles/Commons";
-import { ImageBackground, KeyboardAvoidingView, Platform, View } from "react-native";
+import { containers } from "@styles/Commons";
+import { KeyboardAvoidingView, Platform, View } from "react-native";
 
 const UserLoginScreen = () => {
 	return (
-		<View style={{ height: "100%", width: "100%" }}>
-			<ImageBackground
-				source={require("../../assets/beasy_background.png")}
-				resizeMode="cover"
-				style={images.cover}
+		<BackgroundGreenWhiteContentArea>
+			<Box
+				style={[containers.containerFull]}
+				p={"xl"}
+				paddingTop={"x240"}
+				flexDirection={"column"}
+				justifyContent={"space-between"}
 			>
-				<Box
-					style={[containers.containerFull]}
-					p={"xl"}
-					paddingTop={"x240"}
-					flexDirection={"column"}
-					justifyContent={"space-between"}
+				<KeyboardAvoidingView
+					behavior={Platform.OS === "ios" ? "height" : "height"}
+					style={{ flex: 1 }}
 				>
-					<KeyboardAvoidingView
-						behavior={Platform.OS === "ios" ? "height" : "height"}
-						style={{ flex: 1 }}
-					>
-						<View>
-							<Box mb={"x100"}>
-								<Text fontSize={40} fontWeight={"bold"}>
-									Connexion
-								</Text>
-								<Text color={"gray"}>Bienvenue, vous nous avez manqué !</Text>
-							</Box>
+					<View>
+						<Box mb={"x100"}>
+							<Text fontSize={40} fontWeight={"bold"}>
+								Connexion
+							</Text>
+							<Text color={"gray"}>Bienvenue, vous nous avez manqué !</Text>
+						</Box>
 
-							<Box gap={"m"}>
-								<Input label="Email" />
-								<Input label="Mot de passe" secureTextEntry={true} />
-							</Box>
-						</View>
-					</KeyboardAvoidingView>
-					<Box mt={"xl"}>
-						<Button
-							variant={"full"}
-							textVariants={"primary"}
-							label="Se connecter"
-							onPress={() => {}}
-						/>
-						<Button
-							variant={"lightGray"}
-							textVariants={"black"}
-							label="Creer un compte"
-							onPress={() => {}}
-						/>
-					</Box>
+						<Box gap={"m"}>
+							<Input label="Email" />
+							<Input label="Mot de passe" secureTextEntry={true} />
+						</Box>
+					</View>
+				</KeyboardAvoidingView>
+				<Box mt={"xl"}>
+					<Button
+						variant={"full"}
+						textVariants={"primary"}
+						label="Se connecter"
+						onPress={() => {}}
+					/>
+					<Button
+						variant={"lightGray"}
+						textVariants={"black"}
+						label="Creer un compte"
+						onPress={() => {}}
+					/>
 				</Box>
-			</ImageBackground>
-		</View>
+			</Box>
+		</BackgroundGreenWhiteContentArea>
 	);
 };