Get Started
React Native Styled System is a React Native implementation
of the styled-system package commonly used on the web.
Highlights
+-
+
- ⚡️ All styles are allowed to be cached. So it doesn't cause any rerender if result is consistent. +
- ⭐️ Allows arguments such as
m, px, py, bg, flex, flexDirection, positionto be passed directly to Props according to the grammar ofstyled-system.
+ - 🎨 Users can define the design system by directly defining and delivering themes. +
- ❤️ TypeScript can be fully used through the Type Generation process using CLI. +
- 🚀 Logical or responsive values such as
safeAreaTopandsidePaddingcan be injected into the theme and used as token values.
+ - 💬 Text Typography +
- 🎉 Integrate Dark Theme easily. +
Why we need styled-system
Let me show this code.
const Sample = () => {
const theme = useTheme();
return (
<View style={{
backgroundColor: theme.colors.red500,
borderRadius: theme.radii.lg
}}>
<Text style={[theme.typography.h1, { marginTop: theme.spaces[4] }]}>
React Native
</Text>
</View>
);
};
Wh
But original styled-system is for CSS not in React Native.
We introduce React Native Styled System 🎉
-
info
It does not fully support the grammar of styled-system and there are some grammars that are not currently supported, but this is not a technical limitation and will be added as needed.
Styles such as justifySelf that are not yet supported in React Native obviously cannot be added in the future.
Highlights
--
-
- ⚡️ All styles are cached. So it doesn't cause any rerender if result is consistent. -
- ⭐️ Allows arguments such as
m, px, py, bg, flex, flexDirection, positionto be passed directly to Props according to the grammar ofstyled-system.
- - 🎨 Users can define the design system by directly defining and delivering themes. -
- ❤️ TypeScript can be fully used through the Type Generation process using CLI. -
- 🚀 Logical or responsive values such as
safeAreaTopandsidePaddingcan be injected into the theme and used as token values.
- - 💬 Text Typography -
- 🎉 Integrate Dark Theme easily. -