search

yocontra / react-responsive

CSS media queries in react - for responsive design, and more.
https://contra.io/react-responsive
MIT License
6.94k stars 297 forks source link

max-width not working on mobile #320

Closed smwq closed 1 week ago

smwq commented 1 week ago

Hi

I am using react responsive(v 10.0.0) in react native expo.

I used the below condition to check for mobile devices : const isMobile = useMediaQuery({ query: "(max-width: 760px)" });

Also checking width and putting result in console: const { width } = useWindowDimensions();

console.log("===========**>", isMobile, width);

This seems to be working fine on desktop browser:

image

But it is not working on mobile devices(Android) and simulators(iOS):

image

Please help me with this. I have already put couple of hours into this not getting anywhere. Although it is working with this code const isBigScreen = useMediaQuery({ query: "(min-width: 760px)" });

Looking forward for quick reply. Thanks!

smwq commented 1 week ago

Comparing console of isMobile and isBigScreen side by side:

Desktop:

image

image

Mobile:

image
smwq commented 1 week ago

Apology for opening issue.

got the solution. @expo/match-media was not installed for it to work on react native.

yocontra commented 1 week ago

@smwq Want to send a PR to add a link to expo/match-media to the README here? https://github.com/yocontra/react-responsive?tab=readme-ov-file#with-polyfills