emotion-native-media-query

Add responsive support for @emotion/native. It supports both React Native (Expo) and React Native Web (Expo for Web), as well as server-side rendering with frameworks such as Next.js.

Install

npm install --save emotion-native-media-query

Usage

import * as React from "react";
import RView, { MediaRule } from "emotion-native-media-query";

class Example extends React.Component {
  render() {
    return (
      <RView
        style={{
          backgroundColor: "black",
        }}
        rStyle={{
          [MediaRule.MaxWidth]: {
            300: {
              backgroundColor: "red",
            },
            600: {
              backgroundColor: "green",
            },
            900: {
              backgroundColor: "blue",
            },
          },
          [MediaRule.MinWidth]: {
            200: {
              padding: 33,
            },
            500: {
              padding: 66,
            },
            800: {
              padding: 99,
            },
          },
        }}
      />
    );
  }
}

For more, read the API Reference for RView.

License

MIT © hesyifei