https://github.com/kiurchv/react-native-web-responsive

Universal media queries for React Native and web
https://github.com/kiurchv/react-native-web-responsive

media-query react react-native responsive web

Last synced: 4 days ago
JSON representation

Universal media queries for React Native and web

• Host: GitHub
• URL: https://github.com/kiurchv/react-native-web-responsive
• Owner: kiurchv
• License: mit
• Created: 2017-07-13T16:30:26.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-07-26T19:10:53.000Z (over 7 years ago)
• Last Synced: 2025-01-22T07:37:43.844Z (16 days ago)
• Topics: media-query, react, react-native, responsive, web
• Language: JavaScript
• Size: 22.5 KB
• Stars: 19
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-web-responsive

Universal media queries for React Native and web.

## Installation

Using npm:

```sh

npm install --save react-native-web-responsive

```

or yarn:

```sh

yarn add react-native-web-responsive

```

## Usage

Since MediaQuery component built on components from [react-responsive](https://github.com/contra/react-responsive) and [react-native-responsive](https://github.com/adbayb/react-native-responsive) it can utilize any props supported by them with next limitations:

1. There is no difference between viewport- and device-based measurements on native.

2. The only supported unit for the resolution property is dppx.

3. Child function, properties `aspectRatio`, `component`, `color`, `colorIndex`, `monochrome`, `scan` and `type` are unsupported on native.

### Example

```jsx

import React from "react";

import { View, Text } from "react-primitives";

import MediaQuery from "react-native-web-responsive";

function ResponsiveExample() {

  return (

    

      Device Test!

      

        You are a desktop or laptop

        

          You also have a huge screen

        

      

      

        You are a tablet or mobile phone

      

      

        You are portrait

      

      

        You are landscape

      

      

        You are retina

      

    

  );

}

```

## License

[MIT](https://github.com/kiurchv/react-native-web-responsive/blob/master/LICENSE)