Home Reference Source

src/components/buttons/BaseSquareButton.js

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

import {ColorPalette} from '../../utils/ColorConstants';
import {SquareButtonDimensions} from '../../utils/DimensionsConstants';
import {globalStyles} from '../../styles/styles';

/**
 * Component representing the base for a square button with shadow.
 * @param {Object} props - Properties
 * @param {Object} props.componentStyle - Styling of component (optional)
 * @param {function} props.onPress - Action to be executed when the button is pressed
 * @param {Object} props.children - Content of the button
 * @returns {Object} Basic square button with shadow used to construct square buttons.
 */
export default function BaseSquareButton(props) {
    // Retrieve props
    const componentStyle = props.componentStyle;
    const onPressAction = props.onPress;
    const children = props.children;

    return (
        <TouchableOpacity
            style={[styles.container, componentStyle, globalStyles.lightShadow]}
            onPress={onPressAction}>
            {children}
        </TouchableOpacity>
    );
}

/** Local styles */
const styles = StyleSheet.create({
    container: {
        width: SquareButtonDimensions.LARGE_BUTTON.width,
        height: SquareButtonDimensions.LARGE_BUTTON.height,
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignContent: 'center',
        alignItems: 'center',
        borderRadius: 20,
        padding: 10,
        backgroundColor: ColorPalette.SOFT_ORANGE,
    },
});