Skip to main content

Getting Started

React Native Styled System brings token-driven styling to React Native. Pass design tokens as props, resolve them from a centralized theme, and ship consistent UI faster.

Features​

  • Pass style props like m, px, py, bg, flex, flexDirection, position directly to components
  • All styles are cacheable, preventing unnecessary re-renders when values haven't changed
  • Define and deliver custom design systems through themes
  • Full TypeScript support via CLI-generated type augmentations
  • Inject logical or responsive values (e.g. safeAreaTop, sidePadding) into theme tokens
  • Text typography support
  • Dark theme integration
  • Built-in Tailwind CSS v4 palette + shadcn/ui semantic colors via defaultTheme
  • Responsive breakpoint arrays for adaptive layouts

Why​

Typical React Native styling requires manually referencing theme values everywhere:

const Sample = () => {
  const theme = useTheme();

  return (
    <View style={{
      backgroundColor: theme.colors['red.500'],
      borderRadius: theme.radii.lg,
    }}>
      <Text style={[theme.typography.h1, { marginTop: theme.spaces[4] }]}>
        React Native
      </Text>
    </View>
  );
};

With Styled System, design tokens become props:

const Sample = () => {
  return (
    <Box bg={'red.500'} radius={'lg'}>
      <Txt t={'h1'} mt={4}>
        React Native
      </Txt>
    </Box>
  );
};
info

Not all styled-system grammar is supported yet. Unsupported grammar is not a technical limitation and can be added as needed. Styles like justifySelf that React Native does not support cannot be added.