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