u

code/app/app-rn/app/(tabs)/index.tsx

@@ -1,34 +1,13 @@
-import { useEffect } from 'react'
-import { Appearance, Platform, StyleSheet, Text, View } from 'react-native'
-
-import { Button, ButtonIcon, ButtonSpinner, ButtonText } from '@/components/ui/button'
-import { useAppStore } from '@/store/app'
+import { View } from 'react-native'
+import { Button, ButtonText } from '@/components/ui/button'
+// import { useAppStore } from '@/store/app'
 
 export default function HomeScreen() {
-  const appStore = useAppStore()
-
-  function handleSwitchMode() {
-    if (appStore.themeScheme === 'dark') {
-      appStore.setThemeScheme('light')
-    }
-    else if (appStore.themeScheme === 'light') {
-      appStore.setThemeScheme('dark')
-    }
-  }
-
+  // const themeScheme = useAppStore(s => s.themeScheme)
+  // const setThemeScheme = useAppStore(s => s.setThemeScheme)
 
   return (
-    <View className="flex-1 items-center justify-center dark:bg-black">
-      <Button
-        action="primary"
-        size="sm"
-        isDisabled={false}
-        onPress={() => {
-          handleSwitchMode()
-        }}
-      >
-        <ButtonText>Hello World</ButtonText>
-      </Button>
+    <View className="flex-1 items-center justify-center gap-4 dark:bg-black">
     </View>
   )
 }

code/app/app-rn/app/_layout.tsx

@@ -2,31 +2,26 @@ import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native
 import { Stack } from 'expo-router'
 import { StatusBar } from 'expo-status-bar'
 import { useEffect } from 'react'
-import { Appearance } from 'react-native'
 import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider'
-import { useIsDark } from '@/hooks/use-color-scheme'
+import { useColorScheme } from '@/hooks/use-color-scheme'
 import 'react-native-reanimated'
 import '@/styles/global.css'
 
 export default function RootLayout() {
-  const isDark = useIsDark()
+  const colorScheme = useColorScheme()
 
   useEffect(() => {
-    const sub = Appearance.addChangeListener(({ colorScheme }) => {
-      console.log('system changed:', colorScheme)
-    })
-
-    return () => sub.remove()
-  }, [])
+    console.log(colorScheme)
+  }, [colorScheme])
 
   return (
-    <GluestackUIProvider mode={isDark ? 'dark' : 'light'}>
-      <ThemeProvider value={isDark ? DarkTheme : DefaultTheme}>
+    <GluestackUIProvider mode={colorScheme === 'dark' ? 'dark' : 'light'}>
+      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
         <Stack>
           <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
           <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
         </Stack>
-        <StatusBar style={isDark ? 'light' : 'dark'} />
+        <StatusBar style="auto" />
       </ThemeProvider>
     </GluestackUIProvider>
   )

code/app/app-rn/hooks/use-color-scheme.ts

@@ -1,16 +1 @@
-import { useEffect, useState } from 'react'
-import { Appearance, useColorScheme } from 'react-native'
-import { useAppStore } from '@/store/app'
-
-function useIsDark() {
-  const system = useColorScheme()
-  const themeScheme = useAppStore(s => s.themeScheme)
-
-  if (themeScheme === 'auto') {
-    return system === 'dark'
-  }
-
-  return themeScheme === 'dark'
-}
-
-export { useColorScheme, useIsDark }
+export { useColorScheme } from 'react-native';

code/app/app-rn/hooks/use-color-scheme.web.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { useColorScheme as useRNColorScheme } from 'react-native';
+
+/**
+ * To support static rendering, this value needs to be re-calculated on the client side for web
+ */
+export function useColorScheme() {
+  const [hasHydrated, setHasHydrated] = useState(false);
+
+  useEffect(() => {
+    setHasHydrated(true);
+  }, []);
+
+  const colorScheme = useRNColorScheme();
+
+  if (hasHydrated) {
+    return colorScheme;
+  }
+
+  return 'light';
+}

code/app/app-rn/store/app.ts

@@ -2,22 +2,20 @@ import AsyncStorage from '@react-native-async-storage/async-storage'
 import { create } from 'zustand'
 import { createJSONStorage, persist } from 'zustand/middleware'
 
-export type ThemeScheme = 'light' | 'dark' | 'auto'
-
 interface AppState {
   themeScheme: ThemeScheme
   setThemeScheme: (theme: ThemeScheme) => void
 }
 
-export const useAppStore = create<AppState>()(
-  persist(
-    set => ({
-      themeScheme: 'auto',
-      setThemeScheme: theme => set({ themeScheme: theme }),
-    }),
-    {
-      name: 'app-storage',
-      storage: createJSONStorage(() => AsyncStorage),
-    },
-  ),
-)
+// export const useAppStore = create<AppState>()(
+//   persist(
+//     set => ({
+//       themeScheme: 'system',
+//       setThemeScheme: theme => set({ themeScheme: theme }),
+//     }),
+//     {
+//       name: 'app-storage',
+//       storage: createJSONStorage(() => AsyncStorage),
+//     },
+//   ),
+// )

code/app/app-rn/types/global.d.ts

@@ -1,5 +1,5 @@
 export {}
 
 declare global {
-  type ThemeScheme = 'light' | 'dark' | 'auto'
+  type ThemeScheme = 'light' | 'dark' | 'system'
 }