fix homescreen safearea

screens/WatchLaterScreen.tsx

@@ -5,8 +5,36 @@ import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
 import { faClock} from "@fortawesome/free-solid-svg-icons";
 import LinearGradient from 'react-native-linear-gradient';
 import {RootTabScreenProps} from "../types.js";
-
+import {useSafeAreaInsets} from "react-native-safe-area-context";
 export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'WatchLater'>) {
+    const insets = useSafeAreaInsets();
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            paddingTop: insets.top + 22,
+            backgroundColor: "#232323"
+        },
+        linearGradient: {
+            flex: 1,
+            paddingLeft: 15,
+            paddingRight: 15,
+            borderRadius: 5
+        },
+        item: {
+            padding: 10,
+            fontSize: 18,
+            height: 44,
+            color: "white"
+        },
+        filmCard: {
+            width: 70,
+            height: 100,
+            borderRadius: 8,
+
+
+        },
+    });
   return (
       <SafeAreaView style={styles.container}>
           <View style={{height: 50, justifyContent: "flex-start",flexDirection: 'row', paddingHorizontal:20,  marginBottom: 15,marginVertical:5, alignItems:"flex-end"}} >
@@ -37,25 +65,19 @@ export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'Wat
           />
       </SafeAreaView>
   );
+
+}
+
+
+type ListWidgetProps = {
+    name : String
+
 }
+
+export function ListWidget(props: ListWidgetProps) {
+    const insets = useSafeAreaInsets();
+
     const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        paddingTop: 22,
-        backgroundColor: "#232323"
-    },
-    linearGradient: {
-        flex: 1,
-        paddingLeft: 15,
-        paddingRight: 15,
-        borderRadius: 5
-    },
-    item: {
-        padding: 10,
-        fontSize: 18,
-        height: 44,
-        color: "white"
-    },
         filmCard: {
             width: 70,
             height: 100,
@@ -64,13 +86,6 @@ const styles = StyleSheet.create({
 
         },
     });
-
-type ListWidgetProps = {
-    name : String
-
-}
-
-export function ListWidget(props: ListWidgetProps) {
 return (
             <View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'row', paddingHorizontal:20, marginVertical:5}} >
                 <Image