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 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
+    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);
@@ -22,39 +39,37 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
   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 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: '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: '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 |පිටුපස මාංශ පේශි වේදනාව'},
-            
+      {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);
   };
@@ -63,7 +78,7 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
     setLoading(true);
   };
 
-    const toggleCheckbox = (symptom) => {
+  const toggleCheckbox = symptom => {
     setSelectedSymptoms(prevState => ({
       ...prevState,
       [symptom]: !prevState[symptom],
@@ -72,12 +87,23 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
 
   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 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' });
+      navigation.navigate(ROUTES.SKIN_RISK, {
+        origin: 'AdditionalSymptomsScreen2',
+      });
     } else {
       navigation.navigate(ROUTES.SKIN_INFO);
     }
@@ -119,7 +145,9 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
 
   return (
     <SafeAreaView style={styles.container}>
-      <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
+      <ScrollView
+        style={styles.scrollContainer}
+        contentContainerStyle={styles.contentContainer}>
         <View style={styles.topContainer}>
           <Text style={styles.topicText}>Discoid Additional Symptoms </Text>
           <View style={styles.qrCodeBox1}>
@@ -128,17 +156,28 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
               style={styles.qrCodeImage1}
             />
             <Text style={styles.dscriptionText1}>
-                        මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත. 
-                        වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
+              මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ
+              සඳහා වීඩියෝවක් ලබා දී ඇත. වීඩියෝව පැහැදිලි නොවේ නම්, පහත 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.
+              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}} />
+          <Image
+            source={IMGS.sk_25}
+            style={{
+              width: '50%',
+              height: imageHeight,
+              alignSelf: 'center',
+              resizeMode: 'contain',
+              marginBottom: -45,
+              marginTop: -24,
+            }}
+          />
 
           <View style={styles.qrCodeBox}>
             <Image
@@ -147,7 +186,9 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
             />
             <TouchableOpacity
               style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
+              onPress={() =>
+                Linking.openURL('https://mywebar.com/p/Project_4_lpf4ury2jc')
+              }>
               <Text style={styles.orButtonText}>OR Click This</Text>
             </TouchableOpacity>
           </View>
@@ -157,18 +198,22 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
                 Self diagnose with the 3D Model
               </Text>
             </View>
-            <TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
+            <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 }]}
+                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)}
+                onError={error => console.error('Video playback error:', error)}
               />
               {controlsVisible && (
-            <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
+                <TouchableOpacity
+                  style={styles.playPauseButton}
+                  onPress={togglePlayPause}>
                   <Image
                     style={styles.playPauseIcon}
                     source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
@@ -177,13 +222,19 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
               )}
             </TouchableOpacity>
           </View>
-            <Text style={styles.checkboxLabel}>Check the symptom that you have </Text>
-            <Text style={styles.checkboxLabel}>ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න </Text>
+          <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}>
+                  <View
+                    style={styles.individualCheckboxContainer}
+                    key={symptom.key}>
                     <CheckBox
                       value={selectedSymptoms[symptom.key]}
                       onValueChange={() => toggleCheckbox(symptom.key)}
@@ -209,13 +260,11 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
   );
 };
 
