[V0_FILE]json:file="package.json" isQuickEdit="true" isMerged="true" isEdit="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-alert-dialog": "^1.1.4", "@radix-ui/react-aspect-ratio": "^1.1.1", "@radix-ui/react-avatar": "^1.1.2", "@radix-ui/react-checkbox": "^1.1.3", "@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-context-menu": "^2.2.4", "@radix-ui/react-dialog": "^1.1.4", "@radix-ui/react-dropdown-menu": "^2.1.4", "@radix-ui/react-hover-card": "^1.1.4", "@radix-ui/react-label": "^2.1.1", "@radix-ui/react-menubar": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.2.3", "@radix-ui/react-popover": "^1.1.4", "@radix-ui/react-progress": "^1.1.1", "@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-scroll-area": "^1.2.2", "@radix-ui/react-select": "^2.1.4", "@radix-ui/react-separator": "^1.1.1", "@radix-ui/react-slider": "^1.2.2", "@radix-ui/react-slot": "^1.1.1", "@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-tabs": "^1.1.2", "@radix-ui/react-toast": "^1.2.4", "@radix-ui/react-toggle": "^1.1.1", "@radix-ui/react-toggle-group": "^1.1.1", "@radix-ui/react-tooltip": "^1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "^2.30.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.16", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "8.10.1", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1", "react-native-reanimated": "~3.6.0", "react-native-svg": "14.1.0", "react-native-gesture-handler": "~2.14.0", "lottie-react-native": "6.4.1", "expo-notifications": "~0.27.6", "expo-haptics": "~12.8.1", "react-native-chart-kit": "^6.12.0", "@gorhom/bottom-sheet": "^4.5.1", "react-native-circular-progress": "^1.3.9", "react-native-calendars": "^1.1303.0", "zustand": "^4.4.7" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/_layout.tsx" isMerged="true" isEdit="true" "use client" import { useEffect } from "react" import { Slot } from "expo-router" import { StatusBar } from "expo-status-bar" import { SafeAreaProvider } from "react-native-safe-area-context" import { GestureHandlerRootView } from "react-native-gesture-handler" import * as Notifications from "expo-notifications" import { ThemeProvider } from "../context/ThemeContext" import { HabitProvider } from "../context/HabitContext" import { PetProvider } from "../context/PetContext" import { useFonts } from "expo-font" import { SplashScreen } from "expo-router" // Configure notifications Notifications.setNotificationHandler({ handleNotification: async () => ({ shouldShowAlert: true, shouldPlaySound: true, shouldSetBadge: true, }), }) export default function RootLayout() { const [fontsLoaded] = useFonts({ "Poppins-Regular": require("expo-font/build/FontLoader").loadAsync({ "Poppins-Regular": "https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrFJA.ttf", }), "Poppins-Medium": require("expo-font/build/FontLoader").loadAsync({ "Poppins-Medium": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9V1s.ttf", }), "Poppins-Bold": require("expo-font/build/FontLoader").loadAsync({ "Poppins-Bold": "https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7V1s.ttf", }), }) useEffect(() => { // Request notification permissions Notifications.requestPermissionsAsync() }, []) if (!fontsLoaded) { return } return ( ) } [V0_FILE]typescriptreact:file="context/ThemeContext.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { createContext, useContext, useState } from "react" // Define the theme colors const lightTheme = { background: "#f5f5f7", card: "#ffffff", text: "#1a1a1a", border: "#e0e0e0", shadow: "rgba(0, 0, 0, 0.1)", water: ["#4facfe", "#00f2fe"], exercise: ["#ff8177", "#ff867a"], food: ["#56ab2f", "#a8e063"], accent: "#6c5ce7", success: "#00b894", warning: "#fdcb6e", error: "#d63031", } const darkTheme = { background: "#121212", card: "#1e1e1e", text: "#f5f5f7", border: "#2a2a2a", shadow: "rgba(0, 0, 0, 0.3)", water: ["#4facfe", "#00f2fe"], exercise: ["#ff8177", "#ff867a"], food: ["#56ab2f", "#a8e063"], accent: "#6c5ce7", success: "#00b894", warning: "#fdcb6e", error: "#d63031", } type Theme = typeof lightTheme interface ThemeContextType { theme: Theme isDark: boolean toggleTheme: () => void } const ThemeContext = createContext(undefined) export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [isDark, setIsDark] = useState(false) const theme = isDark ? darkTheme : lightTheme const toggleTheme = () => { setIsDark(!isDark) } return {children} } export const useTheme = () => { const context = useContext(ThemeContext) if (context === undefined) { throw new Error("useTheme must be used within a ThemeProvider") } return context } [V0_FILE]typescriptreact:file="context/HabitContext.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" import AsyncStorage from "@react-native-async-storage/async-storage" import { format } from "date-fns" export type HabitType = "water" | "exercise" | "food" export interface HabitLog { id: string type: HabitType value: number date: string timestamp: number } export interface HabitGoal { water: number // in ml exercise: number // in minutes food: number // in portions } export interface HabitStreak { water: number exercise: number food: number } interface HabitContextType { logs: HabitLog[] goals: HabitGoal streaks: HabitStreak addLog: (type: HabitType, value: number) => void updateGoal: (type: HabitType, value: number) => void getTodayProgress: (type: HabitType) => number getWeeklyProgress: (type: HabitType) => number[] } const defaultGoals: HabitGoal = { water: 2000, // 2000ml (2L) exercise: 30, // 30 minutes food: 5, // 5 healthy portions } const defaultStreaks: HabitStreak = { water: 0, exercise: 0, food: 0, } const HabitContext = createContext(undefined) export const HabitProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [logs, setLogs] = useState([]) const [goals, setGoals] = useState(defaultGoals) const [streaks, setStreaks] = useState(defaultStreaks) // Load data from storage on mount useEffect(() => { const loadData = async () => { try { const storedLogs = await AsyncStorage.getItem("habitLogs") const storedGoals = await AsyncStorage.getItem("habitGoals") const storedStreaks = await AsyncStorage.getItem("habitStreaks") if (storedLogs) setLogs(JSON.parse(storedLogs)) if (storedGoals) setGoals(JSON.parse(storedGoals)) if (storedStreaks) setStreaks(JSON.parse(storedStreaks)) } catch (error) { console.error("Error loading habit data:", error) } } loadData() }, []) // Save data to storage whenever it changes useEffect(() => { const saveData = async () => { try { await AsyncStorage.setItem("habitLogs", JSON.stringify(logs)) await AsyncStorage.setItem("habitGoals", JSON.stringify(goals)) await AsyncStorage.setItem("habitStreaks", JSON.stringify(streaks)) } catch (error) { console.error("Error saving habit data:", error) } } saveData() }, [logs, goals, streaks]) // Update streaks whenever logs change useEffect(() => { updateStreaks() }, [logs]) const updateStreaks = () => { const today = format(new Date(), "yyyy-MM-dd") const yesterday = format(new Date(Date.now() - 86400000), "yyyy-MM-dd") const todayLogs = logs.filter((log) => log.date === today) const yesterdayLogs = logs.filter((log) => log.date === yesterday) const newStreaks = { ...streaks } // Check each habit type ;(["water", "exercise", "food"] as HabitType[]).forEach((type) => { const todayTotal = todayLogs.filter((log) => log.type === type).reduce((sum, log) => sum + log.value, 0) const yesterdayTotal = yesterdayLogs.filter((log) => log.type === type).reduce((sum, log) => sum + log.value, 0) // If today's goal is met, increment streak if (todayTotal >= goals[type]) { newStreaks[type]++ } // If yesterday's goal wasn't met, reset streak else if (yesterdayTotal < goals[type]) { newStreaks[type] = 0 } }) setStreaks(newStreaks) } const addLog = (type: HabitType, value: number) => { const newLog: HabitLog = { id: Date.now().toString(), type, value, date: format(new Date(), "yyyy-MM-dd"), timestamp: Date.now(), } setLogs((prevLogs) => [...prevLogs, newLog]) } const updateGoal = (type: HabitType, value: number) => { setGoals((prevGoals) => ({ ...prevGoals, [type]: value, })) } const getTodayProgress = (type: HabitType): number => { const today = format(new Date(), "yyyy-MM-dd") return logs.filter((log) => log.type === type && log.date === today).reduce((sum, log) => sum + log.value, 0) } const getWeeklyProgress = (type: HabitType): number[] => { const result: number[] = [0, 0, 0, 0, 0, 0, 0] // 7 days const today = new Date() for (let i = 0; i < 7; i++) { const date = new Date(today) date.setDate(date.getDate() - i) const dateStr = format(date, "yyyy-MM-dd") const dayTotal = logs .filter((log) => log.type === type && log.date === dateStr) .reduce((sum, log) => sum + log.value, 0) result[6 - i] = dayTotal } return result } return ( {children} ) } export const useHabit = () => { const context = useContext(HabitContext) if (context === undefined) { throw new Error("useHabit must be used within a HabitProvider") } return context } [V0_FILE]typescriptreact:file="context/PetContext.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { createContext, useContext, useState, useEffect } from "react" import AsyncStorage from "@react-native-async-storage/async-storage" import { useHabit } from "./HabitContext" export type PetMood = "happy" | "thirsty" | "lazy" | "hungry" | "sick" | "dead" interface PetState { name: string mood: PetMood level: number experience: number lastInteraction: number } interface PetContextType { pet: PetState setPetName: (name: string) => void interact: () => void getPetMoodMessage: () => string } const initialPetState: PetState = { name: "Buddy", mood: "happy", level: 1, experience: 0, lastInteraction: Date.now(), } const PetContext = createContext(undefined) export const PetProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [pet, setPet] = useState(initialPetState) const { streaks, goals, getTodayProgress } = useHabit() // Load pet data from storage on mount useEffect(() => { const loadPet = async () => { try { const storedPet = await AsyncStorage.getItem("pet") if (storedPet) setPet(JSON.parse(storedPet)) } catch (error) { console.error("Error loading pet data:", error) } } loadPet() }, []) // Save pet data to storage whenever it changes useEffect(() => { const savePet = async () => { try { await AsyncStorage.setItem("pet", JSON.stringify(pet)) } catch (error) { console.error("Error saving pet data:", error) } } savePet() }, [pet]) // Update pet mood based on habit streaks useEffect(() => { updatePetMood() }, [streaks]) const updatePetMood = () => { const waterProgress = getTodayProgress("water") / goals.water const exerciseProgress = getTodayProgress("exercise") / goals.exercise const foodProgress = getTodayProgress("food") / goals.food let newMood: PetMood = "happy" // All streaks at zero if (streaks.water === 0 && streaks.exercise === 0 && streaks.food === 0) { newMood = "dead" } // Multiple low streaks else if ( (streaks.water === 0 && streaks.exercise === 0) || (streaks.water === 0 && streaks.food === 0) || (streaks.exercise === 0 && streaks.food === 0) ) { newMood = "sick" } // Individual low streaks else if (streaks.water === 0 || waterProgress < 0.5) { newMood = "thirsty" } else if (streaks.exercise === 0 || exerciseProgress < 0.5) { newMood = "lazy" } else if (streaks.food === 0 || foodProgress < 0.5) { newMood = "hungry" } setPet((prev) => ({ ...prev, mood: newMood, })) } const setPetName = (name: string) => { setPet((prev) => ({ ...prev, name, })) } const interact = () => { // Add experience when interacting with pet const newExperience = pet.experience + 10 const experienceNeeded = pet.level * 100 let newLevel = pet.level if (newExperience >= experienceNeeded) { newLevel += 1 } setPet((prev) => ({ ...prev, experience: newExperience % experienceNeeded, level: newLevel, lastInteraction: Date.now(), })) } const getPetMoodMessage = (): string => { switch (pet.mood) { case "happy": return `${pet.name} is happy and healthy!` case "thirsty": return `${pet.name} is thirsty. Try drinking more water!` case "lazy": return `${pet.name} is feeling lazy. Time for some exercise!` case "hungry": return `${pet.name} is hungry. Eat some healthy food!` case "sick": return `${pet.name} is sick. Take care of your habits!` case "dead": return `${pet.name} is not doing well. Restart your habits!` default: return `${pet.name} is waiting for you!` } } return ( {children} ) } export const usePet = () => { const context = useContext(PetContext) if (context === undefined) { throw new Error("usePet must be used within a PetProvider") } return context } [V0_FILE]typescriptreact:file="components/HabitCard.tsx" isMerged="true" isEdit="true" import type React from "react" import { View, Text, StyleSheet, TouchableOpacity } from "react-native" import { LinearGradient } from "expo-linear-gradient" import { AnimatedCircularProgress } from "react-native-circular-progress" import { Feather } from "@expo/vector-icons" import { useTheme } from "../context/ThemeContext" import { type HabitType, useHabit } from "../context/HabitContext" interface HabitCardProps { type: HabitType title: string icon: React.ComponentProps["name"] onPress: () => void } export const HabitCard: React.FC = ({ type, title, icon, onPress }) => { const { theme } = useTheme() const { getTodayProgress, goals, streaks } = useHabit() const progress = getTodayProgress(type) const goal = goals[type] const percentage = Math.min(Math.round((progress / goal) * 100), 100) const streak = streaks[type] const getGradientColors = () => { switch (type) { case "water": return theme.water case "exercise": return theme.exercise case "food": return theme.food default: return [theme.accent, theme.accent] } } const getUnit = () => { switch (type) { case "water": return "ml" case "exercise": return "min" case "food": return "portions" default: return "" } } return ( {title} {() => {percentage}%} {progress} / {goal} {getUnit()} {streak} day streak ) } const styles = StyleSheet.create({ card: { borderRadius: 16, marginVertical: 8, padding: 16, shadowColor: "#000", shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.1, shadowRadius: 8, elevation: 5, }, content: { flex: 1, }, titleRow: { flexDirection: "row", alignItems: "center", marginBottom: 16, }, title: { fontSize: 18, fontWeight: "bold", color: "white", marginLeft: 8, }, progressRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", }, percentageText: { fontSize: 16, fontWeight: "bold", color: "white", }, statsContainer: { flex: 1, marginLeft: 16, }, progressText: { fontSize: 16, color: "white", marginBottom: 4, }, streakContainer: { flexDirection: "row", alignItems: "center", }, streakText: { fontSize: 14, color: "white", marginLeft: 4, }, }) [V0_FILE]typescriptreact:file="components/PetAvatar.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useEffect, useRef } from "react" import { View, Text, StyleSheet, Animated, TouchableOpacity } from "react-native" import { usePet, type PetMood } from "../context/PetContext" import { useTheme } from "../context/ThemeContext" // Using emojis to represent different pet moods const getPetEmoji = (mood: PetMood) => { switch (mood) { case "happy": return "😊" case "thirsty": return "🥵" case "lazy": return "😴" case "hungry": return "🍽️" case "sick": return "🤒" case "dead": return "💀" default: return "😊" } } interface PetAvatarProps { size?: "small" | "medium" | "large" showInfo?: boolean onPress?: () => void } export const PetAvatar: React.FC = ({ size = "medium", showInfo = true, onPress }) => { const { pet, getPetMoodMessage, interact } = usePet() const { theme } = useTheme() const bounceAnim = useRef(new Animated.Value(0)).current useEffect(() => { // Create a bounce effect Animated.sequence([ Animated.timing(bounceAnim, { toValue: 1, duration: 300, useNativeDriver: true, }), Animated.timing(bounceAnim, { toValue: 0, duration: 300, useNativeDriver: true, }), ]).start() }, [pet.mood]) const getSize = () => { switch (size) { case "small": return 80 case "medium": return 120 case "large": return 200 default: return 120 } } const getFontSize = () => { switch (size) { case "small": return 40 case "medium": return 60 case "large": return 100 default: return 60 } } const handlePress = () => { interact() if (onPress) onPress() } const scale = bounceAnim.interpolate({ inputRange: [0, 0.5, 1], outputRange: [1, 1.2, 1], }) return ( {getPetEmoji(pet.mood)} {showInfo && ( {pet.name} Level {pet.level} {getPetMoodMessage()} )} ) } const styles = StyleSheet.create({ container: { alignItems: "center", }, avatarContainer: { borderRadius: 999, overflow: "hidden", justifyContent: "center", alignItems: "center", }, emojiText: { textAlign: "center", }, infoContainer: { alignItems: "center", marginTop: 8, }, petName: { fontSize: 18, fontWeight: "bold", }, petLevel: { fontSize: 14, marginBottom: 4, }, petMood: { fontSize: 14, textAlign: "center", }, }) [V0_FILE]typescriptreact:file="components/BottomTabBar.tsx" isMerged="true" isEdit="true" "use client" import type React from "react" import { View, TouchableOpacity, StyleSheet, Text } from "react-native" import { Feather } from "@expo/vector-icons" import { useRouter, usePathname } from "expo-router" import { useTheme } from "../context/ThemeContext" import * as Haptics from "expo-haptics" interface TabBarItem { name: string icon: React.ComponentProps["name"] path: string } const tabs: TabBarItem[] = [ { name: "Home", icon: "home", path: "/" }, { name: "Add", icon: "plus-circle", path: "/add-habit" }, { name: "Profile", icon: "user", path: "/profile" }, ] export const BottomTabBar: React.FC = () => { const router = useRouter() const pathname = usePathname() const { theme } = useTheme() const handlePress = (path: string) => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light) router.push(path) } return ( {tabs.map((tab) => { const isActive = pathname === tab.path return ( handlePress(tab.path)} activeOpacity={0.7}> {tab.name} ) })} ) } const styles = StyleSheet.create({ container: { flexDirection: "row", height: 60, borderTopWidth: 1, borderTopColor: "rgba(0, 0, 0, 0.1)", }, tab: { flex: 1, justifyContent: "center", alignItems: "center", }, tabContent: { alignItems: "center", }, tabLabel: { fontSize: 12, marginTop: 4, }, }) [V0_FILE]typescriptreact:file="app/index.tsx" isMerged="true" isEdit="true" "use client" import { View, ScrollView, StyleSheet, Text } from "react-native" import { SafeAreaView } from "react-native-safe-area-context" import { useRouter } from "expo-router" import { StatusBar } from "expo-status-bar" import { useTheme } from "../context/ThemeContext" import { PetAvatar } from "../components/PetAvatar" import { HabitCard } from "../components/HabitCard" import { BottomTabBar } from "../components/BottomTabBar" export default function Home() { const { theme } = useTheme() const router = useRouter() return ( HealthyHabits Today's Habits router.push("/water")} /> router.push("/exercise")} /> router.push("/food")} /> ) } const styles = StyleSheet.create({ container: { flex: 1, }, scrollView: { flex: 1, }, content: { padding: 16, paddingBottom: 80, }, header: { marginBottom: 16, alignItems: "center", }, title: { fontSize: 24, fontWeight: "bold", }, sectionTitle: { fontSize: 20, fontWeight: "bold", marginVertical: 16, }, }) [V0_FILE]typescriptreact:file="app/water.tsx" isMerged="true" isEdit="true" "use client" import { useState } from "react" import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native" import { SafeAreaView } from "react-native-safe-area-context" import { useRouter } from "expo-router" import { Feather } from "@expo/vector-icons" import { LinearGradient } from "expo-linear-gradient" import { AnimatedCircularProgress } from "react-native-circular-progress" import { useTheme } from "../context/ThemeContext" import { useHabit } from "../context/HabitContext" import { BottomTabBar } from "../components/BottomTabBar" import { PetAvatar } from "../components/PetAvatar" import { BarChart } from "react-native-chart-kit" const WATER_AMOUNTS = [ { label: "Small", value: 250, icon: "droplet" }, { label: "Medium", value: 500, icon: "droplet" }, { label: "Large", value: 750, icon: "droplet" }, ] export default function WaterScreen() { const { theme } = useTheme() const { getTodayProgress, getWeeklyProgress, goals, addLog, streaks } = useHabit() const router = useRouter() const [customAmount, setCustomAmount] = useState("") const waterProgress = getTodayProgress("water") const waterGoal = goals.water const percentage = Math.min(Math.round((waterProgress / waterGoal) * 100), 100) const weeklyData = getWeeklyProgress("water") const handleAddWater = (amount: number) => { addLog("water", amount) } const chartConfig = { backgroundGradientFrom: theme.card, backgroundGradientTo: theme.card, color: () => theme.water[0], strokeWidth: 2, barPercentage: 0.5, useShadowColorFromDataset: false, } const chartData = { labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { data: weeklyData, }, ], } return ( router.back()} style={styles.backButton}> Water Tracking {() => ( {waterProgress} ml )} Daily Goal: {waterGoal} ml Current Streak: {streaks.water} days {percentage}% Complete Add Water {WATER_AMOUNTS.map((item) => ( handleAddWater(item.value)} > {item.label} {item.value} ml ))} Weekly Progress Hydration Tips Drink a glass of water when you wake up to rehydrate after sleep. Set reminders to drink water throughout the day. Carry a reusable water bottle with you to make hydration convenient. ) } const styles = StyleSheet.create({ container: { flex: 1, }, header: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16, paddingVertical: 12, }, backButton: { padding: 8, }, title: { fontSize: 20, fontWeight: "bold", }, placeholder: { width: 40, }, scrollView: { flex: 1, }, content: { padding: 16, paddingBottom: 80, }, petContainer: { alignItems: "center", marginBottom: 16, }, progressCard: { borderRadius: 16, padding: 20, marginBottom: 24, }, progressContainer: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", }, progressTextContainer: { alignItems: "center", }, progressValue: { fontSize: 24, fontWeight: "bold", color: "white", }, progressUnit: { fontSize: 16, color: "white", }, goalContainer: { flex: 1, marginLeft: 20, }, goalText: { fontSize: 16, color: "white", marginBottom: 4, }, streakText: { fontSize: 16, color: "white", marginBottom: 4, }, percentageText: { fontSize: 16, fontWeight: "bold", color: "white", }, sectionTitle: { fontSize: 18, fontWeight: "bold", marginVertical: 16, }, amountButtonsContainer: { flexDirection: "row", justifyContent: "space-between", marginBottom: 16, }, amountButton: { width: "30%", borderRadius: 12, padding: 16, alignItems: "center", shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2, }, amountLabel: { fontSize: 16, fontWeight: "bold", marginTop: 8, }, amountValue: { fontSize: 14, marginTop: 4, }, chartContainer: { borderRadius: 16, padding: 16, alignItems: "center", marginBottom: 16, }, chart: { borderRadius: 16, marginVertical: 8, }, tipsContainer: { borderRadius: 16, padding: 16, marginBottom: 16, }, tipItem: { flexDirection: "row", marginBottom: 12, }, tipIcon: { marginRight: 12, marginTop: 2, }, tipText: { flex: 1, fontSize: 14, lineHeight: 20, }, }) [V0_FILE]typescriptreact:file="app/exercise.tsx" isMerged="true" isEdit="true" "use client" import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native" import { SafeAreaView } from "react-native-safe-area-context" import { useRouter } from "expo-router" import { Feather } from "@expo/vector-icons" import { LinearGradient } from "expo-linear-gradient" import { AnimatedCircularProgress } from "react-native-circular-progress" import { useTheme } from "../context/ThemeContext" import { useHabit } from "../context/HabitContext" import { BottomTabBar } from "../components/BottomTabBar" import { PetAvatar } from "../components/PetAvatar" import { LineChart } from "react-native-chart-kit" const EXERCISE_TYPES = [ { label: "Walking", value: 10, icon: "navigation", calories: 40 }, { label: "Running", value: 10, icon: "zap", calories: 100 }, { label: "Cycling", value: 10, icon: "activity", calories: 70 }, { label: "Swimming", value: 10, icon: "droplet", calories: 90 }, { label: "Yoga", value: 10, icon: "sun", calories: 50 }, { label: "Strength", value: 10, icon: "trending-up", calories: 80 }, ] export default function ExerciseScreen() { const { theme } = useTheme() const { getTodayProgress, getWeeklyProgress, goals, addLog, streaks } = useHabit() const router = useRouter() const exerciseProgress = getTodayProgress("exercise") const exerciseGoal = goals.exercise const percentage = Math.min(Math.round((exerciseProgress / exerciseGoal) * 100), 100) const weeklyData = getWeeklyProgress("exercise") const handleAddExercise = (minutes: number) => { addLog("exercise", minutes) } const chartConfig = { backgroundGradientFrom: theme.card, backgroundGradientTo: theme.card, color: () => theme.exercise[0], strokeWidth: 2, barPercentage: 0.5, useShadowColorFromDataset: false, } const chartData = { labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { data: weeklyData, color: () => theme.exercise[0], strokeWidth: 2, }, ], legend: ["Exercise Minutes"], } return ( router.back()} style={styles.backButton}> Exercise Tracking {() => ( {exerciseProgress} min )} Daily Goal: {exerciseGoal} min Current Streak: {streaks.exercise} days {percentage}% Complete Add Exercise {EXERCISE_TYPES.map((item) => ( handleAddExercise(item.value)} > {item.label} {item.value} min ({item.calories} cal) ))} Weekly Progress Exercise Tips Start with short sessions and gradually increase duration. Mix cardio and strength training for optimal health benefits. Remember to warm up before and cool down after exercise. ) } const styles = StyleSheet.create({ container: { flex: 1, }, header: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16, paddingVertical: 12, }, backButton: { padding: 8, }, title: { fontSize: 20, fontWeight: "bold", }, placeholder: { width: 40, }, scrollView: { flex: 1, }, content: { padding: 16, paddingBottom: 80, }, petContainer: { alignItems: "center", marginBottom: 16, }, progressCard: { borderRadius: 16, padding: 20, marginBottom: 24, }, progressContainer: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", }, progressTextContainer: { alignItems: "center", }, progressValue: { fontSize: 24, fontWeight: "bold", color: "white", }, progressUnit: { fontSize: 16, color: "white", }, goalContainer: { flex: 1, marginLeft: 20, }, goalText: { fontSize: 16, color: "white", marginBottom: 4, }, streakText: { fontSize: 16, color: "white", marginBottom: 4, }, percentageText: { fontSize: 16, fontWeight: "bold", color: "white", }, sectionTitle: { fontSize: 18, fontWeight: "bold", marginVertical: 16, }, exerciseGrid: { flexDirection: "row", flexWrap: "wrap", justifyContent: "space-between", marginBottom: 16, }, exerciseButton: { width: "48%", borderRadius: 12, padding: 16, alignItems: "center", marginBottom: 16, shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2, }, exerciseLabel: { fontSize: 16, fontWeight: "bold", marginTop: 8, }, exerciseValue: { fontSize: 14, marginTop: 4, }, chartContainer: { borderRadius: 16, padding: 16, alignItems: "center", marginBottom: 16, }, chart: { borderRadius: 16, marginVertical: 8, }, tipsContainer: { borderRadius: 16, padding: 16, marginBottom: 16, }, tipItem: { flexDirection: "row", marginBottom: 12, }, tipIcon: { marginRight: 12, marginTop: 2, }, tipText: { flex: 1, fontSize: 14, lineHeight: 20, }, }) [V0_FILE]typescriptreact:file="app/food.tsx" isMerged="true" isEdit="true" "use client" import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native" import { SafeAreaView } from "react-native-safe-area-context" import { useRouter } from "expo-router" import { Feather } from "@expo/vector-icons" import { LinearGradient } from "expo-linear-gradient" import { AnimatedCircularProgress } from "react-native-circular-progress" import { useTheme } from "../context/ThemeContext" import { useHabit } from "../context/HabitContext" import { BottomTabBar } from "../components/BottomTabBar" import { PetAvatar } from "../components/PetAvatar" import { BarChart } from "react-native-chart-kit" const FOOD_CATEGORIES = [ { label: "Fruits", value: 1, icon: "apple", calories: 80 }, { label: "Vegetables", value: 1, icon: "coffee", calories: 50 }, { label: "Proteins", value: 1, icon: "box", calories: 150 }, { label: "Grains", value: 1, icon: "circle", calories: 120 }, { label: "Dairy", value: 1, icon: "droplet", calories: 100 }, { label: "Nuts", value: 1, icon: "hexagon", calories: 170 }, ] export default function FoodScreen() { const { theme } = useTheme() const { getTodayProgress, getWeeklyProgress, goals, addLog, streaks } = useHabit() const router = useRouter() const foodProgress = getTodayProgress("food") const foodGoal = goals.food const percentage = Math.min(Math.round((foodProgress / foodGoal) * 100), 100) const weeklyData = getWeeklyProgress("food") const handleAddFood = (portions: number) => { addLog("food", portions) } const chartConfig = { backgroundGradientFrom: theme.card, backgroundGradientTo: theme.card, color: () => theme.food[0], strokeWidth: 2, barPercentage: 0.5, useShadowColorFromDataset: false, } const chartData = { labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { data: weeklyData, }, ], } return ( router.back()} style={styles.backButton}> Healthy Eating {() => ( {foodProgress} portions )} Daily Goal: {foodGoal} portions Current Streak: {streaks.food} days {percentage}% Complete Add Healthy Food {FOOD_CATEGORIES.map((item) => ( handleAddFood(item.value)} > {item.label} {item.value} portion ({item.calories} cal) ))} Weekly Progress Nutrition Tips Aim for at least 5 portions of fruits and vegetables daily. Choose whole grains over refined grains for more nutrients and fiber. Include lean proteins and healthy fats in your meals for balanced nutrition. ) } const styles = StyleSheet.create({ container: { flex: 1, }, header: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16, paddingVertical: 12, }, backButton: { padding: 8, }, title: { fontSize: 20, fontWeight: "bold", }, placeholder: { width: 40, }, scrollView: { flex: 1, }, content: { padding: 16, paddingBottom: 80, }, petContainer: { alignItems: "center", marginBottom: 16, }, progressCard: { borderRadius: 16, padding: 20, marginBottom: 24, }, progressContainer: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", }, progressTextContainer: { alignItems: "center", }, progressValue: { fontSize: 24, fontWeight: "bold", color: "white", }, progressUnit: { fontSize: 16, color: "white", }, goalContainer: { flex: 1, marginLeft: 20, }, goalText: { fontSize: 16, color: "white", marginBottom: 4, }, streakText: { fontSize: 16, color: "white", marginBottom: 4, }, percentageText: { fontSize: 16, fontWeight: "bold", color: "white", }, sectionTitle: { fontSize: 18, fontWeight: "bold", marginVertical: 16, }, foodGrid: { flexDirection: "row", flexWrap: "wrap", justifyContent: "space-between", marginBottom: 16, }, foodButton: { width: "48%", borderRadius: 12, padding: 16, alignItems: "center", marginBottom: 16, shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 2, }, foodLabel: { fontSize: 16, fontWeight: "bold", marginTop: 8, }, foodValue: { fontSize: 14, marginTop: 4, }, chartContainer: { borderRadius: 16, padding: 16, alignItems: "center", marginBottom: 16, }, chart: { borderRadius: 16, marginVertical: 8, }, tipsContainer: { borderRadius: 16, padding: 16, marginBottom: 16, }, tipItem: { flexDirection: "row", marginBottom: 12, }, tipIcon: { marginRight: 12, marginTop: 2, }, tipText: { flex: 1, fontSize: 14, lineHeight: 20, }, }) [V0_FILE]typescriptreact:file="app/add-habit.tsx" isMerged="true" isEdit="true" "use client" import { useState } from "react" import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native" import { SafeAreaView } from "react-native-safe-area-context" import { useRouter } from "expo-router" import { Feather } from "@expo/vector-icons" import { LinearGradient } from "expo-linear-gradient" import { useTheme } from "../context/ThemeContext" import { useHabit, type HabitType } from "../context/HabitContext" import { BottomTabBar } from "../components/BottomTabBar" import { PetAvatar } from "../components/PetAvatar" import * as Haptics from "expo-haptics" export default function AddHabitScreen() { const { theme } = useTheme() const { addLog } = useHabit() const router = useRouter() const [selectedHabit, setSelectedHabit] = useState(null) const habits = [ { type: "water" as HabitType, title: "Water Intake", icon: "droplet", description: "Track your daily water consumption", gradient: theme.water, options: [ { label: "Small Glass", value: 250, unit: "ml" }, { label: "Medium Glass", value: 500, unit: "ml" }, { label: "Large Glass", value: 750, unit: "ml" }, ], }, { type: "exercise" as HabitType, title: "Exercise", icon: "activity", description: "Log your physical activities", gradient: theme.exercise, options: [ { label: "Quick Workout", value: 10, unit: "min" }, { label: "Medium Session", value: 20, unit: "min" }, { label: "Full Workout", value: 30, unit: "min" }, ], }, { type: "food" as HabitType, title: "Healthy Eating", icon: "coffee", description: "Track your nutritious meals", gradient: theme.food, options: [ { label: "Snack", value: 1, unit: "portion" }, { label: "Small Meal", value: 2, unit: "portions" }, { label: "Full Meal", value: 3, unit: "portions" }, ], }, ] const handleSelectHabit = (type: HabitType) => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium) setSelectedHabit(type) } const handleAddHabit = (type: HabitType, value: number) => { Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success) addLog(type, value) setSelectedHabit(null) router.push("/") } const selectedHabitData = habits.find((h) => h.type === selectedHabit) return ( Add Habit {!selectedHabit ? ( <> What habit would you like to track today? {habits.map((habit) => ( handleSelectHabit(habit.type)} activeOpacity={0.9}> {habit.title} {habit.description} ))} ) : ( <> setSelectedHabit(null)} style={[styles.backButton, { backgroundColor: theme.card }]} > Back {selectedHabitData?.title} Choose an amount to log: {selectedHabitData?.options.map((option) => ( handleAddHabit(selectedHabitData.type, option.value)} > {option.label} {option.value} {option.unit} ))} )} ) } const styles = StyleSheet.create({ container: { flex: 1, }, header: { paddingHorizontal: 16, paddingVertical: 12, alignItems: "center", }, title: { fontSize: 20, fontWeight: "bold", }, scrollView: { flex: 1, }, content: { padding: 16, paddingBottom: 80, }, petContainer: { alignItems: "center", marginBottom: 24, }, subtitle: { fontSize: 18, fontWeight: "bold", marginBottom: 16, textAlign: "center", }, habitCard: { flexDirection: "row", alignItems: "center", padding: 16, borderRadius: 16, marginBottom: 16, }, habitInfo: { flex: 1, marginLeft: 12, }, habitTitle: { fontSize: 18, fontWeight: "bold", color: "white", marginBottom: 4, }, habitDescription: { fontSize: 14, color: "white", opacity: 0.9, }, backButtonContainer: { marginBottom: 16, }, backButton: { flexDirection: "row", alignItems: "center", paddingVertical: 8, paddingHorizontal: 12, borderRadius: 8, alignSelf: "flex-start", }, backButtonText: { marginLeft: 8, fontSize: 16, }, selectedHabitHeader: { padding: 24, borderRadius: 16, marginBottom: 24, alignItems: "center", }, selectedHabitTitle: { fontSize: 24, fontWeight: "bold", color: "white", marginTop: 12, }, optionsTitle: { fontSize: 18, fontWeight: "bold", marginBottom: 16, }, optionButton: { padding: 16, borderRadius: 12, marginBottom: 12, }, optionLabel: { fontSize: 18, fontWeight: "bold", marginBottom: 4, }, optionValue: { fontSize: 16, }, }) [V0_FILE]typescriptreact:file="app/profile.tsx" isMerged="true" isEdit="true" "use client" import { useState } from "react" import { View, Text, StyleSheet, Switch, TextInput, ScrollView } from "react-native" import { SafeAreaView } from "react-native-safe-area-context" import { Feather } from "@expo/vector-icons" import { useTheme } from "../context/ThemeContext" import { useHabit, type HabitType } from "../context/HabitContext" import { usePet } from "../context/PetContext" import { BottomTabBar } from "../components/BottomTabBar" import { PetAvatar } from "../components/PetAvatar" import * as Notifications from "expo-notifications" export default function ProfileScreen() { const { theme, isDark, toggleTheme } = useTheme() const { goals, updateGoal } = useHabit() const { pet, setPetName } = usePet() const [petName, setPetNameInput] = useState(pet.name) const [waterGoal, setWaterGoal] = useState(goals.water.toString()) const [exerciseGoal, setExerciseGoal] = useState(goals.exercise.toString()) const [foodGoal, setFoodGoal] = useState(goals.food.toString()) const [notificationsEnabled, setNotificationsEnabled] = useState(true) const handleSaveGoal = (type: HabitType, value: string) => { const numValue = Number.parseInt(value, 10) if (!isNaN(numValue) && numValue > 0) { updateGoal(type, numValue) } } const handleSavePetName = () => { if (petName.trim()) { setPetName(petName.trim()) } } const toggleNotifications = async (value: boolean) => { setNotificationsEnabled(value) if (value) { const { status } = await Notifications.requestPermissionsAsync() if (status !== "granted") { setNotificationsEnabled(false) } } } return ( Profile Pet Name Level {pet.level} • Mood: {pet.mood.charAt(0).toUpperCase() + pet.mood.slice(1)} Daily Goals Water Intake handleSaveGoal("water", waterGoal)} keyboardType="number-pad" /> ml Exercise handleSaveGoal("exercise", exerciseGoal)} keyboardType="number-pad" /> min Healthy Eating handleSaveGoal("food", foodGoal)} keyboardType="number-pad" /> portions Settings Dark Mode Notifications About HealthyHabits Version 1.0.0 Track your daily habits and stay healthy with your virtual pet companion. ) } const styles = StyleSheet.create({ container: { flex: 1, }, header: { paddingHorizontal: 16, paddingVertical: 12, alignItems: "center", }, title: { fontSize: 20, fontWeight: "bold", }, scrollView: { flex: 1, }, content: { padding: 16, paddingBottom: 80, }, petSection: { alignItems: "center", marginBottom: 24, }, inputContainer: { width: "80%", borderRadius: 12, padding: 12, marginTop: 16, }, inputLabel: { fontSize: 14, marginBottom: 4, }, input: { fontSize: 16, borderBottomWidth: 1, paddingVertical: 8, textAlign: "center", }, petStats: { marginTop: 8, fontSize: 16, }, section: { marginBottom: 24, }, sectionTitle: { fontSize: 18, fontWeight: "bold", marginBottom: 12, }, goalContainer: { borderRadius: 12, padding: 16, marginBottom: 12, flexDirection: "row", justifyContent: "space-between", alignItems: "center", }, goalHeader: { flexDirection: "row", alignItems: "center", }, goalTitle: { fontSize: 16, marginLeft: 8, }, goalInputContainer: { flexDirection: "row", alignItems: "center", }, goalInput: { width: 80, borderBottomWidth: 1, paddingVertical: 4, textAlign: "center", fontSize: 16, }, goalUnit: { marginLeft: 8, fontSize: 16, }, settingContainer: { borderRadius: 12, padding: 16, marginBottom: 12, flexDirection: "row", justifyContent: "space-between", alignItems: "center", }, settingContent: { flexDirection: "row", alignItems: "center", }, settingTitle: { fontSize: 16, marginLeft: 8, }, aboutContainer: { borderRadius: 12, padding: 16, alignItems: "center", }, appName: { fontSize: 20, fontWeight: "bold", marginBottom: 4, }, appVersion: { fontSize: 14, marginBottom: 12, }, appDescription: { fontSize: 14, textAlign: "center", lineHeight: 20, }, }) [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true" module.exports = { darkMode: ["class"], content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", "*.{js,ts,jsx,tsx,mdx}"], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, water: { light: "#4facfe", dark: "#00f2fe", }, exercise: { light: "#ff8177", dark: "#ff867a", }, food: { light: "#56ab2f", dark: "#a8e063", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]json:file="app.json" isQuickEdit="true" isMerged="true" isEdit="true" { "expo": { "name": "HealthyHabits", "slug": "healthyhabits", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "automatic", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "assetBundlePatterns": ["**/*"], "ios": { "supportsTablet": true }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#ffffff" } }, "web": { "favicon": "./assets/favicon.png" }, "plugins": [ [ "expo-notifications", { "icon": "./assets/notification-icon.png", "color": "#ffffff" } ] ] } } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" isEdit="true" import { View, Text, StyleSheet } from "react-native" const Page = () => { return ( Welcome to HealthyHabits! ) } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", }, text: { fontSize: 20, fontWeight: "bold", }, }) export default Page