Skip to main content

TypeScript

React Native Styled System aims for type-safe use.

Please enter the path to the module where ThemedDict is default exported as an argument to the command.

generate-theme-type src/AppTheme.ts

More convenient use is possible with scripts in package.json.

package.json
{
  /* ... */
  "scripts": {
    "theme:gen": "generate-theme-type src/AppTheme.ts"
  }
}
npm run theme:gen

Theme File Import Rules​

Keep your theme.ts file focused on tokens only.

  • For parser-friendly theme.ts, import only theme utilities you actually use:
    • createTheme, defaultTheme from @react-native-styled-system/util
    • createThemeColors from @react-native-styled-system/util (if you generate semantic tokens)
  • Do not import from react-native, react, hooks, providers, or app runtime modules. theme.ts should behave like a static token module.
  • Extra imports can break CLI theme type generation during bundling.
danger

If theme.ts imports runtime modules (react-native, react, hooks, providers, app services), generate-theme-type can fail and stop the CLI. Keep theme.ts limited to pure theme utilities and token data.

theme.ts
// parser-friendly theme.ts
import { createTheme, defaultTheme, createThemeColors } from '@react-native-styled-system/util';
tip

When changing the version of a package or installing a new one, you must always execute the type creation command.

We recommend using the postinstall script so that it can operate without problems in CI as follows.

package.json
{
  "postinstall": "yarn theme:gen"
}

How it works​

used internally in the package File in the path node_modules/@react-native-styled-system/core/lib/typescript/src/@types/ThemedTypings.d.ts Regenerate it yourself.

Then it is created as follows:

node_modules/@react-native-styled-system/core/lib/typescript/src/@types/ThemedTypings.d.ts
import type { ColorsValue, RadiiValue, SizesValue, SpaceValue } from './Token';

export interface ThemedTypings {
  colors:
    | (ColorsValue & {})
    | 'white'
    | 'black'
    | 'transparent'
    | 'gray50'
    /* ... */
    | 'blue900';
  radii: (RadiiValue & {}) | (`${number}` & {}) | (`${any}px` & {}) | '1' | '2' | 'sm' | 'md';
  sizes:
    | (SizesValue & {})
    | (`${number}` & {})
    | (`${any}px` & {})
    | '0'
    /* ... */
    | 'px'
    | '0.5';
  space:
    | (SpaceValue & {})
    | (`${number}` & {})
    | (`${any}px` & {})
    | '0'
    /* ... */
    | '0.5'
    | '-0.5';
  typography: 'h1';
}