search

elemental-design / react-platform

Experimental cross-platform React Native interoperability APIs, component wrappers and polyfills.
MIT License
17 stars 0 forks source link

Test useWindowDimensions polyfill for web #6

Open macintoshhelper opened 4 years ago

macintoshhelper commented 4 years ago

It appears that web window.screen.width and window.innerWidth have some unreliable behaviour on desktop, e.g. when resizing a window to mobile width, and on a mobile device, where the viewport is artificial, but innerWidth isn't.

I've implemented a hack with a comparison operator, but this needs to be tested, and needs feedback.

This deviates from using react-native-web, which uses window.innerHeight and window.innerWidth, which in my testing seem to not render density independent pixels, as they do on React Native: https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/useWindowDimensions/index.js#L19 . ~So maybe this should be raised as an issue there?~

macintoshhelper commented 4 years ago

I may be totally wrong and getting this confused though with another problem and react-native-web using window.innerWidth is totally fine. Checked just now and it appears to render density independent pixels (rather than native resolution) on phones, correctly.