crazycharge-app/component/global/normal_button.tsx

import React, { ReactElement } from "react";
import { Pressable, Text, StyleSheet, ViewStyle, StyleProp } from "react-native";

interface NormalButtonProps {
	title: ReactElement;
	extendedStyle?: StyleProp<ViewStyle>;
	onPress: () => void;
}

const NormalButton: React.FC<NormalButtonProps> = ({ title, extendedStyle, onPress }) => {
	return (
		<Pressable
			onPress={onPress}
			style={({ pressed }) => [styles.button, pressed ? styles.buttonPressed : null, extendedStyle]}
		>
			{title}
		</Pressable>
	);
};

const styles = StyleSheet.create({
	button: {
		maxWidth: "100%",
		padding: 15,
		margin: 10,
		backgroundColor: "#025c72",
		justifyContent: "center",
		alignItems: "center",
		borderRadius: 10,
	},
	buttonPressed: {
		backgroundColor: "#28495c",
	},
});

export default NormalButton;