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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | /* Copyright (C) Click & Push Accessibility, Inc - All Rights Reserved * Unauthorized copying of this file, via any medium is strictly prohibited * Proprietary and confidential * Written and maintained by the Click & Push Development team * <dev@clicknpush.ca>, January 2022 */ import { FontAwesome } from "@expo/vector-icons"; import React from "react"; import { StyleProp, StyleSheet, Text, TouchableOpacity, ViewStyle } from "react-native"; import { colors, testTag } from "../utils/GlobalUtils"; interface ButtonProps { onPress: () => void, style?: StyleProp<ViewStyle> accessibilityLabel?: string, } interface TextButtonProps extends ButtonProps { text: string, } interface IconButtonProps extends ButtonProps { icon: string, color: string, size: number } /** * A general component that represents a primary button. * @component */ export const PrimaryButton: React.FC<TextButtonProps> = ({text, onPress, style, accessibilityLabel}) => { return( <TouchableOpacity {...testTag(accessibilityLabel)} 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<TextButtonProps> = ({text, onPress, style, accessibilityLabel}) => { return( <TouchableOpacity {...testTag(accessibilityLabel)} style={[styles.btn, styles.secondaryBtn, style]} onPress={onPress}> <Text style={{color: 'white'}}>{text}</Text> </TouchableOpacity>) } export const IconButton: React.FC<IconButtonProps> = ({onPress, style, size, color, icon, accessibilityLabel}) => { return( <TouchableOpacity {...testTag(accessibilityLabel)} style={style} onPress={onPress}> <FontAwesome size={size} color={color} name={icon as any}/> </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', } }) |