Merge pull request #244 from gluestack/fix/color-mode-warning

Fix/color mode warning

example/storybook/src/api/MultipleProvder/MultipleProvider.stories.tsx

@@ -0,0 +1,10 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import { MultipleProvider } from './MultipleProvider';
+const MyMultipleProviderMeta: ComponentMeta<typeof MultipleProvider> = {
+  title: 'api/stories/MultipleProvider',
+  component: MultipleProvider,
+};
+
+export { MultipleProvider } from './MultipleProvider';
+//
+export default MyMultipleProviderMeta;

example/storybook/src/api/MultipleProvder/MultipleProvider.tsx

@@ -0,0 +1,49 @@
+import React, { memo } from 'react';
+import { View, Pressable, Text } from 'react-native';
+import { styled } from '@gluestack-style/react';
+import { Wrapper } from '../../components/Wrapper';
+import { get, set } from '@gluestack-style/react';
+
+const StyleView = memo(
+  styled(
+    View,
+    {
+      w: 100,
+      h: 100,
+      bg: '$red500',
+
+      _dark: {
+        bg: '$info600',
+      },
+    },
+    {}
+  )
+);
+
+export function MultipleProvider() {
+  const [currentColorMode, setCurrentColorMode] = React.useState(get());
+
+  return (
+    <Wrapper colorMode={currentColorMode}>
+      <Wrapper>
+        <Pressable
+          style={{
+            backgroundColor: 'gray',
+            padding: 12,
+            marginBottom: 12,
+          }}
+          onPress={() => {
+            // set(get() === 'dark' ? 'light' : 'dark');
+            setCurrentColorMode(currentColorMode === 'dark' ? 'light' : 'dark');
+          }}
+        >
+          <Text style={{ color: 'white' }}>
+            Toggle {currentColorMode === 'dark' ? 'light' : 'dark'}
+          </Text>
+        </Pressable>
+        <StyleView />
+      </Wrapper>
+    </Wrapper>
+  );
+}
+export default MultipleProvider;

packages/react/src/StyledProvider.tsx

@@ -7,25 +7,22 @@ import { platformSpecificSpaceUnits } from './utils';
 import { createGlobalStylesWeb } from './createGlobalStylesWeb';
 
 type Config = any;
+let colorModeSet = false;
 
 export const defaultConfig: { config: Config; colorMode: COLORMODES } = {
   config: {},
   colorMode: 'light',
 };
 
-// interface ConfigContextData {
-//   config: Config;
-//   setConfig: (config: Config) => void;
-// }
-
 const defaultContextData: Config = defaultConfig;
-
 const StyledContext = React.createContext<Config>(defaultContextData);
 
-// type IContext = {
-//   config: Config;
-//   colorMode?: COLORMODES;
-// };
+const setCurrentColorModeForWeb = (currentColorMode: string) => {
+  if (Platform.OS === 'web' && currentColorMode) {
+    set(currentColorMode === 'dark' ? 'dark' : 'light');
+    colorModeSet = true;
+  }
+};
 export const StyledProvider: React.FC<{
   config: Config;
   colorMode?: COLORMODES;
@@ -48,6 +45,12 @@ export const StyledProvider: React.FC<{
   }, [colorMode]);
 
   React.useEffect(() => {
+    // Add gs class name
+    if (Platform.OS === 'web') {
+      document.documentElement.classList.add(`gs`);
+    }
+    // setCurrentColorModeForWeb(currentColorMode);
+
     onChange((currentColor: string) => {
       // only for web
       if (Platform.OS === 'web') {
@@ -59,29 +62,17 @@ export const StyledProvider: React.FC<{
         document.documentElement.classList.add(`gs-${currentColor}`);
       }
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  React.useEffect(() => {
-    if (currentColorMode) {
-      set(currentColorMode === 'dark' ? 'dark' : 'light');
-    }
-
-    if (Platform.OS === 'web') {
-      document.documentElement.classList.add(`gs-${get()}`);
-    }
-  }, [currentColorMode]);
 
   React.useEffect(() => {
-    if (Platform.OS === 'web') {
-      document.documentElement.classList.add(`gs`);
-    }
-  }, []);
+    setCurrentColorModeForWeb(currentColorMode);
+  }, [currentColorMode]);
 
-  // Set colormode server side
-  // if (typeof window === 'undefined') {
-  if (Platform.OS === 'web' && currentColorMode) {
-    set(currentColorMode === 'dark' ? 'dark' : 'light');
+  // Set colormode for the first time
+  if (!colorModeSet) {
+    setCurrentColorModeForWeb(currentColorMode);
   }
-  // }
 
   let contextValue;
   if (Platform.OS === 'web') {