In my app i have a Custom Button like this

import {
  ButtonIcon,
  ButtonSpinner,
  ButtonText,
  Button as GSButton
} from "@/components/ui/gluestack/button";
import React, { ComponentProps, useEffect, useState } from "react";

type ButtonProps = ComponentProps<typeof GSButton>;

type Props = ButtonProps & {
  icon?: React.ElementType;
  isLoading?: boolean;
  label?: string;
  buttonTextProps?: ComponentProps<typeof ButtonText>;
};

const Button: React.FC<Props> = React.forwardRef(
  ({ icon, label, onPress, isLoading, buttonTextProps, ...rest }, ref) => {
    const [loading, setLoading] = useState(false);

    useEffect(() => {
      if (isLoading !== undefined) {
        setLoading(isLoading);
      }
    }, [isLoading]);

    return (
      <GSButton
        ref={ref}
        size="xl"
        className="rounded-3xl gap-2 h-[55px] w-full"
        onPress={onPress}
        {...rest}
      >
        {icon && !loading && <ButtonIcon as={icon}></ButtonIcon>}
        {label && !loading && (
          <ButtonText className="font-normal text-2xl" {...buttonTextProps}>
            {label}
          </ButtonText>
        )}
        {loading && <ButtonSpinner color={"white"} />}
      </GSButton>
    );
  }
);

Button.displayName = "Button";

export default Button;