Typescript support for gluestack

Question

Github Link I'm wrapping the main component (installed by the library) into another one (my custom component). So, after that, I realize that I have no more typesafe on my component... Having it said, I'd like to know if the're typesafe support as NativeBase does. There are some interfaces to make it easier, or I need to implement it by myself?

import { ReactNode } from 'react';
import { Button as GlueStackButton, ButtonProps as GlueStackButtonProps } from '../../../components/core/Button'; // CORE COMPONENTS HERE

type ButtonProps = GlueStackButtonProps & {
  action?: 'default' | 'primary' | 'secondary' | 'tertiary', // If I dont map it here...
  variant?: 'solid' | 'outline' | 'link',
  isLoadingText?: string,
  IconLeft?: ReactNode,
  IconRight?: ReactNode
};

export default function Button({ children, action, variant, IconLeft, IconRight, isDisabled, isLoading, isLoadingText, ...props }: ButtonProps) {
  const disabled = isDisabled || isLoading;
  return (
    {/** 
      ... and put in a declarative way on the component, when I call for this component in my screens, I'm start to be alerted that this property 'action', for example, doesn't exists. In the same way, 'variant', 'children'...
    */}
    <GlueStackButton action={action} variant={variant} isDisabled={disabled} {...props}>
      {isLoading ? (
        <>
          <GlueStackButton.Spinner />
          {isLoadingText && <GlueStackButton.Text>{isLoadingText}</GlueStackButton.Text>}
        </>
      ) : (
        <>
          {IconLeft && IconLeft}
          <GlueStackButton.Text>{children as ReactNode}</GlueStackButton.Text>
          {IconRight && IconRight}
        </>
      )}
    </GlueStackButton>
  )
}

Answer 1

Best way today is probably using ComponentProps from React.

Example:

import { ComponentProps } from 'react';
import { Text, Pressable } from '@gluestack-ui/themed';

interface CustomButtonProps extends ComponentProps<typeof Pressable> {
    name: string;
}

export function Group({ name, ...rest }: CustomButtonProps) {
    return (
        <Pressable mr="$3" w="$16" {...rest}>
            <Text
                color="$gray200"
                textTransform="uppercase"
                fontSize="$xs"
                fontWeight="$bold"
            >
                {name}
            </Text>
        </Pressable>
    );
}