Fix background not covering safe area in dark mode

src/components/base/pageBackground.tsx

@@ -3,11 +3,13 @@ import { StyleSheet, View } from "react-native";
 import Image from "./image";
 import useColors from "@/hooks/useColors";
 import Theme from "@/core/theme";
+import useBackgroundInsets from "@/hooks/useBackgroundInsets";
 
 function PageBackground() {
     const theme = Theme.useTheme();
     const background = Theme.useBackground();
     const colors = useColors();
+    const backgroundInsets = useBackgroundInsets();
 
     return (
         <>
@@ -17,6 +19,7 @@ function PageBackground() {
                     {
                         backgroundColor:
                             colors?.pageBackground ?? colors.background,
+                        ...backgroundInsets,
                     },
                 ]}
             />
@@ -27,6 +30,7 @@ function PageBackground() {
                         style.wrapper,
                         {
                             opacity: background?.opacity ?? 0.6,
+                            ...backgroundInsets,
                         },
                     ]}
                     blurRadius={background?.blur ?? 20}

src/hooks/useBackgroundInsets.ts

@@ -0,0 +1,16 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+/**
+ * Hook that returns negative safe area insets for extending backgrounds
+ * beyond safe area boundaries to cover the entire screen.
+ */
+export default function useBackgroundInsets() {
+    const insets = useSafeAreaInsets();
+
+    return {
+        top: -insets.top,
+        bottom: -insets.bottom,
+        left: -insets.left,
+        right: -insets.right,
+    };
+}

src/pages/musicDetail/components/background.tsx

@@ -2,9 +2,11 @@ import React, { useMemo } from "react";
 import { Image, StyleSheet, View } from "react-native";
 import { ImgAsset } from "@/constants/assetsConst";
 import { useCurrentMusic } from "@/core/trackPlayer";
+import useBackgroundInsets from "@/hooks/useBackgroundInsets";
 
 export default function Background() {
     const musicItem = useCurrentMusic();
+    const backgroundInsets = useBackgroundInsets();
 
     const artworkSource = useMemo(() => {
         if (!musicItem?.artwork) {
@@ -22,8 +24,18 @@ export default function Background() {
 
     return (
         <>
-            <View style={style.background} />
-            <Image style={style.blur} blurRadius={50} source={artworkSource} />
+            <View style={[
+                style.background,
+                backgroundInsets
+            ]} />
+            <Image 
+                style={[
+                    style.blur,
+                    backgroundInsets
+                ]} 
+                blurRadius={50} 
+                source={artworkSource} 
+            />
         </>
     );
 }