style-composer

Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web

Usage no npm install needed!

<script type="module">
  import styleComposer from 'https://cdn.skypack.dev/style-composer';
</script>

README

style-composer · GitHub license npm version

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

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.