Made some good progress.

app/(tabs)/countdown.tsx

@@ -1,8 +1,33 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ActivityIndicator } from 'react-native';
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
+import axios from 'axios';
 
+//const API_KEY = 'I_Love_Madeline';
+const BASE_URL = 'http://192.168.0.39:3000/api';
+//const BASE_URL = 'https://ismadelinethecutest.gibbyb.com/api';
+
+// Separate API call function
+const fetchCountdownDate = async () => {
+  try {
+    //const response = await axios.get(`${BASE_URL}/getCountdown`, {
+      //params: { apiKey: API_KEY }
+    //});
+    const response = await axios.get(`${BASE_URL}/getCountdown?apiKey=I_Love_Madeline`);
+    console.log('API response:', response.data);
+    if (response.data && response.data[0] && response.data[0].countdown) {
+      console.log('Countdown date:', response.data[0].countdown);
+      return new Date(response.data[0].countdown);
+    } else {
+      console.error('Unexpected API response format:', response.data);
+      return null;
+    }
+  } catch (error) {
+    console.error('API call error:', error);
+    return null;
+  }
+};
 
 export default function TabTwoScreen() {
   const [countdown, setCountdown] = useState({
@@ -11,13 +36,31 @@ export default function TabTwoScreen() {
     minutes: 0,
     seconds: 0,
   });
-
-  const targetDate = new Date('2024-09-20T10:10:00').getTime();
+  const [targetDate, setTargetDate] = useState<Date | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
+    const loadCountdownDate = async () => {
+      setIsLoading(true);
+      const date = await fetchCountdownDate();
+      if (date) {
+        setTargetDate(date);
+      } else {
+        // Fallback to a default date if API call fails
+        setTargetDate(new Date());
+      }
+      setIsLoading(false);
+    };
+
+    loadCountdownDate();
+  }, []);
+
+  useEffect(() => {
+    if (targetDate === null) return;
+
     const interval = setInterval(() => {
-      const now = new Date().getTime();
-      const distance = targetDate - now;
+      const now = new Date();
+      const distance = targetDate.getTime() - now.getTime();
 
       const days = Math.floor(distance / (1000 * 60 * 60 * 24));
       const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
@@ -35,6 +78,14 @@ export default function TabTwoScreen() {
     return () => clearInterval(interval);
   }, [targetDate]);
 
+  if (isLoading) {
+    return (
+      <ThemedView style={styles.container}>
+        <ActivityIndicator size="large" color="#0000ff" />
+      </ThemedView>
+    );
+  }
+
   return (
     <ThemedView style={styles.container}>
       <ThemedText style={styles.title}>Countdown to Next Visit</ThemedText>
@@ -48,7 +99,7 @@ export default function TabTwoScreen() {
   );
 }
 
-function CountdownItem({ value, label }) {
+function CountdownItem({ value, label }: { value: number; label: string }) {
   return (
     <ThemedView style={styles.countdownItem}>
       <ThemedText style={styles.countdownValue}>{value}</ThemedText>

app/_layout.tsx

@@ -2,19 +2,47 @@ import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native
 import { useFonts } from 'expo-font';
 import { Stack } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
-import { useEffect } from 'react';
 import 'react-native-reanimated';
-
 import { useColorScheme } from '@/hooks/useColorScheme';
+import React, { useState, useEffect } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import UserSelection from '@/components/UserSelection';
+import { TouchableOpacity, Text } from 'react-native';
+
+type User = {
+  id: number;
+  name: string;
+  message: string;
+};
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
   const colorScheme = useColorScheme();
-  const [loaded] = useFonts({
+  const [loaded, error] = useFonts({
     SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
   });
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    async function prepare() {
+      try {
+        // Load the user
+        const storedUser = await AsyncStorage.getItem('@user');
+        if (storedUser) {
+          setUser(JSON.parse(storedUser));
+        }
+      } catch (e) {
+        console.error('Failed to load user', e);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    prepare();
+  }, []);
 
   useEffect(() => {
     if (loaded) {
@@ -22,14 +50,49 @@ export default function RootLayout() {
     }
   }, [loaded]);
 
-  if (!loaded) {
-    return null;
+  const handleUserSelected = async (selectedUser: User) => {
+    setUser(selectedUser);
+    try {
+      await AsyncStorage.setItem('@user', JSON.stringify(selectedUser));
+    } catch (e) {
+      console.error('Failed to save user', e);
+    }
+  };
+
+  const handleSwitchUser = async () => {
+    try {
+      await AsyncStorage.removeItem('@user');
+      setUser(null);
+    } catch (e) {
+      console.error('Failed to remove user', e);
+    }
+  };
+
+  if (!loaded || isLoading) {
+    return null; // or a loading indicator
+  }
+
+  if (!user) {
+    return <UserSelection onUserSelected={handleUserSelected} />;
   }
 
   return (
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
       <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen 
+          name="(tabs)" 
+          options={{ 
+            headerShown: true,
+            title: user.name,
+            headerRight: () => (
+              <TouchableOpacity onPress={handleSwitchUser} style={{ marginRight: 15 }}>
+                <Text style={{ color: colorScheme === 'dark' ? 'white' : 'black' }}>
+                  Switch User
+                </Text>
+              </TouchableOpacity>
+            ),
+          }} 
+        />
         <Stack.Screen name="+not-found" />
       </Stack>
     </ThemeProvider>