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>
   )