import React, { useState, useEffect } from 'react';
import { StyleSheet } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
export default function TabTwoScreen() {
const [countdown, setCountdown] = useState({
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
});
const targetDate = new Date('2024-09-20T10:10:00').getTime();
useEffect(() => {
const interval = setInterval(() => {
const now = new Date().getTime();
const distance = targetDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
setCountdown({ days, hours, minutes, seconds });
if (distance < 0) {
clearInterval(interval);
setCountdown({ days: 0, hours: 0, minutes: 0, seconds: 0 });
}
}, 1000);
return () => clearInterval(interval);
}, [targetDate]);
return (
Countdown to Next Visit
);
}
function CountdownItem({ value, label }) {
return (
{value}
{label}
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 56,
lineHeight: 64,
fontWeight: 'bold',
marginBottom: 20,
textAlign: 'center',
paddingHorizontal: 20,
},
countdownContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
countdownItem: {
margin: 10,
lineHeight: 32,
alignItems: 'center',
},
countdownValue: {
fontSize: 32,
lineHeight: 32,
fontWeight: 'bold',
},
countdownLabel: {
fontSize: 24,
},
});