-
 const styles = StyleSheet.create({
   scrollContainer: {
     flexGrow: 1,
   },
 
-
   container: {
     flexGrow: 1,
     backgroundColor: COLORS.white,
@@ -239,7 +288,7 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     marginHorizontal: 20,
     marginBottom: 20,
-        color:COLORS.white,
+    color: COLORS.white,
     fontWeight: 'bold',
   },
   separator: {
@@ -248,8 +297,7 @@ const styles = StyleSheet.create({
     marginVertical: 10,
     width: '90%', // Reduce width to see margins from container edges
     alignSelf: 'center',
-    marginLeft:-197,
-
+    marginLeft: -197,
   },
 
   checkboxContainer: {
@@ -258,17 +306,14 @@ const styles = StyleSheet.create({
     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,
-        
-       
-        
+    marginLeft: 197,
   },
   checkboxLabel: {
     fontSize: 16,
 
     marginBottom: 10,
     alignSelf: 'center',
-        color:COLORS.black,
+    color: COLORS.black,
   },
   checkboxRow: {
     flexDirection: 'row',
@@ -292,12 +337,11 @@ const styles = StyleSheet.create({
     flex: 2,
     justifyContent: 'flex-end',
     marginBottom: 2,
-        marginTop:-20,
+    marginTop: -20,
     alignItems: 'center',
     backgroundColor: COLORS.blue,
     borderTopRightRadius: 85,
     borderTopLeftRadius: 85,
-       
   },
   nextButton: {
     width: '70%',
@@ -306,14 +350,13 @@ const styles = StyleSheet.create({
     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'
+    backgroundColor: 'black',
   },
   video: {
     width: '110%',
@@ -329,10 +372,9 @@ const styles = StyleSheet.create({
     alignItems: 'center', // Center align items vertically
     borderWidth: 0.6, // Optional border width
     width: '98%', // Width 100% to fill container width
-        marginLeft:-95,
+    marginLeft: -95,
     elevation: 6,
     minHeight: 50,
-
   },
 
   fullscreenButton: {
@@ -355,7 +397,7 @@ const styles = StyleSheet.create({
     width: '100%', // Adjust the width as necessary
     alignSelf: 'center', // Center the box within its container
     // Add shadows for elevation effect (optional)
-        shadowColor: "#000",
+    shadowColor: '#000',
     shadowOffset: {
       width: 0,
       height: 2,
@@ -365,13 +407,12 @@ const styles = StyleSheet.create({
     elevation: 5,
   },
 
-
   playPauseButton: {
     position: 'absolute',
     top: '50%',
     left: '50%',
-        bottom:'30%',
-        transform: [{ translateX: -25 }, { translateY: -25 }],
+    bottom: '30%',
+    transform: [{translateX: -25}, {translateY: -25}],
     width: 50,
     height: 50,
     justifyContent: 'center',
@@ -392,7 +433,7 @@ const styles = StyleSheet.create({
     padding: 20,
     backgroundColor: COLORS.white,
     marginBottom: 40,
-        shadowColor: "#000",
+    shadowColor: '#000',
     borderColor: '#80BCBD',
     borderWidth: 2,
     borderRadius: 10,
@@ -403,7 +444,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 5,
-        marginTop:16
+    marginTop: 16,
   },
   qrCodeImage: {
     width: 200, // Adjust size as needed
@@ -429,7 +470,7 @@ const styles = StyleSheet.create({
     padding: 30,
     backgroundColor: COLORS.white,
     marginBottom: 40,
-        shadowColor: "#000",
+    shadowColor: '#000',
     borderColor: '#80BCBD',
     borderWidth: 2,
     borderRadius: 10,
@@ -440,10 +481,10 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 10,
-        marginTop:10
+    marginTop: 10,
   },
 
-    qrCodeImage1:{
+  qrCodeImage1: {
     width: 210, // Adjust size as needed
     height: 170,
   },
@@ -453,9 +494,7 @@ const styles = StyleSheet.create({
     color: COLORS.darkGray,
     marginTop: 20,
     marginBottom: 20,
-    }
-
-   
+  },
 
   // ... possibly other styles
 });

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 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 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);
 
-    
-
   let options = {
     saveToPhotos: true,
     mediaType: 'photo',
@@ -41,7 +49,7 @@ const Camera = ({ navigation }) => {
     }
   };
 
-    const submitPhoto = async (photoUri) => {
+  const submitPhoto = async photoUri => {
     try {
       const formData = new FormData();
       formData.append('file', {
@@ -66,7 +74,6 @@ const Camera = ({ navigation }) => {
     }
   };
 
-
   const handleContinue = () => {
     let route; // Variable to store the route name
 
@@ -98,13 +105,11 @@ const Camera = ({ navigation }) => {
     } 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.");
+      console.log('No valid prediction available.');
       // navigation.navigate(ROUTES.DEFAULT_ROUTE); // Example fallback
     }
   };
 
- 
-
   return (
     <View style={styles.container}>
       <View style={styles.topContainer}>
@@ -113,31 +118,49 @@ const Camera = ({ navigation }) => {
         <Image style={styles.babyImage} source={IMGS.sk_1} />
 
         <View style={styles.buttonContainer}>
-                <TouchableOpacity onPress={openGallery} style={[styles.button, styles.buttonLeft]}>
+          <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]}>
+          <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} />
+            <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>
+      <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>
+                <Text style={styles.resultsHeading}>
+                  Results will appear below
+                </Text>
               </>
-            
             )}
-            {prediction && (
+            {!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>
+                <Text style={styles.predictionText}>
+                  Diagnosed Condition | හඳුනාගත් සමේ ආසාදනය: {prediction.class}
+                </Text>
+                <Text style={styles.predictionText}>
+                  How sure are we | නිරවද්යතාව: {prediction.confidence}
+                </Text>
               </View>
             )}
             <Button
@@ -145,6 +168,8 @@ const Camera = ({ navigation }) => {
               style={styles.nextButton}
               onPress={handleContinue}
             />
+          </>
+        )}
       </View>
     </View>
   );
@@ -170,7 +195,6 @@ const styles = StyleSheet.create({
     // This creates the curve effect for the background
   },
 
-
   buttonContainer: {
     flexDirection: 'row',
     marginTop: -26,
@@ -225,18 +249,17 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     marginHorizontal: 10,
     marginBottom: -10,
-            marginTop:-40
+    marginTop: -40,
   },
   bottomContainer: {
     flex: 2,
     justifyContent: 'flex-end',
     marginBottom: 2,
-            marginTop:20,
+    marginTop: 20,
     alignItems: 'center',
     backgroundColor: COLORS.blue,
     borderTopRightRadius: 75,
     borderTopLeftRadius: 75,
-           
   },
   nextButton: {
     width: '90%',
@@ -245,13 +268,12 @@ const styles = StyleSheet.create({
     backgroundColor: COLORS.white,
     borderRadius: 20,
     alignSelf: 'center',
-            
   },
 
   photoContainer: {
     elevation: 4, // Android shadow
     shadowColor: '#000', // iOS shadow
-            shadowOffset: { width: 0, height: 2 }, // iOS shadow
+    shadowOffset: {width: 0, height: 2}, // iOS shadow
     shadowOpacity: 0.1, // iOS shadow
     shadowRadius: 2, // iOS shadow
     borderRadius: 10,
@@ -276,11 +298,11 @@ const styles = StyleSheet.create({
     // Add shadows if you like for better visual separation
     elevation: 4, // Android shadow
     shadowColor: '#000', // iOS shadow
-            shadowOffset: { width: 0, height: 2 }, // iOS shadow
+    shadowOffset: {width: 0, height: 2}, // iOS shadow
     shadowOpacity: 0.1, // iOS shadow
     shadowRadius: 2, // iOS shadow
-            bottom:75,
-            top:-10
+    bottom: 75,
+    top: -10,
   },
   resultsHeading: {
     fontSize: 16,
@@ -289,18 +311,20 @@ const styles = StyleSheet.create({
     padding: 10,
     textAlign: 'center',
     marginBottom: 90,
-            marginLeft:0
+    marginLeft: 0,
   },
 
-
   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;
-