Feat/added hooks

example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx

@@ -19,6 +19,7 @@ import {
   styled,
   Theme,
   useBreakpointValue,
+  useColorMode,
   useStyled,
   useToken,
 } from '@gluestack-style/react';
@@ -194,8 +195,17 @@ const Text1 = styled(
   { ancestorStyle: ['_text'], componentName: 'TEXT' }
 );
 export function ContextBasedStyles() {
+  const [state, setState] = useState(false);
+
   return (
-    <Wrapper colorMode="dark">
+    <Wrapper colorMode={state ? 'dark' : 'light'}>
+      <Pressable
+        onPress={() => {
+          setState(!state);
+        }}
+      >
+        <Text>color mode: {state ? 'dark' : 'light'}</Text>
+      </Pressable>
       <MyIcon as={Sun} size={32}></MyIcon>
       <ContextBasedStylesContent></ContextBasedStylesContent>
       {/* <Pressable></Pressable> */}
@@ -239,10 +249,15 @@ export function ContextBasedStylesContent() {
     setTabName(tabName);
   };
 
-  const value = useToken('colors', 'red500');
-
-  console.log(value, 'value here');
-
+  // const value = useToken('colors', 'red500');
+  // const value = useBreakpointValue({
+  //   base: 'base',
+  //   sm: 'sm',
+  //   md: 'md',
+  //   // md: 'md',
+  // });
+  const colorMode = useColorMode();
+  console.log(colorMode, 'color mode');
   // const color = tabName ? '$red500' : '$green500';
   // return (
   //   <>

packages/react/src/hooks/useBreakpointValue.ts

@@ -9,23 +9,46 @@ type BreakPointValue = Partial<{
   [key in keyof ICustomConfig['tokens']['breakpoints']]: any;
 }>;
 
+function getLastValidObject(mediaQueries: any) {
+  for (let i = mediaQueries.length - 1; i >= 0; i--) {
+    if (mediaQueries[i].isValid) {
+      return mediaQueries[i];
+    }
+  }
+  return null; // No valid object found
+}
+
 export function useBreakpointValue(values: BreakPointValue) {
   let { width } = useWindowDimensions();
   const theme = useStyled();
   const mediaQueries = theme?.config?.tokens?.mediaQueries;
 
-  let validBreakpoints: any = [];
+  let mediaQueriesBreakpoints: any = [];
+
   Object.keys(mediaQueries).forEach((key: any) => {
     const currentBreakpoint: any = extractWidthValues(mediaQueries[key]);
     const isValid = isValidBreakpoint(theme.config, mediaQueries[key], width);
-    if (isValid) {
-      validBreakpoints.push({ key: key, value: currentBreakpoint[0] });
-    }
+    mediaQueriesBreakpoints.push({
+      key: key,
+      breakpoint: currentBreakpoint[0],
+      query: mediaQueries[key],
+      isValid: isValid,
+    });
   });
 
-  if (validBreakpoints.length === 0) {
+  mediaQueriesBreakpoints.sort((a: any, b: any) => a.breakpoint - b.breakpoint);
+
+  mediaQueriesBreakpoints.forEach((breakpoint: any, index: any) => {
+    breakpoint.value = values[breakpoint.key]
+      ? values[breakpoint.key]
+      : mediaQueriesBreakpoints[index - 1].value;
+  });
+
+  const lastValidObject = getLastValidObject(mediaQueriesBreakpoints);
+
+  if (!lastValidObject) {
     return values;
   }
-  validBreakpoints.sort((a: any, b: any) => a.value - b.value);
-  return values[validBreakpoints[validBreakpoints.length - 1].key];
+
+  return lastValidObject.value;
 }

packages/react/src/hooks/useColorMode.ts

@@ -1,9 +1,22 @@
-import { get } from '../core/colorMode';
+import { get, onChange } from '../core/colorMode';
+import { useState, useEffect } from 'react';
 
 /**
  *
  * @returns Current color mode value (light or dark)
  */
 export const useColorMode = () => {
-  return get();
+  const [currentColorMode, setCurrentColorMode] = useState(get());
+  useEffect(() => {
+    onChange((colorMode: any) => {
+      setCurrentColorMode(colorMode);
+    });
+    // remove onchage listener on unmount
+    () =>
+      onChange((colorMode: any) => {
+        setCurrentColorMode(colorMode);
+      });
+  }, []);
+
+  return currentColorMode;
 };