gluestack

gluestack Logogluestack

Custom TS type for text size - gluestack v1

bronowsm posted this in #support
Open in Discord
Avatar
bronowsmOP
Hello, I have some custom gluestack-ui.config tokens for text. Instead of default xs, sm, md, lg, xl, etc, I called them "kilo", "mega", "giga" etc. Now, I defined an union, like so:
export const size = [
  'femto', 'pico','nano',  'micro',  'mili',  'centi',  'deci',  'deka',  'hecto',  'kilo',  'mega',  'giga',  'tera',  'peta',  'exa',  'zetta',
] as const;

and used it in TS interface, like on attached image. However, I'm receiving a TS error:
Type '{ children: string; size: "femto" | "pico" | "nano" | "micro" | "mili" | "centi" | "deci" | "deka" | "hecto" | "kilo" | "mega" | "giga" | "tera" | "peta" | "exa" | "zetta"; }' is not assignable to type 'StyledComponentProps<StyleProp<TextStyle>, unknown, TextProps, "Text", typeof Text>'.
  Types of property 'size' are incompatible.
    Type '"femto" | "pico" | "nano" | "micro" | "mili" | "centi" | "deci" | "deka" | "hecto" | "kilo" | "mega" | "giga" | "tera" | "peta" | "exa" | "zetta"' is not assignable to type '"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | undefined'.
      Type '"femto"' is not assignable to type '"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | undefined'.

It looks like Text component from gluestack library doesn't like my custom naming. How can I force it to accept my tokens, rather than default? I need to add here, that my custom tokens are working as expected - when I'm using e.g "giga" size, the values defined in gluestack config file, are properly reflected in the UI. It's only TS problem.
Image

1 Reply