Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 7x 1x 7x 1x 7x | 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',
}
}) |