Home Reference Source

src/components/buttons/ToJournalButton.js

import React from 'react';
import {StyleSheet, TouchableOpacity} from 'react-native';

import ImageWrapper from '../wrappers/ImageWrapper';

import {JournalButtonDimensions} from '../../utils/DimensionsConstants';
import {UIColors} from '../../utils/ColorConstants';
import {globalStyles} from '../../styles/styles';

/**
 * Component representing the button to navigate to journal.
 * @param {Object} props - Properties
 * @param {Object} props.style - Styling of the component
 * @param {function} props.onPress - Action to be executed when the button is pressed
 * @returns {Object} Button to navigate to journal
 */
export default function ToJournalButton(props) {
    // Retrieve props
    const style = props.style;
    const onPress = props.onPress;

    const buttonStyle = style === undefined ? styles.defaultPosition : style;

    return (
        <TouchableOpacity
            onPress={onPress}
            style={[styles.container, globalStyles.shadow, buttonStyle]}>
            <ImageWrapper
                source={require('../../assets/icons/journalIcon.png')}
                wrapperStyle={styles.icon}
            />
        </TouchableOpacity>
    );
}

/** Local styles
 * @type {Object}
 */
const styles = StyleSheet.create({
    container: {
        width: JournalButtonDimensions.LARGE_BUTTON.width,
        height: JournalButtonDimensions.LARGE_BUTTON.height,
        borderRadius: JournalButtonDimensions.LARGE_BUTTON.borderRadius,
        backgroundColor: UIColors.BACKGROUND_BUTTON,
    },
    defaultPosition: {
        position: 'absolute',
        bottom: '20%',
        right: '25%',
    },
    icon: {
        width: '100%',
        height: '100%',
    },
});