u

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

@@ -1,10 +1,32 @@
-import { Platform, StyleSheet, Text, View } from 'react-native'
+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'
 
 export default function HomeScreen() {
+  const appStore = useAppStore()
+
+  function handleSwitchMode() {
+    if (appStore.themeScheme === 'dark') {
+      appStore.setThemeScheme('light')
+    }
+    else if (appStore.themeScheme === 'light') {
+      appStore.setThemeScheme('dark')
+    }
+  }
+
+
   return (
     <View className="flex-1 items-center justify-center dark:bg-black">
-      <Button action="primary" size="sm" isDisabled={false}>
+      <Button
+        action="primary"
+        size="sm"
+        isDisabled={false}
+        onPress={() => {
+          handleSwitchMode()
+        }}
+      >
         <ButtonText>Hello World</ButtonText>
       </Button>
     </View>

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

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