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

• Documentation

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.