import React, { useState, useEffect } from 'react'; import { StyleSheet } from 'react-native'; import { ThemedText } from '@/components/ThemedText'; import { ThemedView } from '@/components/ThemedView'; import { LinearGradient } from 'expo-linear-gradient'; import AsyncStorage from '@react-native-async-storage/async-storage'; import axios from 'axios'; const API_KEY = process.env.EXPO_PUBLIC_API_KEY; const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL; export default function HomeScreen() { const [message, setMessage] = useState('Loading message...'); useEffect(() => { fetchMessage(); const intervalId = setInterval(fetchMessage, 10000); // Every 10 seconds return () => clearInterval(intervalId); }, []); const fetchMessage = async () => { try { const storedUser = await AsyncStorage.getItem('@user'); if (!storedUser) { setMessage('User not found. Please select a user.'); return; } const user = JSON.parse(storedUser); const response = await axios.get(`${BASE_URL}/getMessage`, { params: { apiKey: API_KEY, userId: user.id } }); if (response.data && response.data[0] && response.data[0].receivedMessage) { setMessage(response.data[0].receivedMessage); } else { setMessage('No message found.'); } } catch (error) { console.error('API call error:', error); setMessage('Failed to fetch message. Please try again.'); } }; return ( {message} ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'transparent', }, title: { fontSize: 56, lineHeight: 72, fontWeight: 'bold', marginBottom: 20, textAlign: 'center', paddingHorizontal: 20, }, });