https://github.com/mym0404/react-native-styled-system
React Native styled-system mimic
https://github.com/mym0404/react-native-styled-system
css react react-native styled-component styled-system theme
Last synced: 4 months ago
JSON representation
React Native styled-system mimic
- Host: GitHub
- URL: https://github.com/mym0404/react-native-styled-system
- Owner: mym0404
- License: mit
- Created: 2024-03-12T03:31:19.000Z (over 2 years ago)
- Default Branch: develop
- Last Pushed: 2026-02-12T16:11:06.000Z (4 months ago)
- Last Synced: 2026-02-12T20:12:29.518Z (4 months ago)
- Topics: css, react, react-native, styled-component, styled-system, theme
- Language: TypeScript
- Homepage: https://mym0404.github.io/react-native-styled-system/
- Size: 28.3 MB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
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:
```tsx
const Sample = () => {
const theme = useTheme();
return (
React Native
);
};
```
With Styled System, design tokens become props:
```tsx
const Sample = () => {
return (
React Native
);
};
```
## 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](https://mym0404.github.io/react-native-styled-system/docs/whats-new/v2) 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:**
```tsx
import { StyledSystemProvider } from '@react-native-styled-system/core';
import { defaultTheme } from '@react-native-styled-system/util';
const App = () => (
{/* your app */}
);
```
**2. Create styled components:**
```tsx
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:**
```tsx
Hello World
```
## Documentation
Full documentation is available at [mym0404.github.io/react-native-styled-system](https://mym0404.github.io/react-native-styled-system/).
## Contributing
See the [contributing guide](./CONTRIBUTING.md) for details.
## License
MIT