Responsive design and media queries

Web experiences should be built mobile first, customizing the experience for non-mobile users with media queries.

A simple media query

You can specify any CSS valid media query as an object key, like this:

<View
  extend={{
    '@media (min-device-pixel-ratio: 2)': {
      color: 'red',
    },
  }}
>
  Helo Retina Red!
</View>

Included media queries and breakpoints

The default media queries are available as keys on any extend style block:

<View
  extend={{
    color: 'red'
    fromM: {
      color: 'green'
    },
    fromL: {
      color: 'blue'
    },
  }}
>
  Hello Responsive!
</View>

They are also available on the theme:

const { breakpoints } = useTheme();
// breakpoints.fromM === '@media (min-width: 480px)' etc

For the common use case of setting a layout property to different values depending on the breakpoint, you can use an object with breakpoints as a value, or an array representing the same breakpoints.

<View
  extend={{
    backgroundColor: 'background.secondary',
    borderColor: 'ornament.border',
    borderWidth: 1,
    borderStyle: 'solid',
    padding: 8,
    width: {
      default: 100,
      fromM: 200,
      fromL: 300,
      fromXL: 400,
    },
  }}
>
  <Text>object breakpoints</Text>
</View>

<View
  extend={{
    backgroundColor: 'background.secondary',
    borderColor: 'ornament.border',
    borderWidth: 1,
    borderStyle: 'solid',
    padding: 8,
    width: [100, 200, 300, 400],
  }}
>
  <Text>array breakpoints</Text>
</View>

The following CSS properties accept responsive object or array values: alignContent alignItems alignSelf aspectRatio columnGap display flex flexBasis flexDirection flexGrow flexShrink flexWrap gap height justifyContent margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth order padding paddingBottom paddingLeft paddingRight paddingTop rowGap textAlign width

All media queries