v1.0.20

example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx

@@ -13,7 +13,7 @@ import { cssInterop } from 'nativewind';
 import {
   useBreakpointValue,
   getBreakPointValue,
-} from '@gluestack-ui/nativewind-utils/useMediaQuery';
+} from '@gluestack-ui/nativewind-utils/useBreakpointValue';
 const { width } = Dimensions.get('window');
 
 const GridContext = createContext<any>({});

packages/nativewind/utils/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @gluestack-ui/nativewind-utils
+
+## 1.0.20
+
+### Patch Changes
+
+- - useBreakPointValue hook

packages/nativewind/utils/package.json

@@ -17,7 +17,7 @@
   "main": "index.js",
   "module": "index.js",
   "types": "index.d.ts",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "react-native": "src/index",
   "source": "src/index",
   "scripts": {
@@ -73,7 +73,8 @@
     "cssInterop",
     "flush",
     "scripts",
-    "IsWeb"
+    "IsWeb",
+    "useBreakpointValue"
   ],
   "jest": {
     "preset": "jest-expo",

packages/nativewind/utils/tsconfig.json

@@ -12,7 +12,8 @@
     "withStyleContextAndStates",
     "cssInterop",
     "flush",
-    "IsWeb"
+    "IsWeb",
+    "useBreakpointValue"
   ],
   "exclude": ["node_modules", "example"],
   "path": {},

packages/nativewind/utils/useBreakpointValue/index.d.ts

@@ -0,0 +1,8 @@
+type BreakPointValue = Partial<{}>;
+export declare const getBreakPointValue: (values: any, width: any) => any;
+export declare function useBreakpointValue(values: BreakPointValue): null;
+export declare function isValidBreakpoint(
+  breakPointWidth: any,
+  width?: any
+): boolean;
+export {};

packages/nativewind/utils/useBreakpointValue/index.js

@@ -0,0 +1,69 @@
+import { Dimensions, useWindowDimensions } from 'react-native';
+import { useEffect, useState } from 'react';
+import DefaultTheme from 'tailwindcss/defaultConfig';
+import resolveConfig from 'tailwindcss/resolveConfig';
+const TailwindTheme = resolveConfig(DefaultTheme);
+const screenSize = TailwindTheme.theme.screens;
+const resolveScreenWidth = {
+  default: 0,
+};
+Object.entries(screenSize).forEach(([key, value]) => {
+  resolveScreenWidth[key] = parseInt(value.replace('px', ''));
+});
+export const getBreakPointValue = (values, width) => {
+  if (typeof values !== 'object') return values;
+  let finalBreakPointResolvedValue;
+  const mediaQueriesBreakpoints = [];
+  Object.keys(resolveScreenWidth).forEach((key) => {
+    const isValid = isValidBreakpoint(resolveScreenWidth[key], width);
+    mediaQueriesBreakpoints.push({
+      key: key,
+      breakpoint: resolveScreenWidth[key],
+      isValid: isValid,
+    });
+  });
+  mediaQueriesBreakpoints.sort((a, b) => a.breakpoint - b.breakpoint);
+  mediaQueriesBreakpoints.forEach((breakpoint, index) => {
+    breakpoint.value = values.hasOwnProperty(breakpoint.key)
+      ? // @ts-ignore
+        values[breakpoint.key]
+      : mediaQueriesBreakpoints[index - 1].value;
+  });
+  const lastValidObject = getLastValidObject(mediaQueriesBreakpoints);
+  if (!lastValidObject) {
+    finalBreakPointResolvedValue = values;
+  } else {
+    finalBreakPointResolvedValue = lastValidObject.value;
+  }
+  return finalBreakPointResolvedValue;
+};
+export function useBreakpointValue(values) {
+  const { width } = useWindowDimensions();
+  const [currentBreakPointValue, setCurrentBreakPointValue] = useState(null);
+  useEffect(() => {
+    if (typeof values === 'object') {
+      const finalBreakPointResolvedValue = getBreakPointValue(values, width);
+      setCurrentBreakPointValue(finalBreakPointResolvedValue);
+    }
+  }, [values, width]);
+  if (typeof values !== 'object') return values;
+  return currentBreakPointValue;
+}
+export function isValidBreakpoint(
+  breakPointWidth,
+  width = Dimensions.get('window')?.width
+) {
+  const windowWidth = width;
+  if (windowWidth >= breakPointWidth) {
+    return true;
+  }
+  return false;
+}
+function getLastValidObject(mediaQueries) {
+  for (let i = mediaQueries.length - 1; i >= 0; i--) {
+    if (mediaQueries[i].isValid) {
+      return mediaQueries[i];
+    }
+  }
+  return null; // No valid object found
+}