Mobile/components/ui/Button.tsx

import React from "react";
import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
import CustomText from "./Text";
import { AntDesign } from "@expo/vector-icons";
import { AntDesignIconNames } from "../Icons";
import { Size } from "../Constants";

export type ButtonStyle = "default" | "outline" | "secondary";

//@ts-ignore
export interface ButtonProps extends TouchableOpacityProps {
  size?: Size;
  style?: ButtonStyle;
  insideClassName?: string;
  beforeIcon?: AntDesignIconNames;
  afterIcon?: AntDesignIconNames;
}

export default React.forwardRef<any, ButtonProps>(
  (
    {
      size,
      style,
      beforeIcon,
      afterIcon,
      onPress,
      className,
      insideClassName,
      children,
      ...props
    },
    ref
  ): React.ReactElement => {
    const getButtonStyle = (): string => {
      switch (style ?? "default") {
        case "default":
          return (
            "justify-center items-center bg-black text-white rounded-3xl" +
            " " +
            className
          );
        case "outline":
          return (
            "justify-center items-center border-black text-black border-2 rounded-3xl" +
            " " +
            className
          );
        case "secondary":
          return (
            "justify-center items-center bg-gray-200 text-black rounded-3xl" +
            " " +
            className
          );
      }
    };

    const getIconSize = (): number => {
      switch (size ?? "lg") {
        case "xs":
          return 24;
        case "md":
          return 24;
        case "lg":
          return 24;
        case "xl":
          return 24;
        case "2xl":
          return 30;
        case "3xl":
          return 36;
        case "4xl":
          return 36;
        case "5xl":
          return 42;
        case "6xl":
          return 48;
        case "7xl":
          return 54;
        case "8xl":
          return 60;
        case "9xl":
          return 66;
      }
    };

    return (
      <View className={getButtonStyle()} {...ref} {...props}>
        <TouchableOpacity
          className={"flex-row justify-center items-center gap-2 p-4 w-full"}
          onPress={onPress}
        >
          {beforeIcon != null ? (
            <AntDesign
              name={beforeIcon}
              color={style == null || style == "default" ? "white" : "black"}
              size={getIconSize()}
            />
          ) : null}
          <CustomText
            position="center"
            size={size ?? "lg"}
            weight="bold"
            color={style == null || style == "default" ? "white" : "black"}
          >
            {children}
          </CustomText>
          {afterIcon != null ? (
            <AntDesign
              className="w-auto"
              name={afterIcon}
              size={getIconSize()}
              color={style == null || style == "default" ? "white" : "black"}
            />
          ) : null}
        </TouchableOpacity>
      </View>
    );
  }
);