Media Queries

All platforms

2.0.0

Media queries provide more power and allow you to style cross-platform apps with pixel-perfect accuracy.

Basic usage

To use media queries, you need to import the mq utility and convert your value to an object:

import { createStyleSheet, mq } from 'react-native-unistyles'

const stylesheet = createStyleSheet(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: theme.colors.background,
        backgroundColor: {
            [mq.only.width(240, 380)]: theme.colors.background,
            [mq.only.width(380)]: theme.colors.barbie
       }
    }
}))

The mq utility provides Intellisense for quickly building your media queries.

Advanced usage

You can also combine width media queries with height media queries:

import { createStyleSheet, mq } from 'react-native-unistyles'

const stylesheet = createStyleSheet(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: theme.colors.background,
        backgroundColor: {
            [mq.width(240, 380).and.height(300)]: theme.colors.background,
            [mq.width(380).and.height(300)]: theme.colors.barbie
        }
    }
}))

Or use only height media queries:

import { createStyleSheet, mq } from 'react-native-unistyles'

const stylesheet = createStyleSheet(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: theme.colors.background,
        backgroundColor: {
            [mq.only.height(300, 500)]: theme.colors.background,
            [mq.only.height(500)]: theme.colors.barbie
        }
    }
}))

You can also reuse your defined breakpoints:

import { createStyleSheet, mq } from 'react-native-unistyles'

const stylesheet = createStyleSheet(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: theme.colors.background,
        backgroundColor: {
            [mq.only.height(500)]: theme.colors.background,
            [mq.only.width(200, 'xl')]: theme.colors.barbie
        }
    }
}))

Reference

Available combinations

mq.only.width // target only width
mq.only.height // target only height
mq.width(...).and.height(...) // target both width and height
mq.height(...).and.width(...) // target both height and width

Available values

(100, 200) // from 100 to 199
(400, 'xl') // from 400 to 'xl' breakpoint
('sm', 'md') // from 'sm' to 'md' breakpoint
(undefined, 1000) // from 0 to 999
(null, 800) // from 0 to 799
(500) // from 500 onwards

Full example

mq.only.width(100, 200) // width from 100 to 199
mq.height(500).and.width('sm') // heigh from 500 onwards and width from 'sm' breakpoint onwards
mq.only.height(null, 1000) // height from 0 to 999

Tip

If you pass an invalid range to mq utility eg. (‘xl’, ‘sm’) or (500, 200) the media query will be marked as invalid and won’t be used to resolve your styles.

Combining media queries with breakpoints

You can mix media queries with breakpoints, but media queries will always have higher priority:

import { createStyleSheet, mq} from 'react-native-unistyles'

const stylesheet = createStyleSheet(theme => ({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
        backgroundColor: {
            sm: theme.colors.background,
            // Unistyles will firsly resolve to this style, even though sm may be also correct
            [mq.only.width(200, 'xl')]: theme.colors.barbie
        }
    }
}))

CSS Media Queries

CSS Media Queries support is only available on the web. To use CSS Media Queries set experimentalCSSMediaQueries with UnistylesRegistry:

import { UnistylesRegistry } from 'react-native-unistyles'

UnistylesRegistry
    .addConfig({
        experimentalCSSMediaQueries: true
    })

Tip

CSS Media queries is an experimental feature and doesn’t support all properties yet. It will be moved to stable in Unistyles 3.0.

With experimentalCSSMediaQueries set to false, Unsityles will compute your styles in the JavaScript.