React Native Styled System

Deadly Simple Style Library

---

Token-driven styling for React Native. Pass design tokens as props, resolve them from a centralized theme, and ship consistent UI faster.

Install

yarn add @react-native-styled-system/core @react-native-styled-system/util

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

What's New in v2.0

• Built-in design tokens - Comprehensive color palette and semantic color tokens included as defaultTheme
• Semantic color generation - createThemeColors({ base, theme }) generates light/dark color sets automatically
• Theme utilities - createTheme() for creating and merging themes with sensible defaults
• Responsive values - Pass [base, sm, md, lg] arrays to any style prop for breakpoint-based styling

See the full v2.0 release notes for details.

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

Quick Start

1. Wrap your app with the provider:

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

const App = () => (
  <StyledSystemProvider theme={defaultTheme}>
    {/* your app */}
  </StyledSystemProvider>
);

2. Create styled components:

import { createSxComponent } from '@react-native-styled-system/core';
import { View, Text } from 'react-native';

const Box = createSxComponent(View);
const Txt = createSxTextComponent(Text);

3. Use token props:

<Box bg={'primary'} p={4} radius={'lg'}>
  <Txt t={'h1'} color={'primary-foreground'}>
    Hello World
  </Txt>
</Box>

Documentation

Full documentation is available at mym0404.github.io/react-native-styled-system.

Contributing

See the contributing guide for details.

License

MIT