Zipline-Android-App/components/Button.tsx

import { getRippleColor } from "@/functions/util";
import { styles } from "@/styles/components/button";
import { MaterialIcons } from "@expo/vector-icons";
import { type AnimatableNumericValue, type ColorValue, type DimensionValue, Pressable, Text } from "react-native";

interface Props {
    onPress: () => unknown | Promise<unknown>;
    disabled?: boolean;
    color: ColorValue;
    textColor?: ColorValue;
    text?: string;
    width?: DimensionValue;
    height?: DimensionValue;
    icon?: keyof typeof MaterialIcons.glyphMap;
    iconColor?: ColorValue;
    borderWidth?: number;
    borderColor?: ColorValue;
    borderRadius?: string | AnimatableNumericValue;
    iconSize?: number;
    padding?: number;
    rippleColor?: ColorValue;
    margin?: {
        top?: DimensionValue;
        bottom?: DimensionValue;
        left?: DimensionValue;
        right?: DimensionValue;
    },
    flex?: number;
    position?: "left" | "center" | "right";
    bold?: boolean;
    open?: boolean;
}

export default function Button({
    onPress = () => {},
    disabled = false,
    color,
    textColor = "white",
    text,
    width,
    height,
    icon,
    iconColor = "white",
    borderWidth = 0,
    borderColor,
    iconSize = 20,
    padding = 10,
    margin = {},
    rippleColor,
    flex,
    borderRadius,
    position,
    bold = true,
    open
}: Props) {
    const flexPositions: { [key in "left" | "center" | "right"]: "center" | "flex-start" | "flex-end" } = {
        center: "center",
        left: "flex-start",
        right: "flex-end"
    }

    return (
        <Pressable
            onPress={onPress}
            disabled={disabled}
            android_ripple={{
                color: rippleColor || getRippleColor(color as string)
            }}
            style={{
                ...styles.button,
                width: width,
                backgroundColor: color,
                borderWidth: borderWidth,
                borderColor: borderColor,
                padding: padding - borderWidth,
                justifyContent: flexPositions[position || "center"],
                marginLeft: margin.left,
                marginRight: margin.right,
                marginTop: margin.top,
                marginBottom: margin.bottom,
                flex,
                ...((!Number.isNaN(Number(height))) && { height }),
                ...((!Number.isNaN(Number(borderRadius))) && { borderRadius }),
            }}
        >
            {icon && (
                <MaterialIcons
                    name={icon}
                    size={iconSize}
                    color={iconColor}
                />
            )}
            {text && (
                <Text style={{
                    ...styles.buttonText,
                    color: textColor,
                    fontWeight: bold ? "bold" : "normal",
                    ...(icon && { marginLeft: 5 })
                }}>{text}</Text>
            )}
            {typeof open === "boolean" && (
                <MaterialIcons name={open ? "expand-more" : "expand-less"} size={20} color="white" />
            )}
        </Pressable>
    )
}