Home Reference Source

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',
    },
});