Media Queries

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 { Stylesheet, mq } from 'react-native-unistyles'

const styles = Stylesheet.create(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 { StyleSheet, mq } from 'react-native-unistyles'

const styles = Stylesheet.create(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 { StyleSheet, mq } from 'react-native-unistyles'

const styles = Stylesheet.create(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 { StyleSheet, mq } from 'react-native-unistyles'

const styles = Stylesheet.create(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 { StyleSheet, mq} from 'react-native-unistyles'

const styles = Stylesheet.create(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

Breakpoints and Media Queries will be auto converted to Web CSS media queries. Learn more about Web Media Queries.