Docs: how to use multiple media queries on one `<View/>` (jsxstyle)

[danielberndt]

Here's my attempt:

<View media={[
  '(max-width: 400px)', {padding: 0}, 
  '(max-width: 700px)', {paddingBottom: "2rem"}
]}/>

but this is failing quite spectacularly. So I'm curious: what's the correct way of doing this?

[threepointone]

You could use css directly for complicated stuff like this

<View css={{ 'media (...)' : {}, 'media(...)': {}}}

lemme know if this works

[danielberndt]

Will try!

Would you be interested in a PR to support a API like I described above? I've found that once you start using media queries for your app it's not too unlikely to want to define multiple breakpoints on a component, and having a nice API for this use case would be ...nice :)