new changes

src/screens/home/skin/AdditionalSymptoms.js

-import React, { useState, useRef, useEffect } from 'react';
-import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image  } from 'react-native';
-import { COLORS ,IMGS, ROUTES} from '../../../constants';
+import React, {useState, useRef, useEffect} from 'react';
+import {
+  View,
+  StyleSheet,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  ActivityIndicator,
+  Image,
+} from 'react-native';
+import {COLORS, IMGS, ROUTES} from '../../../constants';
 import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
 import Video from 'react-native-video'; // Make sure to install this package
 import Button from '../../../components/Button';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { Dimensions } from 'react-native';
-import { Linking } from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {Dimensions} from 'react-native';
+import {Linking} from 'react-native';
 
+const AdditionalSymptomsScreen2 = ({navigation}) => {
+  const [selectedSymptoms, setSelectedSymptoms] = useState({
+    symptom1: false,
+    symptom2: false,
+    symptom3: false,
+    symptom4: false,
+    symptom5: false,
+    symptom6: false,
+    symptom7: false,
+    symptom8: false,
+    symptom9: false,
+    symptom10: false,
+    symptom11: false,
+    symptom12: false,
+    symptom13: false,
+    symptom14: false,
+  });
+  const [loading, setLoading] = useState(true);
+  const [videoPaused, setVideoPaused] = useState(true);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [controlsVisible, setControlsVisible] = useState(false);
+  const hideTimer = useRef(null);
 
-const AdditionalSymptomsScreen2 = ({ navigation }) => {
-    const [selectedSymptoms, setSelectedSymptoms] = useState({
-        symptom1: false, symptom2: false, symptom3: false, symptom4: false,
-        symptom5: false, symptom6: false, symptom7: false, symptom8: false,
-        symptom9: false, symptom10: false, symptom11: false, symptom12: false,
-        symptom13: false, symptom14: false
-    });
-    const [loading, setLoading] = useState(true);
-    const [videoPaused, setVideoPaused] = useState(true);
-    const [fullscreen, setFullscreen] = useState(false);
-    const [controlsVisible, setControlsVisible] = useState(false);
-    const hideTimer = useRef(null);
+  const URL_link =
+    'https://res.cloudinary.com/dl207ux6g/video/upload/v1715374532/3D/wfu4pr9phnadjqargex4.mp4';
 
-    const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374532/3D/wfu4pr9phnadjqargex4.mp4";
-    
-    const videoRef = useRef(null);
-    const screenHeight = Dimensions.get('window').height;
-    const imageHeight = screenHeight * 0.20;
+  const videoRef = useRef(null);
+  const screenHeight = Dimensions.get('window').height;
+  const imageHeight = screenHeight * 0.2;
 
+  const symptomsGroups = [
+    [
+      {key: 'symptom1', text: 'Headache | හිසරදය'},
+      {key: 'symptom2', text: 'Shoulder pain | උරහිස් වේදනාව'},
+      {key: 'symptom3', text: 'Upper Abdominal pain | ඉහළ උදරයේ වේදනාව'},
+      {key: 'symptom4', text: 'Lower Abdomen pain | පහළ උදරයේ වේදනාව'},
+    ],
+    [
+      {key: 'symptom5', text: 'Swollen Ankle pain | ඉදිමුණු වළලුකර වේදනාව'},
+      {key: 'symptom6', text: 'Leg joint pain | පාදයේ සන්ධි වේදනාව'},
+      {key: 'symptom7', text: 'Thigh muscle pain | කලවා මාංශ පේශි වේදනාව'},
+      {key: 'symptom8', text: 'Groin pain | ඉකිලි වේදනාව'},
+      {key: 'symptom9', text: 'Breast Pain |පියයුරු වේදනාව'},
+      {key: 'symptom10', text: 'Side muscle pain | පැත්තේ මාංශ පේශි වේදනාව'},
+    ],
+    [
+      {key: 'symptom11', text: 'Upper arm pain | ඉහළ අතේ වේදනාව'},
+      {key: 'symptom12', text: 'Heart burn | හදවත දැවෙනවා'},
+      {key: 'symptom13', text: 'Mouth and Nose ulcer’s | මුඛයේ සහ නාසයේ වණ'},
+      {key: 'symptom14', text: 'Back Pain |පිටුපස මාංශ පේශි වේදනාව'},
+    ],
+    // Add more groups as needed
+  ];
 
-    const symptomsGroups = [
-        [
-            { key: 'symptom1', text: 'Headache | හිසරදය' },
-            { key: 'symptom2', text: 'Shoulder pain | උරහිස් වේදනාව' },
-            { key: 'symptom3', text: 'Upper Abdominal pain | ඉහළ උදරයේ වේදනාව' },
-            { key: 'symptom4', text: 'Lower Abdomen pain | පහළ උදරයේ වේදනාව' },
-        ],
-        [
-            { key: 'symptom5', text: 'Swollen Ankle pain | ඉදිමුණු වළලුකර වේදනාව' },
-            { key: 'symptom6', text: 'Leg joint pain | පාදයේ සන්ධි වේදනාව' },
-            { key: 'symptom7', text: 'Thigh muscle pain | කලවා මාංශ පේශි වේදනාව' },
-            { key: 'symptom8', text: 'Groin pain | ඉකිලි වේදනාව' },
-            { key: 'symptom9', text: 'Breast Pain |පියයුරු වේදනාව'},
-            { key: 'symptom10', text: 'Side muscle pain | පැත්තේ මාංශ පේශි වේදනාව'},
-        ],
-        [
-            { key: 'symptom11', text: 'Upper arm pain | ඉහළ අතේ වේදනාව' },
-            { key: 'symptom12', text: 'Heart burn | හදවත දැවෙනවා' },
-            { key: 'symptom13', text: 'Mouth and Nose ulcer’s | මුඛයේ සහ නාසයේ වණ'},
-            { key: 'symptom14', text: 'Back Pain |පිටුපස මාංශ පේශි වේදනාව'},
-            
-        ],
-        // Add more groups as needed
-    ];
-
+  const handleLoad = () => {
+    setLoading(false);
+  };
 
-    const handleLoad = () => {
-        setLoading(false);
-    };
+  const handleBuffer = () => {
+    setLoading(true);
+  };
 
-    const handleBuffer = () => {
-        setLoading(true);
-    };
+  const toggleCheckbox = symptom => {
+    setSelectedSymptoms(prevState => ({
+      ...prevState,
+      [symptom]: !prevState[symptom],
+    }));
+  };
 
-    const toggleCheckbox = (symptom) => {
-        setSelectedSymptoms(prevState => ({
-            ...prevState,
-            [symptom]: !prevState[symptom],
-        }));
-    };
+  const handleSubmit = () => {
+    // Checking for specific symptoms that lead to SKIN_RISK
+    const skinRiskSymptoms = [
+      'symptom12',
+      'symptom5',
+      'symptom4',
+      'symptom10',
+      'symptom8',
+      'symptom6',
+    ];
+    const toSkinRisk = skinRiskSymptoms.some(
+      symptom => selectedSymptoms[symptom],
+    );
 
-    const handleSubmit = () => {
-        // Checking for specific symptoms that lead to SKIN_RISK
-        const skinRiskSymptoms = ['symptom12', 'symptom5', 'symptom4','symptom10', 'symptom8', 'symptom6'];
-        const toSkinRisk = skinRiskSymptoms.some(symptom => selectedSymptoms[symptom]);
+    // Navigate based on condition
+    if (toSkinRisk) {
+      navigation.navigate(ROUTES.SKIN_RISK, {
+        origin: 'AdditionalSymptomsScreen2',
+      });
+    } else {
+      navigation.navigate(ROUTES.SKIN_INFO);
+    }
+  };
 
-        // Navigate based on condition
-        if (toSkinRisk) {
-            navigation.navigate(ROUTES.SKIN_RISK, {origin: 'AdditionalSymptomsScreen2' });
-        } else {
-            navigation.navigate(ROUTES.SKIN_INFO);
-        }
-    };
+  const toggleFullscreen = () => {
+    if (videoRef.current) {
+      if (!fullscreen) {
+        videoRef.current.presentFullscreenPlayer(); // This will open the video in fullscreen
+      } else {
+        videoRef.current.dismissFullscreenPlayer(); // This will exit the fullscreen mode
+      }
+      setFullscreen(!fullscreen); // Toggle the fullscreen state
+    }
+  };
 
-    const toggleFullscreen = () => {
-        if (videoRef.current) {
-            if (!fullscreen) {
-                videoRef.current.presentFullscreenPlayer(); // This will open the video in fullscreen
-            } else {
-                videoRef.current.dismissFullscreenPlayer(); // This will exit the fullscreen mode
-            }
-            setFullscreen(!fullscreen); // Toggle the fullscreen state
-        }
-    };
+  const togglePlayPause = () => {
+    setVideoPaused(!videoPaused);
+    showControlsTemporarily(); // Toggle the pause state of the video
+  };
 
-    const togglePlayPause = () => {
-        setVideoPaused(!videoPaused);
-        showControlsTemporarily(); // Toggle the pause state of the video
-    };
+  const showControlsTemporarily = () => {
+    setControlsVisible(true);
+    if (hideTimer.current) {
+      clearTimeout(hideTimer.current);
+    }
+    hideTimer.current = setTimeout(() => {
+      setControlsVisible(false);
+    }, 3000); // Hide controls after 3 seconds of inactivity
+  };
 
-    const showControlsTemporarily = () => {
-        setControlsVisible(true);
-        if (hideTimer.current) {
-            clearTimeout(hideTimer.current);
-        }
-        hideTimer.current = setTimeout(() => {
-            setControlsVisible(false);
-        }, 3000);  // Hide controls after 3 seconds of inactivity
+  useEffect(() => {
+    return () => {
+      if (hideTimer.current) {
+        clearTimeout(hideTimer.current);
+      }
     };
+  }, []);
 
-    useEffect(() => {
-        return () => {
-            if (hideTimer.current) {
-                clearTimeout(hideTimer.current);
-            }
-        };
-    }, []);
-
-    return (
+  return (
     <SafeAreaView style={styles.container}>
-      <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
-            <View style={styles.topContainer}>
-            <Text style={styles.topicText}>Discoid Additional Symptoms </Text>
-            <View style={styles.qrCodeBox1}>
-                          <Image
-                            source={IMGS.sk_24}  // Make sure the path is correct
-                            style={styles.qrCodeImage1}
-                        />
-                        <Text style={styles.dscriptionText1}>
-                        මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත. 
-                        වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
-                        </Text>
-                        <Text style={styles.dscriptionText1}>
-                        Check if you have the symptoms listed below. Watch the video for guidance. 
-                        If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
-                        </Text>
-                         
-            </View>
-            <Image source={IMGS.sk_25}
-                        style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
-                        
-            <View style={styles.qrCodeBox}>
-                        <Image
-                            source={IMGS.sk_26}  // Make sure the path is correct
-                            style={styles.qrCodeImage1}
-                        />
-                         <TouchableOpacity
-                          style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
-                                 <Text style={styles.orButtonText}>OR Click This</Text>
-                        </TouchableOpacity>
-            </View>
-            <View style={styles.videoBox}>
-                    <View style={styles.videoDescriptionBox}>
-            <Text style={styles.descriptionText}>
-                Self diagnose with the 3D Model
+      <ScrollView
+        style={styles.scrollContainer}
+        contentContainerStyle={styles.contentContainer}>
+        <View style={styles.topContainer}>
+          <Text style={styles.topicText}>Discoid Additional Symptoms </Text>
+          <View style={styles.qrCodeBox1}>
+            <Image
+              source={IMGS.sk_24} // Make sure the path is correct
+              style={styles.qrCodeImage1}
+            />
+            <Text style={styles.dscriptionText1}>
+              මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ
+              සඳහා වීඩියෝවක් ලබා දී ඇත. වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය
+              ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව
+              නිරීක්ෂණය කරන්න.
             </Text>
+            <Text style={styles.dscriptionText1}>
+              Check if you have the symptoms listed below. Watch the video for
+              guidance. If the video is unclear, scan the QR code or click the
+              button to view a 3D model of a woman displaying these symptoms.
+            </Text>
+          </View>
+          <Image
+            source={IMGS.sk_25}
+            style={{
+              width: '50%',
+              height: imageHeight,
+              alignSelf: 'center',
+              resizeMode: 'contain',
+              marginBottom: -45,
+              marginTop: -24,
+            }}
+          />
+
+          <View style={styles.qrCodeBox}>
+            <Image
+              source={IMGS.sk_26} // Make sure the path is correct
+              style={styles.qrCodeImage1}
+            />
+            <TouchableOpacity
+              style={styles.orButton}
+              onPress={() =>
+                Linking.openURL('https://mywebar.com/p/Project_4_lpf4ury2jc')
+              }>
+              <Text style={styles.orButtonText}>OR Click This</Text>
+            </TouchableOpacity>
+          </View>
+          <View style={styles.videoBox}>
+            <View style={styles.videoDescriptionBox}>
+              <Text style={styles.descriptionText}>
+                Self diagnose with the 3D Model
+              </Text>
             </View>
-            <TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
-            <Video
+            <TouchableOpacity
+              style={styles.videoContainer}
+              onPress={showControlsTemporarily}>
+              <Video
                 // ref={videoRef}
-                source={{ uri: URL_link }} // Replace with the path to your video file
-                style={[styles.video, { height: fullscreen ? '100%' : 300 }]}
-                paused={videoPaused} 
+                source={{uri: URL_link}} // Replace with the path to your video file
+                style={[styles.video, {height: fullscreen ? '100%' : 300}]}
+                paused={videoPaused}
                 resizeMode="contain" // This ensures the video fits within its container
                 onLoad={() => setVideoPaused(false)}
-                onError={(error) => console.error('Video playback error:', error)}
-            />
-            {controlsVisible && (
-            <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
-                <Image
+                onError={error => console.error('Video playback error:', error)}
+              />
+              {controlsVisible && (
+                <TouchableOpacity
+                  style={styles.playPauseButton}
+                  onPress={togglePlayPause}>
+                  <Image
                     style={styles.playPauseIcon}
                     source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
-                />
-            </TouchableOpacity>
-            )}
+                  />
+                </TouchableOpacity>
+              )}
             </TouchableOpacity>
-            </View>
-            <Text style={styles.checkboxLabel}>Check the symptom that you have </Text>
-            <Text style={styles.checkboxLabel}>ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න </Text>
-                    <View style={styles.checkboxContainer}>
-                        {symptomsGroups.map((group, index) => (
-                            <View key={index}>
-                                {group.map(symptom => (
-                                    <View style={styles.individualCheckboxContainer} key={symptom.key}>
-                                        <CheckBox
-                                            value={selectedSymptoms[symptom.key]}
-                                            onValueChange={() => toggleCheckbox(symptom.key)}
-                                        />
-                                        <Text style={styles.checkboxText}>{symptom.text}</Text>
-                                    </View>
-                                ))}
-                                {index !== symptomsGroups.length - 1 && (
-                                    <View style={styles.separator} />
-                                )}
-                            </View>
-                        ))}
-                    </View>
-                </View>
+          </View>
+          <Text style={styles.checkboxLabel}>
+            Check the symptom that you have{' '}
+          </Text>
+          <Text style={styles.checkboxLabel}>
+            ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න{' '}
+          </Text>
+          <View style={styles.checkboxContainer}>
+            {symptomsGroups.map((group, index) => (
+              <View key={index}>
+                {group.map(symptom => (
+                  <View
+                    style={styles.individualCheckboxContainer}
+                    key={symptom.key}>
+                    <CheckBox
+                      value={selectedSymptoms[symptom.key]}
+                      onValueChange={() => toggleCheckbox(symptom.key)}
+                    />
+                    <Text style={styles.checkboxText}>{symptom.text}</Text>
+                  </View>
+                ))}
+                {index !== symptomsGroups.length - 1 && (
+                  <View style={styles.separator} />
+                )}
+              </View>
+            ))}
+          </View>
+        </View>
 
-                <Button
-                    title="Evaluate the risk level"
-                    style={styles.nextButton}
-                    onPress={handleSubmit} 
-                />
-            </ScrollView>
-        </SafeAreaView>
-    );
+        <Button
+          title="Evaluate the risk level"
+          style={styles.nextButton}
+          onPress={handleSubmit}
+        />
+      </ScrollView>
+    </SafeAreaView>
+  );
 };
 
-
 const styles = StyleSheet.create({
-    scrollContainer: {
-        flexGrow: 1,
-    },
-    
+  scrollContainer: {
+    flexGrow: 1,
+  },
 
-    container: {
-        flexGrow: 1,
-        backgroundColor: COLORS.white,
-    },
-    topContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: COLORS.white,
+  container: {
+    flexGrow: 1,
+    backgroundColor: COLORS.white,
+  },
+  topContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: COLORS.white,
     // This creates the curve effect for the background
-    },
-    topicText: {
-        fontSize: 24,
-        fontWeight: 'bold',
-        color: COLORS.black,
-        textAlign: 'center',
-        marginVertical: 20,
-    },
-    descriptionText: {
-       fontSize: 18,
-        textAlign: 'center',
-        marginHorizontal: 20,
-        marginBottom: 20,
-        color:COLORS.white,
-        fontWeight: 'bold',
-    },
-    separator: {
-        height: 2,
+  },
+  topicText: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: COLORS.black,
+    textAlign: 'center',
+    marginVertical: 20,
+  },
+  descriptionText: {
+    fontSize: 18,
+    textAlign: 'center',
+    marginHorizontal: 20,
+    marginBottom: 20,
+    color: COLORS.white,
+    fontWeight: 'bold',
+  },
+  separator: {
+    height: 2,
     backgroundColor: COLORS.blue,
     marginVertical: 10,
-    width: '90%',  // Reduce width to see margins from container edges
-    alignSelf: 'center', 
-    marginLeft:-197,
+    width: '90%', // Reduce width to see margins from container edges
+    alignSelf: 'center',
+    marginLeft: -197,
+  },
 
-    },
-   
-    checkboxContainer: {
-        backgroundColor: COLORS.lightBlue,
-        borderRadius: 25,
-        width: '100%',  // Ensure it's taking the full width of its parent
-        alignSelf: 'center',  // This ensures it's centered relative to the parent
-        paddingTop: 10,
-        marginLeft:197,
-        
-       
-        
-    },
-    checkboxLabel: {
-        fontSize: 16,
-        
-        marginBottom: 10,
-        alignSelf: 'center',
-        color:COLORS.black,
-    },
-    checkboxRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: 10,
-    },
-    checkboxText: {
-        fontSize: 16,
-        marginLeft: 8,
-        flexShrink: 1,  // Allows the text to shrink and wrap onto the next line
-    },
-    submitButton: {
-        backgroundColor: COLORS.primary,
-        borderRadius: 20,
-        padding: 15,
-        marginVertical: 20,
-        width: '90%',
-        alignSelf: 'center',
-    },
-    bottomContainer: {
-        flex: 2,
-        justifyContent: 'flex-end',
-        marginBottom: 2,
-        marginTop:-20,
-        alignItems: 'center',
-        backgroundColor: COLORS.blue,
-        borderTopRightRadius: 85,
-        borderTopLeftRadius: 85,
-       
-    },
-    nextButton: {
-        width: '70%',
-        paddingVertical: 10,
-        marginBottom: 80, // Adjust the margin to move the button up further if necessary
-        backgroundColor: COLORS.white,
-        borderRadius: 20,
-        alignSelf: 'center',
-        
-    },
-    videoContainer: {
-        width: '100%',
-        aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: 'black'
-    },
-    video: {
-        width: '110%',
-        height: '100%',
-    },
+  checkboxContainer: {
+    backgroundColor: COLORS.lightBlue,
+    borderRadius: 25,
+    width: '100%', // Ensure it's taking the full width of its parent
+    alignSelf: 'center', // This ensures it's centered relative to the parent
+    paddingTop: 10,
+    marginLeft: 197,
+  },
+  checkboxLabel: {
+    fontSize: 16,
 
-    individualCheckboxContainer: {
-        backgroundColor: COLORS.white, // Set the background color to white
-        borderRadius: 10, // Set border radius for rounded corners
-        padding: 10, // Add some padding around the content
-        marginBottom: 10, // Add bottom margin for spacing between items
-        flexDirection: 'row', // Align checkbox and label in a row
-        alignItems: 'center', // Center align items vertically
-        borderWidth: 0.6, // Optional border width
-        width: '98%', // Width 100% to fill container width
-        marginLeft:-95,
-        elevation: 6,
-        minHeight: 50,
+    marginBottom: 10,
+    alignSelf: 'center',
+    color: COLORS.black,
+  },
+  checkboxRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  checkboxText: {
+    fontSize: 16,
+    marginLeft: 8,
+    flexShrink: 1, // Allows the text to shrink and wrap onto the next line
+  },
+  submitButton: {
+    backgroundColor: COLORS.primary,
+    borderRadius: 20,
+    padding: 15,
+    marginVertical: 20,
+    width: '90%',
+    alignSelf: 'center',
+  },
+  bottomContainer: {
+    flex: 2,
+    justifyContent: 'flex-end',
+    marginBottom: 2,
+    marginTop: -20,
+    alignItems: 'center',
+    backgroundColor: COLORS.blue,
+    borderTopRightRadius: 85,
+    borderTopLeftRadius: 85,
+  },
+  nextButton: {
+    width: '70%',
+    paddingVertical: 10,
+    marginBottom: 80, // Adjust the margin to move the button up further if necessary
+    backgroundColor: COLORS.white,
+    borderRadius: 20,
+    alignSelf: 'center',
+  },
+  videoContainer: {
+    width: '100%',
+    aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'black',
+  },
+  video: {
+    width: '110%',
+    height: '100%',
+  },
 
-    },
+  individualCheckboxContainer: {
+    backgroundColor: COLORS.white, // Set the background color to white
+    borderRadius: 10, // Set border radius for rounded corners
+    padding: 10, // Add some padding around the content
+    marginBottom: 10, // Add bottom margin for spacing between items
+    flexDirection: 'row', // Align checkbox and label in a row
+    alignItems: 'center', // Center align items vertically
+    borderWidth: 0.6, // Optional border width
+    width: '98%', // Width 100% to fill container width
+    marginLeft: -95,
+    elevation: 6,
+    minHeight: 50,
+  },
 
