search

ItsWendell / emotion-native-extended

Better styling support for Emotion (React Native): Media queries, relative units, percents, operations and more...
MIT License
43 stars 1 forks source link
css-in-js css3 emotion expo media-queries react react-native react-native-web responsive styled-components stylesheet

readme

Emotion Native Extended

npm

This is a drop-in replacement optimized for React Native for the styled function / object coming from Emotion. It extends the native styhesheets with React Native Extended Stylesheet, adds support for media-queries, variables, dynamic themes, relative units, percents, math operations, scaling and a lot more CSS styling features.

This library also adds support for real-time responsive styling, in many cases using media queries on native or other methods this could been a chore todo.

Getting Started

  1. npm install emotion-native-extended@next
  2. Replace your existing import styled from "@emotion/native"; with import styled from "emotion-native-extended"
  3. See the docs for React Native Extended Stylesheet and Emotion for the supported styling properties.

Styled System

I started this project since I like using Styled System for rapid UI development using style props. It has support for React Native but it doesn't work for it's responsive features since media queries don't work. React Native Extended Stylesheet add's this functionality.

Quick note

There is a small script in this code that replaces all @media screen and media queries with regular @media media queries since these are not supported by Extended Stylesheet and Styled System is using them as their media queries. Styled System doesn't support custimization for media queries yet. See / follow Issue #1113 & Pull Request #1113.

Example

The example contains a Expo project with example usage with React Native for Web, Android and iOS with the use of the following libaries: Styled System / Emotion / Native Kitten.