crazycharge-app/component/global/secondary_button.tsx

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

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

const SecondaryButton: React.FC<SecondaryButtonProps> = ({ 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: "#e7f2f8",
		justifyContent: "center",
		alignItems: "center",
		borderRadius: 10,
	},
	buttonPressed: {
		backgroundColor: "#d0e1e8",
	},
});
export default SecondaryButton;