1import React, {memo} from 'react'; 2import {StyleSheet, View} from 'react-native'; 3import Config from '@/core/config'; 4import Image from './image'; 5import useColors from '@/hooks/useColors'; 6 7function PageBackground() { 8 const themeConfig = Config.useConfig('setting.theme'); 9 const colors = useColors(); 10 11 return ( 12 <> 13 <View 14 style={[ 15 style.wrapper, 16 { 17 backgroundColor: 18 colors?.pageBackground ?? colors.background, 19 }, 20 ]} 21 /> 22 {themeConfig?.background ? ( 23 <Image 24 uri={themeConfig?.background} 25 style={[ 26 style.wrapper, 27 { 28 opacity: themeConfig?.backgroundOpacity ?? 0.7, 29 }, 30 ]} 31 blurRadius={themeConfig?.backgroundBlur ?? 20} 32 /> 33 ) : null} 34 </> 35 ); 36} 37export default memo(PageBackground, () => true); 38 39const style = StyleSheet.create({ 40 wrapper: { 41 position: 'absolute', 42 top: 0, 43 left: 0, 44 right: 0, 45 bottom: 0, 46 width: '100%', 47 height: '100%', 48 }, 49}); 50