@@ -7,6 +7,7 @@ import {Pressable, View} from "react-native";
7
7
import { ThemeToggle } from "@/components/ThemeToggle" ;
8
8
import { Button } from "@/components/ui/button" ;
9
9
import { useLiveQuery } from "drizzle-orm/expo-sqlite" ;
10
+ import { useTheme } from "next-themes" ;
10
11
11
12
import { Progress } from "@/components/ui/progress" ;
12
13
import { Text } from "@/components/ui/text" ;
@@ -44,11 +45,11 @@ export default function Screen() {
44
45
function ScreenContent ( ) {
45
46
const { db} = useDatabase ( ) ;
46
47
const { data : habits , error} = useLiveQuery ( db ?. select ( ) . from ( habitTable ) ) ;
47
-
48
+ const { theme, setTheme} = useTheme ( )
49
+ // console.log("theme", theme)
48
50
const ref = React . useRef ( null ) ;
49
51
useScrollToTop ( ref ) ;
50
52
51
- const router = useRouter ( ) ;
52
53
53
54
const renderItem = React . useCallback (
54
55
( { item} : { item : Habit } ) => < HabitCard { ...item } /> ,
@@ -63,17 +64,22 @@ function ScreenContent() {
63
64
) ;
64
65
}
65
66
return (
66
- < View className = "flex-1 gap-5 p-6 bg-secondary/30" >
67
+ < View className = "flex flex-col basis-full bg-background p-8" >
68
+
69
+ { /* <Button onPress={() => setTheme("light")}>
70
+ <Text>Light mode</Text>
71
+ </Button>
67
72
73
+ <Button onPress={() => setTheme('dark')}>
74
+ <Text>Dark mode</Text>
75
+ </Button> */ }
68
76
< Stack . Screen
69
77
options = { {
70
78
title : "Habits" ,
79
+ // headerTitleStyle: {
80
+ // color: "hsl(var(--foreground))"
81
+ // },
71
82
headerRight : ( ) => < ThemeToggle /> ,
72
- headerLeft : ( ) => (
73
- < Button variant = "link" onPress = { ( ) => router . navigate ( "settings" ) } >
74
- < SettingsIcon />
75
- </ Button >
76
- ) ,
77
83
} }
78
84
/>
79
85
< FlashList
@@ -94,14 +100,15 @@ function ScreenContent() {
94
100
</ Text >
95
101
</ Text >
96
102
</ View >
97
- ) }
103
+ )
104
+ }
98
105
ItemSeparatorComponent = { ( ) => < View className = "p-2" /> }
99
106
data = { habits }
100
107
renderItem = { renderItem }
101
108
keyExtractor = { ( _ , index ) => `item-${ index } ` }
102
- ListFooterComponent = { < View className = "py-4" /> }
109
+ ListFooterComponent = { < View className = "py-4" /> }
103
110
/>
104
- < View className = "absolute bottom-10 right-8" >
111
+ < View className = "absolute web: bottom-20 bottom- 10 right-8" >
105
112
< Link href = "/create" asChild >
106
113
< Pressable >
107
114
< View className = "bg-primary justify-center rounded-full h-[45px] w-[45px]" >
@@ -110,6 +117,6 @@ function ScreenContent() {
110
117
</ Pressable >
111
118
</ Link >
112
119
</ View >
113
- </ View >
120
+ </ View >
114
121
) ;
115
122
}
0 commit comments