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.