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🔗