xref: /MusicFree/src/components/base/pageBackground.tsx (revision a27adc201796bd0be4a6a41893461b099d480a34) 
1import React, {memo} from 'react';
2import {StyleSheet, View} from 'react-native';
3import Image from './image';
4import useColors from '@/hooks/useColors';
5import Theme from '@/core/theme';
6
7function PageBackground() {
8    const theme = Theme.useTheme();
9    const background = Theme.useBackground();
10    const colors = useColors();
11
12    return (
13        <>
14            <View
15                style={[
16                    style.wrapper,
17                    {
18                        backgroundColor:
19                            colors?.pageBackground ?? colors.background,
20                    },
21                ]}
22            />
23            {!theme.id.startsWith('p-') && background?.url ? (
24                <Image
25                    uri={background.url}
26                    style={[
27                        style.wrapper,
28                        {
29                            opacity: background?.opacity ?? 0.6,
30                        },
31                    ]}
32                    blurRadius={background?.blur ?? 20}
33                />
34            ) : null}
35        </>
36    );
37}
38export default memo(PageBackground, () => true);
39
40const style = StyleSheet.create({
41    wrapper: {
42        position: 'absolute',
43        top: 0,
44        left: 0,
45        right: 0,
46        bottom: 0,
47        width: '100%',
48        height: '100%',
49    },
50});
51