css and js breakpoints don't match when the "show scroll bars" setting set to "always" on MacOS

[hamsterhomka]

Description

css and js breakpoints don't match when the "show scroll bars" setting set to "always" on MacOS. It happens because css counts the actual 1264px browser's window width as 1280px, whereas js useMedia() hook counts 1280px as 1280px. We can see that the issue is exactly in the 16px width scrollbar.

CodeSandbox/Snack link

No response

Steps to reproduce

Here's the example repo with the issue. https://github.com/hamsterhomka/gluestack-issue-breakpoints

1. Set "show scroll bars" setting to "always" in Appearance settings on MacOs
2. Start the dev server
3. Try to change the window width
4. See that the breakpoints don't match

gluestack-ui Version

1.0.0

Platform

• [ ] Expo
• [ ] React Native CLI
• [X] Next
• [X] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

js box is not visible (1279px)

js box is visible (1282px)

css box is not visible (1264px)

css box is visible (1266px)

Here is a simple patch to fix it. I created a hook useInnerWidth() that returns window.innerWidth on web (that matches css breakpoints) and used it in useMedia() gluestack hook

@gluestack-style-react-npm-1.0.11-e64493965f.patch

diff --git a/lib/module/hooks/useMedia.js b/lib/module/hooks/useMedia.js
index 89d163981c9d889a3623a6826721dd3f9ab7f910..3aaedc0a00ffd4e7a2c208851ca194a1b3de925b 100644
--- a/lib/module/hooks/useMedia.js
+++ b/lib/module/hooks/useMedia.js
@@ -1,17 +1,45 @@
-import { useWindowDimensions } from 'react-native';
-import { isValidBreakpoint } from '../generateStylePropsFromCSSIds';
-import { useStyled } from '../StyledProvider';
-export const useMedia = () => {
-  var _theme$config;
-  const theme = useStyled();
+import { Platform, useWindowDimensions } from 'react-native'
+import { isValidBreakpoint } from '../generateStylePropsFromCSSIds'
+import { useStyled } from '../StyledProvider'
+import { useEffect, useState } from 'react'
+
+const useInnerWidth = () => {
   const {
     width
-  } = useWindowDimensions();
-  const mediaQueries = theme === null || theme === void 0 || (_theme$config = theme.config) === null || _theme$config === void 0 || (_theme$config = _theme$config.tokens) === null || _theme$config === void 0 ? void 0 : _theme$config.mediaQueries;
-  const breakpoints = {};
+  } = useWindowDimensions()
+
+  const initialWidth = Platform.OS === 'web' && typeof window !== 'undefined' ? window.innerWidth : width
+  const [innerWidth, setInnerWidth] = useState(initialWidth)
+
+  const handleResize = () => {
+    setInnerWidth(window.innerWidth)
+  }
+
+  useEffect(() => {
+    if (Platform.OS === 'web') {
+      setInnerWidth(window.innerWidth);
+
+      window.addEventListener('resize', handleResize);
+    }
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [])
+
+  return innerWidth
+}
+
+export const useMedia = () => {
+  var _theme$config
+  const theme = useStyled()
+  const width = useInnerWidth()
+
+  const mediaQueries = theme === null || theme === void 0 || (_theme$config = theme.config) === null || _theme$config === void 0 || (_theme$config = _theme$config.tokens) === null || _theme$config === void 0 ? void 0 : _theme$config.mediaQueries
+  const breakpoints = {}
   Object.keys(mediaQueries).forEach(currentBreakPoint => {
-    breakpoints[currentBreakPoint] = isValidBreakpoint(theme === null || theme === void 0 ? void 0 : theme.config, mediaQueries[currentBreakPoint], width);
-  });
-  return breakpoints;
-};
+    breakpoints[currentBreakPoint] = isValidBreakpoint(theme === null || theme === void 0 ? void 0 : theme.config, mediaQueries[currentBreakPoint], width)
+  })
+  return breakpoints
+}
 //# sourceMappingURL=useMedia.js.map

[Gluant101]

Hey, our Devs will look into this. Thanks!

[ankit-tailor]

Hey @hamsterhomka, Thanks for reporting the issue. We'll look into it.

[hamsterhomka]

Any updates on fixing this?

[surajahmed]

@hamsterhomka We're internally using useWindowDimensions hook from react-native-web, which returns window viewport width. This causes the difference when scrollbar is rendered. We're going to use window.innerWidth instead of useWindowDimenstions. Thanks for reporting this. Hopefully we'll fix this in the coming release.