src/views/diary/components/DiaryCover.js
import React from 'react';
import {StyleSheet, View, ImageBackground, Text} from 'react-native';
import AvatarHappySticker from '../../../components/stickers/AvatarHappySticker';
import {formatTitleAndName} from '../../../utils/FormatterUtils';
import {getUser} from '../../../database/UsersDAO';
import {ColorPalette} from '../../../utils/ColorConstants';
import {globalStyles} from '../../../styles/styles';
import {iOSxxxLargeTypo} from '../../../styles/Typography';
/**
* Front cover of the diary
* @returns {Object} The front cover of the diary
*/
export default function DiaryCover() {
// Initialized the title of the diary:
const user = getUser();
const name = user.name;
const title = formatTitleAndName(name);
return (
<ImageBackground
source={require('../../../assets/backgrounds/diaryCover.png')}
resizeMode="stretch"
style={[globalStyles.coverAll, styles.imageBackground]}>
<View style={styles.titleContainer}>
<Text style={[iOSxxxLargeTypo.largeTitle, styles.title]}>
{title}
</Text>
</View>
<AvatarHappySticker
dimensions={styles.stickerDimensions}
position={styles.stickerPosition}
/>
</ImageBackground>
);
}
/** Local styles */
const styles = StyleSheet.create({
imageBackground: {
flex: 1,
width: '100%',
height: '100%',
justifyContent: 'center',
},
stickerDimensions: {
width: 190,
height: 190,
},
stickerPosition: {
position: 'absolute',
flex: 1,
top: '8%',
right: '6%',
transform: [{rotate: '3deg'}],
},
titleContainer: {
minHeight: 100,
minWidth: 200,
alignSelf: 'center',
backgroundColor: ColorPalette.ALMOST_WHITE,
},
title: {
padding: 30,
fontWeight: '600',
},
});