Skip to content

Commit a0ae2ee

Browse files
Copilotmaotoumao
andcommitted
Fix music detail background not covering safe area
Applied the same fix to the music detail page background component to ensure it extends beyond safe area boundaries. This maintains consistency across the app. Co-authored-by: maotoumao <[email protected]>
1 parent b57f0fd commit a0ae2ee

File tree

1 file changed

+24
-2
lines changed

1 file changed

+24
-2
lines changed

src/pages/musicDetail/components/background.tsx

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import React, { useMemo } from "react";
22
import { Image, StyleSheet, View } from "react-native";
33
import { ImgAsset } from "@/constants/assetsConst";
44
import { useCurrentMusic } from "@/core/trackPlayer";
5+
import { useSafeAreaInsets } from "react-native-safe-area-context";
56

67
export default function Background() {
78
const musicItem = useCurrentMusic();
9+
const insets = useSafeAreaInsets();
810

911
const artworkSource = useMemo(() => {
1012
if (!musicItem?.artwork) {
@@ -22,8 +24,28 @@ export default function Background() {
2224

2325
return (
2426
<>
25-
<View style={style.background} />
26-
<Image style={style.blur} blurRadius={50} source={artworkSource} />
27+
<View style={[
28+
style.background,
29+
{
30+
top: -insets.top,
31+
bottom: -insets.bottom,
32+
left: -insets.left,
33+
right: -insets.right,
34+
}
35+
]} />
36+
<Image
37+
style={[
38+
style.blur,
39+
{
40+
top: -insets.top,
41+
bottom: -insets.bottom,
42+
left: -insets.left,
43+
right: -insets.right,
44+
}
45+
]}
46+
blurRadius={50}
47+
source={artworkSource}
48+
/>
2749
</>
2850
);
2951
}

0 commit comments

Comments
 (0)