Updated sliding animation for ScannedDatabox on all 3 screens

screens/EmailScreen.tsx

@@ -469,7 +469,7 @@ const styles = StyleSheet.create({
   },
   deleteButtonText: {
     marginRight: screenWidth * 0.02,
-    color: '#ff69b4',
+    color: '#f41c87',
     fontSize: screenWidth * 0.035,
   },
   modalOverlay: {

screens/HistoryScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState, useEffect } from 'react';
-import { View, Text, StyleSheet, FlatList, TouchableOpacity, Image, Modal, ActivityIndicator, Dimensions } from 'react-native';
+import { View, Text, StyleSheet, FlatList, TouchableOpacity, Image, Modal, ActivityIndicator, Dimensions, Animated } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import ScannedDataBox from '../components/ScannedDataBox';
 import { Ionicons } from '@expo/vector-icons';
@@ -19,10 +19,11 @@ const HistoryScreen: React.FC = () => {
 
   const [qrCodeToDelete, setQrCodeToDelete] = useState<string | null>(null);
   const [isDeleteModalVisible, setIsDeleteModalVisible] = useState<boolean>(false);
-  const [isScannedDataModalVisible, setIsScannedDataModalVisible] = useState<boolean>(false);
   const [historiesLoading, setHistoriesLoading] = useState(false);
   const [historiesError, setHistoriesError] = useState<string | null>(null);
   const [selectedQrCodeId, setSelectedQrCodeId] = useState<string | null>(null);
+  const [isModalVisible, setIsModalVisible] = useState<boolean>(false); // Modal for ScannedDataBox
+
 
   const fetchHistories = useCallback(async () => {
     if (!userAttributes?.sub) return;
@@ -51,20 +52,21 @@ const HistoryScreen: React.FC = () => {
     }
   }, [dispatch, userAttributes]);
 
+
   const handleSelectQrCodeForView = (item: QRCodeType) => {
     setSelectedQrCodeId(item.data.id || null);
-    setIsScannedDataModalVisible(true);
+    setIsModalVisible(true); // Show ScannedDataBox Modal
   };
 
   const clearSelectedQrCodeData = () => {
     setSelectedQrCodeId(null);
-    setIsScannedDataModalVisible(false);
+    setIsModalVisible(false); // Close ScannedDataBox Modal
   };
-
   const filteredQrCodes = showBookmarks
     ? histories.filter((qr) => qr.bookmarked)
     : histories;
 
+
   return (
     <View style={styles.container}>
       <View style={styles.headerContainer}>
@@ -116,22 +118,29 @@ const HistoryScreen: React.FC = () => {
         contentContainerStyle={styles.flatListContent}
       />
 
-      {/* Modal for ScannedDataBox */}
-      <Modal
-        visible={isScannedDataModalVisible}
+   {/* Modal for ScannedDataBox */}
+   <Modal
+        visible={isModalVisible}
         transparent={true}
-        animationType="fade"
+        animationType="slide"
         onRequestClose={clearSelectedQrCodeData}
       >
-        <View style={styles.modalOverlay}>
-          <TouchableOpacity style={styles.modalOverlayTouchable} onPress={clearSelectedQrCodeData} activeOpacity={1}>
-            <View style={styles.modalContainer}>
-              <ScannedDataBox qrCodeId={selectedQrCodeId} clearScanData={clearSelectedQrCodeData} />
-            </View>
-          </TouchableOpacity>
-        </View>
+        {/* The greyspace outside, made clickable to close the modal */}
+        <TouchableOpacity
+          style={styles.scannedDataBoxModalOverlay}
+          activeOpacity={1}
+          onPressOut={clearSelectedQrCodeData}
+        >
+          {/* Ensure ScannedDataBox does not render another modal */}
+          <View style={styles.scannedDataBoxModalContainer}>
+            <ScannedDataBox qrCodeId={selectedQrCodeId} clearScanData={clearSelectedQrCodeData} />
+          </View>
+        </TouchableOpacity>
       </Modal>
 
+
+
+
       {/* Modal to confirm deletion */}
       <Modal
         transparent={true}
@@ -276,6 +285,18 @@ const styles = StyleSheet.create({
     fontSize: screenWidth * 0.04,
     color: '#000',
   },
+  scannedDataBoxModalOverlay: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  scannedDataBoxModalContainer: {
+    marginHorizontal: '5%',
+    borderRadius: screenWidth * 0.025,
+    backgroundColor: 'white',
+    padding: screenWidth * 0.025,
+    elevation: 5,
+  },
 });
 
 export default HistoryScreen;

screens/QRScannerScreen.tsx

@@ -21,6 +21,7 @@ const QRScannerScreen: React.FC = () => {
   const [bannerOpacity] = useState(new Animated.Value(0));
   const [isConnected, setIsConnected] = useState<boolean>(true);
   const [qrTip, setQrTip] = useState<string>('Always scan QR codes from trusted sources');
+  const [scannedDataBoxY] = useState(new Animated.Value(screenHeight)); // Start off-screen
 
   // Camera permissions and device management
   const { hasPermission, requestPermission } = useCameraPermission();
@@ -36,7 +37,6 @@ const QRScannerScreen: React.FC = () => {
         console.error('Error fetching QR tips:', error);
       }
     };
-    
 
     requestPermission(); // Request camera permission on component mount
 
@@ -61,6 +61,25 @@ const QRScannerScreen: React.FC = () => {
     };
   }, []);
 
+  const showScannedDataBox = () => {
+    setIsScannedDataBoxVisible(true);
+    Animated.timing(scannedDataBoxY, {
+      toValue: 0, // Slide the modal to the top of the screen
+      duration: 500,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const hideScannedDataBox = () => {
+    Animated.timing(scannedDataBoxY, {
+      toValue: screenHeight, // Move it back off-screen
+      duration: 500,
+      useNativeDriver: true,
+    }).start(() => {
+      setIsScannedDataBoxVisible(false);
+    });
+  };
+
   // Show an offline banner
   const showBanner = () => {
     Animated.timing(bannerOpacity, {
@@ -78,7 +97,6 @@ const QRScannerScreen: React.FC = () => {
     });
   };
 
-  // Handle payload after scanning QR code
   const handlePayload = async (payload: string) => {
     setScanned(true);
     console.info("Decoded QR Code, Payload is: ", payload);
@@ -86,8 +104,8 @@ const QRScannerScreen: React.FC = () => {
     try {
       const response = await scanQRCode(payload);
       const qrCodeId = response.qrcode.data.id;
-      setQRCodeId(qrCodeId); // Store QR code ID
-      setIsScannedDataBoxVisible(true); // Show the ScannedDataBox pop-up
+      setQRCodeId(qrCodeId);
+        showScannedDataBox(); // Show the ScannedDataBox pop-up with animation
     } catch (error) {
       console.error("Error scanning QR code:", error);
     }
@@ -191,18 +209,25 @@ const QRScannerScreen: React.FC = () => {
         </View>
       </View>
 
-      {/* Scanned Data Box as a pop-up */}
-      {isScannedDataBoxVisible && (
-        <View style={styles.scannedDataBoxPopup}>
-          <ScannedDataBox
-            qrCodeId={qrCodeId!}
-            clearScanData={() => {
-              setScanned(false);
-              setIsScannedDataBoxVisible(false);
-            }}
-          />
-        </View>
-      )}
+      {/* Scanned Data Box as a modal with sliding animation */}
+      <Modal
+        transparent={true}
+        visible={isScannedDataBoxVisible}
+        animationType="none"
+        onRequestClose={hideScannedDataBox}
+      >
+        <TouchableOpacity style={styles.modalOverlay} activeOpacity={1} onPress={hideScannedDataBox}>
+          <Animated.View style={[styles.modalContainer, { transform: [{ translateY: scannedDataBoxY }] }]}>
+            <ScannedDataBox
+              qrCodeId={qrCodeId!}
+              clearScanData={() => {
+                setScanned(false);
+                hideScannedDataBox();
+              }}
+            />
+        </Animated.View>
+        </TouchableOpacity>
+      </Modal>
 
       {/* Settings Icon */}
       <TouchableOpacity onPress={() => setIsSettingsModalVisible(true)} style={styles.settingsButton}>
@@ -257,17 +282,15 @@ const styles = StyleSheet.create({
     color: 'black',
   },
   cameraContainer: {
-    width: '100%', // Adjust the width as needed
-    height: '45%', // Adjust the height as needed
+    width: '100%',
+    height: '45%',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 10,
     overflow: 'hidden',
-    alignSelf: 'center', // Center the container horizontally
-    marginTop: '10%', // Adjust the top margin to position it vertically in the middle
+    alignSelf: 'center',
+    marginTop: '10%',
   },
-  
-  
   settingsButton: {
     position: 'absolute',
     top: screenHeight * 0.05,
@@ -295,14 +318,15 @@ const styles = StyleSheet.create({
     backgroundColor: '#000',
     borderRadius: screenWidth * 0.0625,
   },
-  scannedDataBoxPopup: {
-    position: 'absolute',
-    top: '20%',
-    left: '5%',
-    right: '5%',
-    zIndex: 2,
-    backgroundColor: 'white',
+  modalOverlay: {
+    flex: 1,
+    justifyContent: 'center', // Aligns the modal to the bottom by default
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContainer: {
+    marginHorizontal: '5%',
     borderRadius: screenWidth * 0.025,
+    backgroundColor: 'white',
     padding: screenWidth * 0.025,
     elevation: 5,
   },
@@ -312,15 +336,14 @@ const styles = StyleSheet.create({
   settingsModalContainer: {
     flex: 1,
     justifyContent: 'center',
-    backgroundColor: '#f8f0fc', // Full pink background to match the app's theme
+    backgroundColor: '#f8f0fc',
   },
-  
   settingsModalContent: {
     flex: 1,
-    backgroundColor: '#f8f0fc', // Full pink background for the content as well
+    backgroundColor: '#f8f0fc',
     padding: screenWidth * 0.05,
-    borderTopLeftRadius: 0, // Remove border radius to avoid white edges
-    borderTopRightRadius: 0, // Remove border radius to avoid white edges
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
     alignItems: 'center',
   },
   closeButton: {
@@ -353,24 +376,23 @@ const styles = StyleSheet.create({
     fontSize: screenWidth * 0.04,
   },
   tipsContainer: {
-    backgroundColor: '#fff', // Make sure the container background matches the white box
+    backgroundColor: '#fff',
     padding: 10,
     borderRadius: 10,
     alignItems: 'center',
-    marginTop: 10, // Space from the camera container
+    marginTop: 10,
   },
   iconTextRow: {
     flexDirection: 'row',
-    alignItems: 'center', // This will align the icon and text vertically
+    alignItems: 'center',
   },
   tipsText: {
-    color: '#f41c87', // Adjusted color to match the pink theme
+    color: '#f41c87',
     fontSize: 16,
     textAlign: 'center',
-    marginLeft: 5, // Add some spacing between the icon and the text
-    paddingHorizontal: 10, // Add horizontal padding to ensure text isn't too close to the edges
+    marginLeft: 5,
+    paddingHorizontal: 10,
   },
-  
 });
 
 export default QRScannerScreen;

screens/SettingsScreen.tsx

@@ -212,7 +212,7 @@ const SettingsScreen: React.FC = () => {
         </TouchableOpacity>
       </View>
   
-      <Text style={styles.versionText}>Version 1.2</Text>
+      <Text style={styles.versionText}>Version 1.0</Text>
     </View>
   );
 };
@@ -292,7 +292,7 @@ const styles = StyleSheet.create({
   },
   deleteAllButton: {
     flexDirection: 'row',
-    backgroundColor: '#ff5941',
+    backgroundColor: '#f41c87',
     borderRadius: 25,
     paddingVertical: 10,
     paddingHorizontal: 20,