README
style-composer ·
Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web
npm i style-composer
Note: this package is in early development, use with caution
import {StyledView, StyledText, composeClass, media} from "style-composer";
const $Card = composeClass("card", () => ({
padding: 10,
fontSize: 12,
[media({minWidth: 500})]: {
fontSize: 14,
}
}));
<StyledView classes={$Card}>
<StyledText>It just works!</StyledText>
</StyledView>
Features
- Cascading Styles
- Native & Web Support
!important
like feature- Media Queries
- Class Variants
- Theming
- Dynamic Units (vw, vh)
Why?
The inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.
For example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.
To solve this style-composer
builds on-top of this system to provide many features it can't.