Updtated EmailScreen for useremail and resycn button, added banner when resync. Added marginTop padding for all screens

screens/EmailScreen.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, TouchableOpacity, FlatList, StyleSheet, ActivityIndicator, Alert } from 'react-native';
-import { getEmails, getScannedEmails } from '../api/qrCodeAPI';
+import { View, Text, TouchableOpacity, FlatList, StyleSheet, ActivityIndicator, Alert, Animated } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { getEmails, getScannedEmails, getUserInfo } from '../api/qrCodeAPI';
 
 const EmailScreen: React.FC = () => {
   const [selectedMessage, setSelectedMessage] = useState(null);
@@ -8,14 +9,29 @@ const EmailScreen: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [rescanLoading, setRescanLoading] = useState(false);
   const [error, setError] = useState(null);
-  
+  const [userEmail, setUserEmail] = useState('');
+  const [bannerOpacity] = useState(new Animated.Value(0));
+
   useEffect(() => {
     startPollingForScannedEmails();
+    fetchUserEmail();
   }, []);
 
+  // Function to fetch user email
+  const fetchUserEmail = async () => {
+    try {
+      const userInfo = await getUserInfo();
+      setUserEmail(userInfo.email); // Adjust this line based on the actual structure of userInfo
+    } catch (error) {
+      console.error('Error fetching user email:', error);
+      setUserEmail('Error fetching email');
+    }
+  };
+
   // Function to initiate the email fetching process
   const initiateEmailFetch = async () => {
     setRescanLoading(true);
+    showBanner();
     try {
       // Call to start email fetching process
       const response = await getEmails(
@@ -30,6 +46,23 @@ const EmailScreen: React.FC = () => {
     }
   };
 
+  // Function to show the banner
+  const showBanner = () => {
+    Animated.timing(bannerOpacity, {
+      toValue: 1,
+      duration: 500,
+      useNativeDriver: true,
+    }).start(() => {
+      setTimeout(() => {
+        Animated.timing(bannerOpacity, {
+          toValue: 0,
+          duration: 500,
+          useNativeDriver: true,
+        }).start();
+      }, 3000);
+    });
+  };
+
   // Function to poll for scanned emails
   const startPollingForScannedEmails = () => {
     const pollingInterval = setInterval(async () => {
@@ -68,9 +101,10 @@ const EmailScreen: React.FC = () => {
       )}
       {emailData && (
         <>
-          <View style={styles.buttonContainer}>
-            <TouchableOpacity onPress={initiateEmailFetch} style={styles.button}>
-              <Text style={styles.buttonText}>Rescan Inbox</Text>
+          <View style={styles.headerContainer}>
+            <Text style={styles.emailHeader}>Email: {userEmail}</Text>
+            <TouchableOpacity onPress={initiateEmailFetch} style={styles.refreshButton}>
+              <Ionicons name="refresh" size={24} color="#ff69b4" />
             </TouchableOpacity>
           </View>
           {rescanLoading && (
@@ -122,12 +156,34 @@ const EmailScreen: React.FC = () => {
           />
         </>
       )}
+      <Animated.View style={[styles.banner, { opacity: bannerOpacity }]}>
+        <Text style={styles.bannerText}>Scanning emails in the background. This may take a while...</Text>
+      </Animated.View>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  // ... (rest of your styles)
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f0fc',
+    padding: 10,
+    paddingTop: 40, // Padding from the top to align content
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 10,
+  },
+  emailHeader: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#ff69b4',
+  },
+  refreshButton: {
+    padding: 5,
+  },
   loadingContainer: {
     flex: 1,
     justifyContent: 'center',
@@ -138,11 +194,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  container: {
-    flex: 1,
-    backgroundColor: '#f8f0fc',
-    padding: 10,
-  },
   buttonContainer: {
     justifyContent: 'center',
     alignItems: 'center',
@@ -207,7 +258,21 @@ const styles = StyleSheet.create({
     color: '#ff69b4',
     marginBottom: 5,
     marginTop: 10, // Add margin at the top for spacing from the previous element
-  }
+  },
+  banner: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: '#ff69b4',
+    padding: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  bannerText: {
+    color: '#fff',
+    fontWeight: 'bold',
+  },
 });
 
 export default EmailScreen;