Using useMediaQuery with min-width does not trigger re-rendering when orientation is changed on iPhone

[seleckis]

I'm using This library to detect the width of the screen and render different components, so this code:

export const Box = () => {
  const isLarge = useMediaQuery({ query: "(min-width: 640px)" });
  return isLarge
    ? <LargeComponent />
    : <SmallComponent />; 
};

... is not working for me on Safari/iPhone 10/11 either native device or simulator. Works on Android Chrome and Desktop Chrome Emulator.

[yocontra]

Could you make a codepen, jsfiddle, or similar that reproduces the issue?

[seleckis]

Hm, yes, I have created simple example and it works, will try to figure out what's going on in the middle

[seleckis]

I have found that "react-scale-text" library's component is blocking react-responsive to re-render after orientation change. Interesting...

[seleckis]

So this is not related to this library, will just change react-scale-text to another lib

[yocontra]

@seleckis If the maintainers of react-scale-text don't fix it let me know and we can add a note to our README to avoid that package.

[seleckis]

I don't think they gonna fix it, because that project is not being updated for 2 years. I have just changed to another solution: https://github.com/saltycrane/use-fit-text which works great for me

[yocontra]

@seleckis Want to send a PR to add a section to the README "Known issues with other packages"?

[singleportrait]

@seleckis Question: How did you determine that package was the one blocking the orientation change from re-rendering? I'm having what feels like a similar issue, though my project doesn't use that library.

Thanks!

[seleckis]

@singleportrait I've just tried to add/remove it from/to app. I didn't checked entire packages what does it do and use what can cause such problem. I don't have time for that, so I have just tried another solution and it works for me.

[singleportrait]

@seleckis Great, thanks for the tip.