detect-responsive-traits VS react-native-media-query

Optimise Fresnel with detect-responsive-traits: SSR based on sniffing user-agent where it can, but all breakpoints if not. To optimise bytes sent over-the-wire.

Before, Dripsy used a library called Fresnel to achieve achieve Responsivity with CSS media queries. CSS breakpoints on web will rely on the mobile device's user agent for most cases. But since this can be inaccurate, Fresnel also uses pre-emptive server-side breakpoint generation. Basically, if the mobile user-agent cannot be accurately detected (if you combine Fresnel with its sister library, detect-responsive-traits), then Fresnel will render all media query breakpoints on the server (a bit of extra work for the server, since it might lead to rendering more components). So the client's browser will receive all breakpoints on first render and can immediately start rendering according to the correct ones. Instead of waiting for React to rehydrate before only then running the media queries with CSS-in-JS, which would have given latency and potentially unwanted visual side-effects. This becomes most acute when you are using SSR, and thus don't want to wait for rehydration on the client to start showing the responsively laid out content.

Forking RNW is an option. But if you are worried about maintaining a fork of RNW with potential style inconsistencies, then react-native-media-query is already that fork. It attempts to do media queries inside RNW's StyleSheet.

Not yet responsive, but planned responsive under SSR with react-native-media-queries, which makes pure CSS media queries run on native (with device orientation), since Magnus UI generates pure CSS media queries when run on web. They consider it more performant than using Fresnel. But the jury is out..

Of course it’s not all butterflies and rainbows, you’ve already touched on the css limitations such as the positioning fixed & the likely difficulties you’ll face if implementing a drag to upload feature, but if you can live without these features, and for some such a the lack of media queries, you can easily work around by calculating width with Dimensions or this library https://github.com/kasinskas/react-native-media-query#readme (not used this myself so not sure how well it works)