Skip to main content

Configuration

Provider​

Wrap your app with StyledSystemProvider to make theme tokens available to all styled components.

App.tsx
import { StyledSystemProvider } from '@react-native-styled-system/core';
import { defaultTheme } from '@react-native-styled-system/util';

const App = () => (
  <StyledSystemProvider theme={defaultTheme}>
    <MyApp />
  </StyledSystemProvider>
);
PropTypeDefaultDescription
themePartial<ThemedDict>—Theme tokens (colors, space, sizes, radii, typography, breakpoints)
screenWidthnumberuseWindowDimensions().widthOverride screen width for responsive breakpoints
warning

Without StyledSystemProvider, styles won't resolve properly. No error is thrown.

defaultTheme​

The quickest way to start. Includes a production-ready token set:

CategoryIncluded
colorsTailwind CSS v4 full palette (22 groups, shades 50–950) + shadcn/ui semantic colors
space / sizes4px unit scale: 0, px, 0.5, 1, 2 ... 48, plus full(100%), half(50%)
radiism(4), md(8), lg(12), xl(16), 2xl(24), full(9999)
typographyh1, h2, h3, body, caption, small
breakpoints[480, 768, 1024]

createTheme​

When declaring your theme file, keep it parser-friendly: avoid react-native imports and define tokens only with theme utilities.

danger

theme.ts is bundled by the CLI. If it imports runtime modules like react-native, react, or app-level hooks/providers, generate-theme-type can fail.

Use createTheme to build or extend a theme.

Extend defaultTheme — each token group is shallow-merged, breakpoints is replaced:

import { createTheme, defaultTheme } from '@react-native-styled-system/util';

const theme = createTheme(defaultTheme, {
  colors: { brand: '#FF6600' },
  breakpoints: [480, 1024],
});

Build from scratch — missing groups default to {}, breakpoints to []:

import { createTheme } from '@react-native-styled-system/util';

const theme = createTheme({
  colors: { primary: '#3B82F6', background: '#FFFFFF' },
  space: { '1': 4, '2': 8, '3': 12 },
});

Next steps​