https://github.com/itswendell/emotion-native-extended
Better styling support for Emotion (React Native): Media queries, relative units, percents, operations and more...
https://github.com/itswendell/emotion-native-extended
css-in-js css3 emotion expo media-queries react react-native react-native-web responsive styled-components stylesheet
Last synced: 11 days ago
JSON representation
Better styling support for Emotion (React Native): Media queries, relative units, percents, operations and more...
- Host: GitHub
- URL: https://github.com/itswendell/emotion-native-extended
- Owner: ItsWendell
- License: mit
- Created: 2020-04-05T11:49:02.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T03:30:28.000Z (over 2 years ago)
- Last Synced: 2025-03-24T14:51:20.535Z (28 days ago)
- Topics: css-in-js, css3, emotion, expo, media-queries, react, react-native, react-native-web, responsive, styled-components, stylesheet
- Language: TypeScript
- Homepage:
- Size: 4.51 MB
- Stars: 43
- Watchers: 0
- Forks: 1
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Emotion Native Extended
This is a drop-in replacement optimized for React Native for the `styled` function / object coming from [Emotion](https://github.com/emotion-js/emotion). It extends the native styhesheets with [React Native Extended Stylesheet](https://github.com/vitalets/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](https://github.com/vitalets/react-native-extended-stylesheet) and [Emotion](https://github.com/emotion-js/emotion) for the supported styling properties.
## Styled System
I started this project since I like using [Styled System](https://github.com/styled-system/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](https://github.com/vitalets/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](https://github.com/styled-system/styled-system/issues/1113) & [Pull Request #1113](https://github.com/styled-system/styled-system/pull/1133).
## Example
The example contains a [Expo](https://expo.io/) project with example usage with React Native for Web, Android and iOS with the use of the following libaries: Styled System / Emotion / Native Kitten.