TypeScript

To enable TypeScript for aliases and tokens, follow the steps below:

//gluestack style config
import { createConfig } from "@gluestack-style/react"

export const config = createConfig({
  aliases: {
    bg: "backgroundColor",
    p: "padding",
    m: "margin",
    /* ... */
  },
  tokens: {
    colors: {
      rose50: "#fff1f2",
      rose100: "#ffe4e6",
      /* ... */
    },
    fonts: {
      /* ... */
    },
    space: {
      "0": 0,
      "0.5": 2,
      /* ... */
    },
    fontSizes: {
      /* ... */
    },
  },
  globalStyle: {
    /* ... */
  },
} as const)

// Get the type of Config
type ConfigType = typeof config

// Extend the internal styled config
declare module "@gluestack-style/react" {
  interface ICustomConfig extends ConfigType {}
}

aliases: Define any prop you want to expand style value, the key is alias and the value is style property which you want to resolve that alias.
tokens: Tokens in design are the values or constants required to construct a design system. These values can represent spacing, color, typography etc. Design tokens help to achieve consistency in building user interfaces across all platforms.
globalStyle: refers to the styles that are applied globally application. It allows you to define styles that will be applied to all styled elements or a specific set of styled elements throughout your project. It can be used to create global variant like shadow, or backgrounds,

Steps to define config:

Step
1
:
Use createConfig function to create config with type assertion.

import { createConfig } from "@gluestack-style/react"

export const config = createConfig({
  aliases: {
    bg: "backgroundColor",
    p: "padding",
    m: "margin",
    /* ... */
  },
  tokens: {
    colors: {
      rose50: "#fff1f2",
      rose100: "#ffe4e6",
      /* ... */
    },
    fonts: {
      /* ... */
    },
    space: {
      "0": 0,
      "0.5": 2,
      /* ... */
    },
    fontSizes: {
      /* ... */
    },
  },
  globalStyle: {
    /* ... */
  },
} as const)

Why use type assertion?

Because we need information about the type of value to define the type of aliases and their corresponding tokens. For example, we have the alias bg which will be mapped to the colors token and has style property backgroundColor, so we have an internal property map for tokens (i.e. backgroundColor will map to colors internally) through which we will eventually define which alias will map to which token.

1. Get the type of config using the typeof operator.

// Get the type of Config
type ConfigType = typeof config

2. Extend the internal styled config interface ICustomConfig

// Extend the internal styled config
declare module "@gluestack-style/react" {
  interface ICustomConfig extends ConfigType {}
}

Edit this page on GitHub