using the safe area top inset to pad down elements

src/screens/UserLoginScreen.tsx

@@ -7,12 +7,15 @@ import Text from "@components/bases/Text";
 import { Fontisto } from "@expo/vector-icons";
 import { containers } from "@styles/Commons";
 import { KeyboardAvoidingView, Platform, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const UserLoginScreen = () => {
+	const insets = useSafeAreaInsets();
+
 	return (
 		<BackgroundDefault>
-			<View style={containers.containerFull}>
-				<Box style={{ height: "20%" }} p={"l"} paddingTop={"x64"}>
+			<View style={[containers.containerFull, { paddingTop: insets.top }]}>
+				<Box style={{ height: "20%" }} px={"l"}>
 					<Box
 						px={"m"}
 						justifyContent={"space-between"}