-    fullscreenButton: {
-        marginTop: 10,
-        backgroundColor: 'rgba(0, 0, 0, 0.8)',
-        padding: 10,
-        borderRadius: 5,
-    },
-    fullscreenButtonText: {
-        color: '#fff',
-    },
+  fullscreenButton: {
+    marginTop: 10,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    padding: 10,
+    borderRadius: 5,
+  },
+  fullscreenButtonText: {
+    color: '#fff',
+  },
 
-    videoBox: {
-        backgroundColor: '#11324D', // Set background color to white
-        borderWidth: 2, // Set the border width
-        borderColor: '#80BCBD', // Set the border color
-        borderRadius: 10, // Set border radius for rounded corners
-        padding: 20, // Add padding around the content
-        marginBottom: 40, // Add bottom margin for spacing
-        width: '100%', // Adjust the width as necessary
-        alignSelf: 'center', // Center the box within its container
-        // Add shadows for elevation effect (optional)
-        shadowColor: "#000",
-        shadowOffset: {
-            width: 0,
-            height: 2,
-        },
-        shadowOpacity: 0.25,
-        shadowRadius: 3.84,
-        elevation: 5,
+  videoBox: {
+    backgroundColor: '#11324D', // Set background color to white
+    borderWidth: 2, // Set the border width
+    borderColor: '#80BCBD', // Set the border color
+    borderRadius: 10, // Set border radius for rounded corners
+    padding: 20, // Add padding around the content
+    marginBottom: 40, // Add bottom margin for spacing
+    width: '100%', // Adjust the width as necessary
+    alignSelf: 'center', // Center the box within its container
+    // Add shadows for elevation effect (optional)
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
     },
-  
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
 
-    playPauseButton: {
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        bottom:'30%',
-        transform: [{ translateX: -25 }, { translateY: -25 }],
-        width: 50,
-        height: 50,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    playPauseIcon: {
-        width: 50,
-        height: 50,
-    },
+  playPauseButton: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    bottom: '30%',
+    transform: [{translateX: -25}, {translateY: -25}],
+    width: 50,
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playPauseIcon: {
+    width: 50,
+    height: 50,
+  },
 
-    contentContainer: {
-        paddingBottom: 20, // Adds padding at the bottom
+  contentContainer: {
+    paddingBottom: 20, // Adds padding at the bottom
+  },
+  qrCodeBox: {
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+    backgroundColor: COLORS.white,
+    marginBottom: 40,
+    shadowColor: '#000',
+    borderColor: '#80BCBD',
+    borderWidth: 2,
+    borderRadius: 10,
+    shadowOffset: {
+      width: 0,
+      height: 2,
     },
-    qrCodeBox: {
-        width: '90%',
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: 20,
-        backgroundColor: COLORS.white,
-        marginBottom: 40,
-        shadowColor: "#000",
-        borderColor: '#80BCBD',
-        borderWidth: 2,
-        borderRadius: 10,
-        shadowOffset: {
-            width: 0,
-            height: 2,
-        },
-        shadowOpacity: 0.25,
-        shadowRadius: 3.84,
-        elevation: 5,
-        marginTop:16
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    marginTop: 16,
+  },
+  qrCodeImage: {
+    width: 200, // Adjust size as needed
+    height: 200, // Adjust size as needed
+  },
+  orButton: {
+    marginTop: 30,
+    backgroundColor: COLORS.primary,
+    padding: 10,
+    borderRadius: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  orButtonText: {
+    color: COLORS.white,
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  qrCodeBox1: {
+    width: '95%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 30,
+    backgroundColor: COLORS.white,
+    marginBottom: 40,
+    shadowColor: '#000',
+    borderColor: '#80BCBD',
+    borderWidth: 2,
+    borderRadius: 10,
+    shadowOffset: {
+      width: 0,
+      height: 2,
     },
-    qrCodeImage: {
-        width: 200, // Adjust size as needed
-        height: 200, // Adjust size as needed
-    },
-    orButton: {
-        marginTop: 30,
-        backgroundColor: COLORS.primary,
-        padding: 10,
-        borderRadius: 5,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    orButtonText: {
-        color: COLORS.white,
-        fontSize: 14,
-        fontWeight: 'bold',
-    },
-    qrCodeBox1: {
-        width: '95%',
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: 30,
-        backgroundColor: COLORS.white,
-        marginBottom: 40,
-        shadowColor: "#000",
-        borderColor: '#80BCBD',
-        borderWidth: 2,
-        borderRadius: 10,
-        shadowOffset: {
-            width: 0,
-            height: 2,
-        },
-        shadowOpacity: 0.25,
-        shadowRadius: 3.84,
-        elevation: 10,
-        marginTop:10
-    },
-   
-    qrCodeImage1:{
-        width: 210, // Adjust size as needed
-        height: 170,
-    },
-    dscriptionText1: {
-        fontSize: 14,
-        textAlign: 'center',
-        color: COLORS.darkGray,
-        marginTop: 20,
-        marginBottom: 20,
-    }
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 10,
+    marginTop: 10,
+  },
+
+  qrCodeImage1: {
+    width: 210, // Adjust size as needed
+    height: 170,
+  },
+  dscriptionText1: {
+    fontSize: 14,
+    textAlign: 'center',
+    color: COLORS.darkGray,
+    marginTop: 20,
+    marginBottom: 20,
+  },
 
-   
-    
-    // ... possibly other styles
+  // ... possibly other styles
 });
 
 export default AdditionalSymptomsScreen2;

src/screens/home/skin/SkinUploader.js

-import React, { useState } from 'react';
-import { View, StyleSheet, Image, TouchableOpacity, PermissionsAndroid, Text, ScrollView } from 'react-native';
-import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
-import { COLORS, IMGS, ROUTES } from '../../../constants';
+import React, {useState} from 'react';
+import {
+  View,
+  StyleSheet,
+  Image,
+  TouchableOpacity,
+  PermissionsAndroid,
+  Text,
+  ScrollView,
+  ActivityIndicator,
+} from 'react-native';
+import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
+import {COLORS, IMGS, ROUTES} from '../../../constants';
 import Button from '../../../components/Button';
 import axios from 'axios'; // Import Axios
 
-const Camera = ({ navigation }) => {
-    const [cameraPhoto, setCameraPhoto] = useState();
-    const [galleryPhoto, setGalleryPhoto] = useState();
-    const REACT_APP_API_URL='https://us-central1-skin-condition-detection.cloudfunctions.net/predict';
-    const [prediction, setPrediction] = useState(null);
+const Camera = ({navigation}) => {
+  const [cameraPhoto, setCameraPhoto] = useState();
+  const [galleryPhoto, setGalleryPhoto] = useState();
+  const REACT_APP_API_URL =
+    'https://us-central1-skin-condition-detection.cloudfunctions.net/predict';
+  const [prediction, setPrediction] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [photo, setPhoto] = useState(null);
 
-    const [photo, setPhoto] = useState(null);
+  let options = {
+    saveToPhotos: true,
+    mediaType: 'photo',
+  };
 
-    
+  const openCamera = async () => {
+    const granted = await PermissionsAndroid.request(
+      PermissionsAndroid.PERMISSIONS.CAMERA,
+    );
+    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+      const result = await launchCamera(options);
+      if (result.assets) {
+        setPhoto(result.assets[0].uri);
+        submitPhoto(result.assets[0].uri);
+      }
+    }
+  };
+
+  const openGallery = async () => {
+    const result = await launchImageLibrary(options);
+    if (result.assets) {
+      setPhoto(result.assets[0].uri);
+      submitPhoto(result.assets[0].uri);
+    }
+  };
 
-    let options = {
-        saveToPhotos: true,
-        mediaType: 'photo',
-    };
+  const submitPhoto = async photoUri => {
+    try {
+      const formData = new FormData();
+      formData.append('file', {
+        uri: photoUri,
+        type: 'image/jpeg',
+        name: 'photo.jpg',
+      });
 
-    const openCamera = async () => {
-        const granted = await PermissionsAndroid.request(
-            PermissionsAndroid.PERMISSIONS.CAMERA,
-        );
-        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
-            const result = await launchCamera(options);
-            if (result.assets) {
-                setPhoto(result.assets[0].uri);
-                submitPhoto(result.assets[0].uri);
-            }
-        }
-    };
+      const response = await axios.post(REACT_APP_API_URL, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
 
-    const openGallery = async () => {
-        const result = await launchImageLibrary(options);
-        if (result.assets) {
-            setPhoto(result.assets[0].uri);
-            submitPhoto(result.assets[0].uri);
-        }
-    };
+      if (response.status === 200) {
+        setPrediction(response.data); // Set prediction state with the received data
+      } else {
+        console.error('Error:', response.status);
+      }
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
 
-    const submitPhoto = async (photoUri) => {
-        try {
-            const formData = new FormData();
-            formData.append('file', {
-                uri: photoUri,
-                type: 'image/jpeg',
-                name: 'photo.jpg',
-            });
-    
-            const response = await axios.post(REACT_APP_API_URL, formData, {
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                },
-            });
-    
-            if (response.status === 200) {
-                setPrediction(response.data); // Set prediction state with the received data
-            } else {
-                console.error('Error:', response.status);
-            }
-        } catch (error) {
-            console.error('Error:', error);
-        }
-    };
+  const handleContinue = () => {
+    let route; // Variable to store the route name
 
+    // Check the class and assign the route accordingly
+    if (prediction && prediction.class) {
+      switch (prediction.class) {
+        case 'Discoid':
+          route = ROUTES.SKIN_VIDEO;
+          break;
+        case 'Herpes HPV':
+          route = ROUTES.SKIN_VIDEO5;
+          break;
+        case 'Maculopapular':
+          route = ROUTES.SKIN_VIDEO2;
+          break;
+        case 'Melanoma':
+          route = ROUTES.SKIN_VIDEO3;
+          break;
+        case 'patechiae':
+          route = ROUTES.SKIN_VIDEO4;
+          break;
+        case 'PUPP Hives':
+          route = ROUTES.SKIN_VIDEO1;
+          break;
+        default:
+          route = ROUTES.SKIN_VIDEO1; // Define this route in your ROUTES constant
+      }
+      navigation.navigate(route);
+    } else {
+      // Handle the scenario where prediction or prediction.class is undefined
+      // Maybe navigate to an error page or show an alert
+      console.log('No valid prediction available.');
+      // navigation.navigate(ROUTES.DEFAULT_ROUTE); // Example fallback
+    }
+  };
 
-    const handleContinue = () => {
-        let route; // Variable to store the route name
-    
-        // Check the class and assign the route accordingly
-        if (prediction && prediction.class) {
-            switch (prediction.class) {
-                case 'Discoid':
-                    route = ROUTES.SKIN_VIDEO;
-                    break;
-                case 'Herpes HPV':
-                    route = ROUTES.SKIN_VIDEO5;
-                    break;
-                case 'Maculopapular':
-                    route = ROUTES.SKIN_VIDEO2;
-                    break;
-                case 'Melanoma':
-                    route = ROUTES.SKIN_VIDEO3;
-                    break;
-                case 'patechiae':
-                    route = ROUTES.SKIN_VIDEO4;
-                    break;
-                case 'PUPP Hives':
-                    route = ROUTES.SKIN_VIDEO1;
-                    break;
-                default:
-                    route = ROUTES.SKIN_VIDEO1; // Define this route in your ROUTES constant
-            }
-            navigation.navigate(route);
-        } else {
-            // Handle the scenario where prediction or prediction.class is undefined
-            // Maybe navigate to an error page or show an alert
-            console.log("No valid prediction available.");
-            // navigation.navigate(ROUTES.DEFAULT_ROUTE); // Example fallback
-        }
-    };
+  return (
+    <View style={styles.container}>
+      <View style={styles.topContainer}>
+        <Text style={styles.topicText}>Skin Diagnostic Photo Upload</Text>
 
- 
+        <Image style={styles.babyImage} source={IMGS.sk_1} />
 
-    return (
-        <View style={styles.container}>
-            <View style={styles.topContainer}>
-            <Text style={styles.topicText}>Skin Diagnostic Photo Upload</Text>
-            
-                <Image style={styles.babyImage} source={IMGS.sk_1} />
-            
-                <View style={styles.buttonContainer}>
-                <TouchableOpacity onPress={openGallery} style={[styles.button, styles.buttonLeft]}>
-                <Image source={IMGS.sk_3} style={styles.buttonImage} />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={openCamera} style={[styles.button, styles.buttonRight]}>
-                <Image source={IMGS.sk_2} style={styles.buttonImage} />
-                </TouchableOpacity>
-                </View>
-                {photo && (
-                    <View style={styles.photoContainer}>
-                        <Image source={{ uri: photo }} style={styles.photo} />
-                    </View>
-                )}
-            </View>
-            <Text style={styles.descriptionText}>'Use phone camera or select a photo from the gallery that clearly shows your skin.'</Text>
-            <View style={styles.bottomContainer}>
-            {!prediction && (
-             <>
-             <Text style={styles.resultsHeading}>Results will appear below</Text>
-           </>
-            
+        <View style={styles.buttonContainer}>
+          <TouchableOpacity
+            onPress={openGallery}
+            style={[styles.button, styles.buttonLeft]}>
+            <Image source={IMGS.sk_3} style={styles.buttonImage} />
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={openCamera}
+            style={[styles.button, styles.buttonRight]}>
+            <Image source={IMGS.sk_2} style={styles.buttonImage} />
+          </TouchableOpacity>
+        </View>
+        {photo && (
+          <View style={styles.photoContainer}>
+            <Image source={{uri: photo}} style={styles.photo} />
+          </View>
         )}
-            {prediction && (
-            <View style={styles.predictionContainer}>
-                <Text style={styles.predictionText}>Diagnosed Condition | හඳුනාගත් සමේ ආසාදනය: {prediction.class}</Text>
-                 <Text style={styles.predictionText}>How sure are we | නිරවද්යතාව: {prediction.confidence}</Text>
-            </View>
+      </View>
+      <Text style={styles.descriptionText}>
+        'Use phone camera or select a photo from the gallery that clearly shows
+        your skin.'
+      </Text>
+      <View style={styles.bottomContainer}>
+        {loading ? (
+          <View style={styles.loaderContainer}>
+            <ActivityIndicator size="large" color={COLORS.primary} />
+          </View>
+        ) : (
+          <>
+            {!prediction && (
+              <>
+                <Text style={styles.resultsHeading}>
+                  Results will appear below
+                </Text>
+              </>
+            )}
+            {!loading && prediction && (
+              <View style={styles.predictionContainer}>
+                <Text style={styles.predictionText}>
+                  Diagnosed Condition | හඳුනාගත් සමේ ආසාදනය: {prediction.class}
+                </Text>
+                <Text style={styles.predictionText}>
+                  How sure are we | නිරවද්යතාව: {prediction.confidence}
+                </Text>
+              </View>
             )}
             <Button
-                    title="Take your next step"
-                    style={styles.nextButton}
-                    onPress={handleContinue}
-                />
-            </View>
-        </View>
-    );
+              title="Take your next step"
+              style={styles.nextButton}
+              onPress={handleContinue}
+            />
+          </>
+        )}
+      </View>
+    </View>
+  );
 };
 const styles = StyleSheet.create({
-        container: {
-            flexGrow: 1,
-            backgroundColor: COLORS.white,
-        },
+  container: {
+    flexGrow: 1,
+    backgroundColor: COLORS.white,
+  },
 
-        predictionText: {
-            fontSize: 16,
-            color: '#000', // Text color
-            textAlign: 'center',
-            marginBottom: 5, // Space between text lines
-        },
+  predictionText: {
+    fontSize: 16,
+    color: '#000', // Text color
+    textAlign: 'center',
+    marginBottom: 5, // Space between text lines
+  },
 
-        topContainer: {
-            flex: 3,
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: COLORS.white,
-        // This creates the curve effect for the background
-        },
+  topContainer: {
+    flex: 3,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: COLORS.white,
+    // This creates the curve effect for the background
+  },
 
+  buttonContainer: {
+    flexDirection: 'row',
+    marginTop: -26,
+    alignSelf: 'center', // Center the button container
+    borderRadius: 30,
+    overflow: 'hidden',
+    maxWidth: 300, // Set the max width for the container
+    borderWidth: 1, // Border for the whole container
+    borderColor: COLORS.blue, // Color of the container border and the separator line
+  },
+  button: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 10,
+    backgroundColor: COLORS.white, // White background for the buttons
+    // Adding border only for the right button to act as the line separator
+  },
+  buttonImage: {
+    width: 50, // Adjust as necessary for your design
+    height: 50, // Adjust as necessary for your design
+    resizeMode: 'contain',
+  },
 
-        buttonContainer: {
-            flexDirection: 'row',
-            marginTop: -26,
-            alignSelf: 'center', // Center the button container
-            borderRadius: 30,
-            overflow: 'hidden',
-            maxWidth: 300, // Set the max width for the container
-            borderWidth: 1, // Border for the whole container
-            borderColor: COLORS.blue, // Color of the container border and the separator line
-        },
-        button: {
-            flex: 1,
-            alignItems: 'center',
-            justifyContent: 'center',
-            paddingVertical: 10,
-            backgroundColor: COLORS.white, // White background for the buttons
-            // Adding border only for the right button to act as the line separator
-        },
-        buttonImage: {
-            width: 50, // Adjust as necessary for your design
-            height: 50, // Adjust as necessary for your design
-            resizeMode: 'contain',
-        },
-
-        buttonLeft: {
-            borderTopLeftRadius: 30, // Rounded left-top edge
-            borderBottomLeftRadius: 30, // Rounded left-bottom edge
-            borderRightWidth: 1, // Separator line
-            borderColor: COLORS.lightGray, // Color of the separator line
-        },
+  buttonLeft: {
+    borderTopLeftRadius: 30, // Rounded left-top edge
+    borderBottomLeftRadius: 30, // Rounded left-bottom edge
+    borderRightWidth: 1, // Separator line
+    borderColor: COLORS.lightGray, // Color of the separator line
+  },
 
-        buttonRight: {
-            borderTopRightRadius: 30, // Rounded right-top edge
-            borderBottomRightRadius: 30, // Rounded right-bottom edge
-        },
-        
-        babyImage: {
-            width: 100,
-            height: 100,
-            resizeMode: 'contain',
-            marginVertical: 20,
-        },
-        topicText: {
-            fontSize: 22,
-            fontWeight: 'bold',
-            color: COLORS.black,
-            textAlign: 'center',
-            marginBottom: 20,
-        },
-        descriptionText: {
-            fontSize: 16,
-            textAlign: 'center',
-            marginHorizontal: 10,
-            marginBottom: -10,
-            marginTop:-40
-        },
-        bottomContainer: {
-            flex: 2,
-            justifyContent: 'flex-end',
-            marginBottom: 2,
-            marginTop:20,
-            alignItems: 'center',
-            backgroundColor: COLORS.blue,
-            borderTopRightRadius: 75,
-            borderTopLeftRadius: 75,
-           
-        },
-        nextButton: {
-            width: '90%',
-            paddingVertical: 10,
-            marginBottom: 80, // Adjust the margin to move the button up further if necessary
-            backgroundColor: COLORS.white,
-            borderRadius: 20,
-            alignSelf: 'center',
-            
-        },
+  buttonRight: {
+    borderTopRightRadius: 30, // Rounded right-top edge
+    borderBottomRightRadius: 30, // Rounded right-bottom edge
+  },
 
-        photoContainer: {
-            elevation: 4, // Android shadow
-            shadowColor: '#000', // iOS shadow
-            shadowOffset: { width: 0, height: 2 }, // iOS shadow
-            shadowOpacity: 0.1, // iOS shadow
-            shadowRadius: 2, // iOS shadow
-            borderRadius: 10,
-            marginTop: 20,
-            marginBottom: 20,
-        },
-        photo: {
-            width: 100,
-            height: 100,
-            borderRadius: 10,
-        },
+  babyImage: {
+    width: 100,
+    height: 100,
+    resizeMode: 'contain',
+    marginVertical: 20,
+  },
+  topicText: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    color: COLORS.black,
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  descriptionText: {
+    fontSize: 16,
+    textAlign: 'center',
+    marginHorizontal: 10,
+    marginBottom: -10,
+    marginTop: -40,
+  },
+  bottomContainer: {
+    flex: 2,
+    justifyContent: 'flex-end',
+    marginBottom: 2,
+    marginTop: 20,
+    alignItems: 'center',
+    backgroundColor: COLORS.blue,
+    borderTopRightRadius: 75,
+    borderTopLeftRadius: 75,
+  },
+  nextButton: {
+    width: '90%',
+    paddingVertical: 10,
+    marginBottom: 80, // Adjust the margin to move the button up further if necessary
+    backgroundColor: COLORS.white,
+    borderRadius: 20,
+    alignSelf: 'center',
+  },
 
-        predictionContainer: {
-            width: '80%',
-            backgroundColor: COLORS.white, // White background for the prediction box
-            borderRadius: 10,
-            padding: 15,
-            marginVertical: 20, // Adjust as needed
-            alignSelf: 'center',
-            alignItems: 'center',
-            justifyContent: 'center',
-            // Add shadows if you like for better visual separation
-            elevation: 4, // Android shadow
-            shadowColor: '#000', // iOS shadow
-            shadowOffset: { width: 0, height: 2 }, // iOS shadow
-            shadowOpacity: 0.1, // iOS shadow
-            shadowRadius: 2, // iOS shadow
-            bottom:75,
-            top:-10
-        },
-        resultsHeading: {
-            fontSize: 16,
-            color: '#000',
-            fontWeight: 'bold',
-            padding: 10,
-            textAlign: 'center',
-            marginBottom: 90,
-            marginLeft:0
-        },
+  photoContainer: {
+    elevation: 4, // Android shadow
+    shadowColor: '#000', // iOS shadow
+    shadowOffset: {width: 0, height: 2}, // iOS shadow
+    shadowOpacity: 0.1, // iOS shadow
+    shadowRadius: 2, // iOS shadow
+    borderRadius: 10,
+    marginTop: 20,
+    marginBottom: 20,
+  },
+  photo: {
+    width: 100,
+    height: 100,
+    borderRadius: 10,
+  },
 
+  predictionContainer: {
+    width: '80%',
+    backgroundColor: COLORS.white, // White background for the prediction box
+    borderRadius: 10,
+    padding: 15,
+    marginVertical: 20, // Adjust as needed
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // Add shadows if you like for better visual separation
+    elevation: 4, // Android shadow
+    shadowColor: '#000', // iOS shadow
+    shadowOffset: {width: 0, height: 2}, // iOS shadow
+    shadowOpacity: 0.1, // iOS shadow
+    shadowRadius: 2, // iOS shadow
+    bottom: 75,
+    top: -10,
+  },
+  resultsHeading: {
+    fontSize: 16,
+    color: '#000',
+    fontWeight: 'bold',
+    padding: 10,
+    textAlign: 'center',
+    marginBottom: 90,
+    marginLeft: 0,
+  },
 
-        resultImage: {
-            width: 100, // Set your desired width
-            height: 100, // Set your desired height
-            alignSelf: 'center',
-            marginVertical: 20, // Adjust margin as needed
-          },
-    
-    });
+  resultImage: {
+    width: 100, // Set your desired width
+    height: 100, // Set your desired height
+    alignSelf: 'center',
+    marginVertical: 20, // Adjust margin as needed
+  },
+  loaderContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
 
 export default Camera;
-