Merge pull request #509 from gluestack/feat/use-media-hook

feat: use media hook

packages/react/src/hooks/index.ts

@@ -3,3 +3,4 @@ export { useMediaQuery };
 export { useBreakpointValue } from './useBreakpointValue';
 export { useToken } from './useToken';
 export { useColorMode } from './useColorMode';
+export { useMedia } from './useMedia';

packages/react/src/hooks/useMedia.ts

@@ -0,0 +1,26 @@
+import { useWindowDimensions } from 'react-native';
+import { isValidBreakpoint } from '../generateStylePropsFromCSSIds';
+import { useStyled } from '../StyledProvider';
+import type { GSConfig } from '../types';
+
+type BreakPointValue = Partial<{
+  [key in keyof GSConfig['tokens']['breakpoints']]: boolean;
+}>;
+
+export const useMedia = (): BreakPointValue => {
+  const theme = useStyled();
+  const { width } = useWindowDimensions();
+  const mediaQueries = theme?.config?.tokens?.mediaQueries;
+
+  const breakpoints: any = {};
+
+  Object.keys(mediaQueries).forEach((currentBreakPoint: any) => {
+    breakpoints[currentBreakPoint] = isValidBreakpoint(
+      theme?.config,
+      mediaQueries[currentBreakPoint],
+      width
+    );
+  });
+
+  return breakpoints;
+};