From 0d8fa122d29056ae7ecbe30b10b8193898a97ea7 Mon Sep 17 00:00:00 2001
From: Suraj <suraj@Surajs-MacBook-Pro.local>
Date: Mon, 18 Sep 2023 15:25:31 +0530
Subject: [PATCH 1/2] fix: updated useBreakpointValue

---
 .../DescendantsStyles/ContextBasedStyles.tsx  |  9 ++++-
 .../react/src/hooks/useBreakpointValue.ts     | 37 +++++++++++++++----
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
index 55d3d5ec2..7a30a2e2f 100644
--- a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
+++ b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
@@ -16,6 +16,7 @@ import {
 import {
   AsForwarder,
   createStyled,
+  styled,
   styled1,
   Theme,
   useBreakpointValue,
@@ -229,7 +230,13 @@ export function ContextBasedStylesContent() {
     setTabName(tabName);
   };
 
-  const value = useToken('colors', 'red500');
+  // const value = useToken('colors', 'red500');
+  const value = useBreakpointValue({
+    base: 'base',
+    sm: 'sm',
+    md: 'md',
+    // md: 'md',
+  });
 
   console.log(value, 'value here');
 
diff --git a/packages/react/src/hooks/useBreakpointValue.ts b/packages/react/src/hooks/useBreakpointValue.ts
index a70590ffb..823a7e276 100644
--- a/packages/react/src/hooks/useBreakpointValue.ts
+++ b/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;
 }

From a6ca7ffb947fe7c971cb061e2dac95aa23266c65 Mon Sep 17 00:00:00 2001
From: Suraj <suraj@Surajs-MacBook-Pro.local>
Date: Mon, 18 Sep 2023 15:55:07 +0530
Subject: [PATCH 2/2] fix: use color mode hook

---
 .../DescendantsStyles/ContextBasedStyles.tsx  | 29 ++++++++++++-------
 packages/react/src/hooks/useColorMode.ts      | 17 +++++++++--
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
index 7a30a2e2f..1786bf378 100644
--- a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
+++ b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
@@ -20,6 +20,7 @@ import {
   styled1,
   Theme,
   useBreakpointValue,
+  useColorMode,
   useStyled,
   useToken,
 } from '@gluestack-style/react';
@@ -185,8 +186,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> */}
@@ -231,15 +241,14 @@ export function ContextBasedStylesContent() {
   };
 
   // const value = useToken('colors', 'red500');
-  const value = useBreakpointValue({
-    base: 'base',
-    sm: 'sm',
-    md: 'md',
-    // md: 'md',
-  });
-
-  console.log(value, 'value here');
-
+  // 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 (
   //   <>
diff --git a/packages/react/src/hooks/useColorMode.ts b/packages/react/src/hooks/useColorMode.ts
index ffb745ec0..cf4c27edc 100644
--- a/packages/react/src/hooks/useColorMode.ts
+++ b/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;
 };