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"}
@@ -53,8 +49,7 @@ const UserLoginScreen = () => {
 					/>
 				</Box>
 			</Box>
-			</ImageBackground>
-		</View>
+		</BackgroundGreenWhiteContentArea>
 	);
 };