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