import React from "react";
import { GestureResponderEvent, StyleProp, StyleSheet, Text, TouchableOpacity, ViewStyle } from "react-native";
import { colors } from "../../globals";
export type ButtonProps = {
text: string,
onPress: (event: GestureResponderEvent) => void,
style?: StyleProp<ViewStyle>
}
/**
* A general component that represents a primary button.
* @component
*/
export const PrimaryButton: React.FC<ButtonProps> = ({text, onPress, style}) => {
return(
<TouchableOpacity style={[styles.btn, styles.primaryBtn, style]} onPress={onPress}>
<Text style={{color: 'white'}}>{text}</Text>
</TouchableOpacity>)
}
/**
* A general component that represents a secondary button.
* @component
*/
export const SecondaryButton: React.FC<ButtonProps> = ({text, onPress, style}) => {
return(
<TouchableOpacity style={[styles.btn, styles.secondaryBtn, style]} onPress={onPress}>
<Text style={{color: 'white'}}>{text}</Text>
</TouchableOpacity>)
}
const styles = StyleSheet.create({
btn: {
borderRadius: 50,
width: '100%',
justifyContent: 'center',
alignItems: 'center',
height: 60,
marginBottom: 20,
},
primaryBtn: {
backgroundColor: colors.red,
},
secondaryBtn: {
borderColor: 'white',
borderWidth: 2,
backgroundColor: 'transparent',
}
})
Source