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
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';
}