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