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>