Support media queries with React Native

[tlvenn]

Thanks for the fantastic project guys, I am primarily targeting RN and I though it would be awesome if styled components could provide support for media queries seamlessly in RN.

Turns out that there is a new very promising project to add media queries support to both React and React Native.

https://github.com/tuckerconnelly/uranium

It would be pretty neat if a bridge would exist to embed this functionality so that I dont have to wrap my style component (which is already a wrapper) with Uranium wrapper.

[tlvenn]

@mxstbr any though on the subject ?

[jacobp100]

Just so I understand correctly, are you looking to have this,

height: 120;

@media (min-width: 600) {
  width: 56;
}

Go to,

const styles = {
  base: {
    height: 120,

    '@media (min-width: 600px)': {
      height: 56,
    },
  },
}

[knowbody]

I'm curious what would media queries in RN do? What sort of problems are you trying to solve? Would you like to get something what https://github.com/aybadb/react-native-responsive does?

[tlvenn]

@knowbody you can check this proposal https://gist.github.com/grabbou/72767db51f97fe86cfea
That should give you an idea on what media queries could do on RN.

It addresses the same kind of problem domain that media queries solve on the web. When you have an RN app that target ios, android, phones and tablets alike and need to adapt its layout depending on the device orientation and so on...

I dont really like how react-native-responsive is implementing media queries, for me, media queries should be expressed as css rules, just like on the web. In that regard, Uranium is a much better prospect imho.

Extended Stylesheet implemented the proposal above:

https://github.com/vitalets/react-native-extended-stylesheet#media-queries

[mxstbr]

As nobody has asked for this custom extension in more than half a year I doubt we'll include it in the library. On top of that many workarounds already exist that make media query functionality possible on ReactNative.

Thank you for suggesting improvements to the library!

[corysimmons]

Why didn't shripadk@d4fe1a9 get merged?

Does it add support for this?

I would love to use styled-components with RN but I need media queries. react-native-extended-stylesheet syntax is RN pojo nastiness...

Seems like a really valid request. Please re-open.

@shripadk Can you comment on this and if your fork is working open a PR to this lib please?

[edsonayllon]

So, is media-query not possible in React-Native? Why not support all CSS3? Media queries would be very helpful when making a responsive ui for tablets and phones.

[quantizor]

I'm open to it if someone wants to make a new PR and lots of tests.

[hosseinalipour]

Any new information on this? what does community use right now?
there are many projects support the feature but all of them use different ways of defining styles and queries, making projects unintegrated and messy.

[corysimmons]

@hosseinalipour Look at the PR I linked above. It's really simple. See if you can replicate that into a new PR like Evan suggested.

If that solution works for you locally, I'm sure someone could point you towards where a small test suite like that might live.

I haven't used RN in a long time, but would love media queries to be available next time I need to. :)

[nandorojo]

I'm working on a responsive, Theme UI-like library for React Native. It would be great if the styled.View from styled-components/native supported the web media queries the way styled.div does. This would be fine even if it only works on web. On web, it makes the most sense for media queries to be done using CSS, not JS, as some people have mentioned above.

I already got the media queries to work on native using the useDimensions hook from @react-native-community/hooks.

That said, if you try to use React Native's Dimensions API to create JS-based media queries on web (instead of using CSS,) you'll break server side rendering (see vercel/next.js#14469 (reply in thread).) That's why it would be great if the styled.View had the same functionality as styled.div for media queries.

[jamesone]

Is this something that's being considered?

[abumalick]

I'm working on a responsive, Theme UI-like library for React Native. It would be great if the styled.View from styled-components/native supported the web media queries the way styled.div does. This would be fine even if it only works on web. On web, it makes the most sense for media queries to be done using CSS, not JS, as some people have mentioned above.

I already got the media queries to work on native using the useDimensions hook from @react-native-community/hooks.

That said, if you try to use React Native's Dimensions API to create JS-based media queries on web (instead of using CSS,) you'll break server side rendering (see vercel/next.js#14469 (reply in thread).) That's why it would be great if the styled.View had the same functionality as styled.div for media queries.

And it is here: https://github.com/nandorojo/dripsy

Thank you very much for building this, I was missing theme-ui so much ❤️