add_info

src/constants/routes.js

@@ -35,5 +35,10 @@ export default {
   SKIN_VIDEO3: 'Skin_Video3',
   SKIN_VIDEO4: 'Skin_Video4',
   SKIN_VIDEO5: 'Skin_Video5',
-  SKIN_INFO:'skin_info'
+  SKIN_INFO:'skin_info',
+  SKIN_INFO2:'skin_info2',
+  SKIN_INFO3:'skin_info3',
+  SKIN_INFO4:'skin_info4',
+  SKIN_INFO5:'skin_info5',
+  SKIN_INFO6:'skin_info6'
 };

src/navigations/SkinNavigator.js

@@ -10,6 +10,11 @@ import AdditionalSymptoms3 from '../screens/home/skin/AdditionalSymptoms3';
 import AdditionalSymptoms4 from '../screens/home/skin/AdditionalSymptoms4';
 import AdditionalSymptoms5 from '../screens/home/skin/AdditionalSymptoms5';
 import Additionalinformation from '../screens/home/skin/information1';
+import Additionalinformation2 from '../screens/home/skin/skininformation2';
+import Additionalinformation3 from '../screens/home/skin/skininfromation3';
+import Additionalinformation4 from '../screens/home/skin/skininfromation4';
+import Additionalinformation5 from '../screens/home/skin/skininformation5';
+import Additionalinformation6 from '../screens/home/skin/skininformation6';
 import {COLORS, ROUTES} from "../constants"
 const Stack = createStackNavigator();
 
@@ -30,6 +35,11 @@ function SkinNavigator() {
       <Stack.Screen name={ROUTES.SKIN_VIDEO4} component={AdditionalSymptoms4} />
       <Stack.Screen name={ROUTES.SKIN_VIDEO5} component={AdditionalSymptoms5} />
       <Stack.Screen name={ROUTES.SKIN_INFO} component={Additionalinformation} />
+      <Stack.Screen name={ROUTES.SKIN_INFO2} component={Additionalinformation2} />
+      <Stack.Screen name={ROUTES.SKIN_INFO3} component={Additionalinformation3} />
+      <Stack.Screen name={ROUTES.SKIN_INFO4} component={Additionalinformation4} />
+      <Stack.Screen name={ROUTES.SKIN_INFO5} component={Additionalinformation5} />
+      <Stack.Screen name={ROUTES.SKIN_INFO6} component={Additionalinformation6} />
      
       
   

src/screens/home/skin/AdditionalSymptoms.js

@@ -9,7 +9,7 @@ import { Dimensions } from 'react-native';
 import { Linking } from 'react-native';
 
 
-const AdditionalSymptomsScreen = ({ navigation }) => {
+const AdditionalSymptomsScreen2 = ({ navigation }) => {
     const [selectedSymptoms, setSelectedSymptoms] = useState({
         symptom1: false, symptom2: false, symptom3: false, symptom4: false,
         symptom5: false, symptom6: false, symptom7: false, symptom8: false,
@@ -77,7 +77,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
 
         // Navigate based on condition
         if (toSkinRisk) {
-            navigation.navigate(ROUTES.SKIN_RISK);
+            navigation.navigate(ROUTES.SKIN_RISK, {origin: 'AdditionalSymptomsScreen2' });
         } else {
             navigation.navigate(ROUTES.SKIN_INFO);
         }
@@ -460,4 +460,4 @@ const styles = StyleSheet.create({
     // ... possibly other styles
 });
 
-export default AdditionalSymptomsScreen;
+export default AdditionalSymptomsScreen2;

src/screens/home/skin/AdditionalSymptoms1.js

@@ -9,7 +9,7 @@ import { Dimensions } from 'react-native';
 import { Linking } from 'react-native';
 
 
-const AdditionalSymptomsScreen = ({ navigation }) => {
+const AdditionalSymptomsScreen1 = ({ navigation }) => {
     const [selectedSymptoms, setSelectedSymptoms] = useState({
         symptom1: false, symptom2: false, symptom3: false, symptom4: false,
         symptom5: false, symptom6: false, symptom7: false, symptom8: false,
@@ -71,9 +71,9 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
 
         // Navigate based on condition
         if (toSkinRisk) {
-            navigation.navigate(ROUTES.SKIN_RISK);
+            navigation.navigate(ROUTES.SKIN_RISK, {origin: 'AdditionalSymptomsScreen1' });
         } else {
-            navigation.navigate(ROUTES.SKIN_INFO);
+            navigation.navigate(ROUTES.SKIN_INFO2);
         }
     };
 
@@ -455,4 +455,4 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
     });
     
 
-export default AdditionalSymptomsScreen;
+export default AdditionalSymptomsScreen1;

src/screens/home/skin/AdditionalSymptoms2.js

@@ -9,7 +9,7 @@ import { Dimensions } from 'react-native';
 import { Linking } from 'react-native';
 
 
-const AdditionalSymptomsScreen = ({ navigation }) => {
+const AdditionalSymptomsScreen3 = ({ navigation }) => {
     const [selectedSymptoms, setSelectedSymptoms] = useState({
         symptom1: false, symptom2: false, symptom3: false, symptom4: false,
         symptom5: false, symptom6: false, symptom7: false, symptom8: false,
@@ -67,7 +67,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
 
         // Navigate based on condition
         if (toSkinRisk) {
-            navigation.navigate(ROUTES.SKIN_RISK);
+            navigation.navigate(ROUTES.SKIN_RISK, {origin: 'AdditionalSymptomsScreen3' });
         } else {
             navigation.navigate(ROUTES.SKIN_INFO);
         }
@@ -451,4 +451,4 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
     });
     
 
-export default AdditionalSymptomsScreen;
+export default AdditionalSymptomsScreen3;

src/screens/home/skin/AdditionalSymptoms3.js

@@ -9,7 +9,7 @@ import { Dimensions } from 'react-native';
 import { Linking } from 'react-native';
 
 
-const AdditionalSymptomsScreen = ({ navigation }) => {
+const AdditionalSymptomsScreen4 = ({ navigation }) => {
     const [selectedSymptoms, setSelectedSymptoms] = useState({
         symptom1: false, symptom2: false, symptom3: false, symptom4: false,
         symptom5: false, symptom6: false, symptom7: false, symptom8: false,
@@ -62,7 +62,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
 
         // Navigate based on condition
         if (toSkinRisk) {
-            navigation.navigate(ROUTES.SKIN_RISK);
+            navigation.navigate(ROUTES.SKIN_RISK,  {origin: 'AdditionalSymptomsScreen4' });
         } else {
             navigation.navigate(ROUTES.SKIN_INFO);
         }
@@ -445,4 +445,4 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
         // ... possibly other styles
     });
 
-export default AdditionalSymptomsScreen;
+export default AdditionalSymptomsScreen4;

src/screens/home/skin/AdditionalSymptoms4.js

@@ -9,7 +9,7 @@ import { Dimensions } from 'react-native';
 import { Linking } from 'react-native';
 
 
-const AdditionalSymptomsScreen = ({ navigation }) => {
+const AdditionalSymptomsScreen5 = ({ navigation }) => {
     const [selectedSymptoms, setSelectedSymptoms] = useState({
         symptom1: false, symptom2: false, symptom3: false, symptom4: false,
         symptom5: false, symptom6: false, symptom7: false, symptom8: false,
@@ -155,7 +155,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                 <Button
                     title="Continue for more information"
                     style={styles.nextButton}
-                    onPress={() => navigation.navigate(ROUTES.SKIN_INFO)}
+                    onPress={() => navigation.navigate(ROUTES.SKIN_INFO6)}
                 />
             </ScrollView>
         </SafeAreaView>
@@ -381,4 +381,4 @@ const styles = StyleSheet.create({
     // ... possibly other styles
 });
 
-export default AdditionalSymptomsScreen;
+export default AdditionalSymptomsScreen5;

src/screens/home/skin/AdditionalSymptoms5.js

@@ -9,7 +9,7 @@ import { Dimensions } from 'react-native';
 import { Linking } from 'react-native';
 
 
-const AdditionalSymptomsScreen = ({ navigation }) => {
+const AdditionalSymptomsScreen6 = ({ navigation }) => {
     const [selectedSymptoms, setSelectedSymptoms] = useState({
         symptom1: false, symptom2: false, symptom3: false, symptom4: false,
         symptom5: false, symptom6: false, symptom7: false, symptom8: false,
@@ -60,7 +60,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
 
         // Navigate based on condition
         if (toSkinRisk) {
-            navigation.navigate(ROUTES.SKIN_RISK);
+            navigation.navigate(ROUTES.SKIN_RISK,  {origin: 'AdditionalSymptomsScreen6' });
         } else {
             navigation.navigate(ROUTES.SKIN_INFO);
         }
@@ -443,4 +443,4 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
         // ... possibly other styles
     });
 
-export default AdditionalSymptomsScreen;
+export default AdditionalSymptomsScreen6;

src/screens/home/skin/SkinRisk.js

@@ -7,18 +7,14 @@ import Button from '../../../components/Button';
 import Video from 'react-native-video';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
-const RiskEvaluationScreen = ({ navigation }) => {
-
-    
+const RiskEvaluationScreen = ({ navigation,route }) => {
+    const { origin } = route.params || {};
     const [audioPaused, setAudioPaused] = useState(true);
     const [progress, setProgress] = useState(0);
     const audioRef = useRef(null);
     const progressAnim = useRef(new Animated.Value(0)).current;
 
-    // Function to handle the continuation to the next screen
-    const handleContinue = () => {
-        // navigation.navigate('NextScreenRoute');
-    };
+
     useEffect(() => {
         if (audioPaused) {
             progressAnim.stopAnimation();
@@ -40,13 +36,33 @@ const RiskEvaluationScreen = ({ navigation }) => {
         }
     };
 
+    const handleContinue = () => {
+        if (origin === 'AdditionalSymptomsScreen2') {
+            navigation.navigate(ROUTES.SKIN_INFO);
+        } else if (origin === 'AdditionalSymptomsScreen1') {
+            navigation.navigate(ROUTES.SKIN_INFO2);
+        }
+          else if (origin === 'AdditionalSymptomsScreen3') {
+            navigation.navigate(ROUTES.SKIN_INFO3);
+        }
+          else if (origin === 'AdditionalSymptomsScreen4') {
+            navigation.navigate(ROUTES.SKIN_INFO4);
+        }
+          else if (origin === 'AdditionalSymptomsScreen6') {
+            navigation.navigate(ROUTES.SKIN_INFO5);
+        }
+        //  else {
+        //     navigation.navigate(ROUTES.SKIN_INFO); // Default or fallback screen
+        // }
+    };
+
     const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1716112518/audio/fzkd6v8lnmnsa4onm8sx.mp3";
     
 
     return (
         <SafeAreaView style={styles.container}>
             <View style={styles.topContainer}>
-                <Text style={styles.topicText}>Risk evaluation</Text>
+                <Text style={styles.topicText}> Evaluated risk</Text>
                 <Text style={styles.descriptionText}>
                     Your Condition Risk Level: High,Low will be displayed below
                 </Text>
@@ -90,7 +106,7 @@ const RiskEvaluationScreen = ({ navigation }) => {
             <Button
                     title="What should I do next"
                     style={styles.nextButton}
-                    onPress={() => navigation.navigate(ROUTES.SKIN_INFO)}
+                    onPress={handleContinue}
                 />
             </View>
             </SafeAreaView>

src/screens/home/skin/SkinUploader.js

@@ -145,16 +145,7 @@ const Camera = ({ navigation }) => {
                     style={styles.nextButton}
                     onPress={handleContinue}
                 />
-                 {/* <Button
-                        title="Take your next step"
-                        style={{
-                            marginTop: 12,
-                            width: "90%",
-                            marginTop:43,
-                            marginBottom:83
-                        }}
-                        onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
-                    /> */}
+                
             </View>
         </View>
     );

src/screens/home/skin/information1.js

@@ -183,7 +183,7 @@ const Additionalinformation = ({ navigation }) => {
                 </View>
 
                 <Button
-                    title="Continue for more information"
+                    title="Not sure ? Diagnose again"
                     style={styles.nextButton}
                     onPress={() => navigation.navigate(ROUTES.SKIN_WELCOME)}
                 />

src/screens/home/skin/skininformation2.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 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';
+
+
+const Additionalinformation2 = ({ navigation }) => {
+    
+    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/v1716106373/AI/ybh7aunwasx1aogw0v2h.mp4";
+    
+    const videoRef = useRef(null);
+
+
+
+   
+
+    const handleLoad = () => {
+        setLoading(false);
+    };
+
+    const handleBuffer = () => {
+        setLoading(true);
+    };
+
+    const toggleCheckbox = (symptom) => {
+        setSelectedSymptoms(prevState => ({
+            ...prevState,
+            [symptom]: !prevState[symptom],
+        }));
+    };
+
+
+    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 ContactCard = ({ name, title, phone, email }) => (
+        <View style={styles.contactCard}>
+            <Text style={styles.contactName}>{name}</Text>
+            <Text style={styles.contactTitle}>{title}</Text>
+            <View style={styles.contactSpace} />
+            <TouchableOpacity onPress={() => Linking.openURL(`tel:${phone}`)}>
+            <Image source={IMGS.sk_17} style={styles.contactIcon} />
+                <Text style={styles.contactInfo}>Phone: {phone}</Text>
+            </TouchableOpacity>
+            <Image source={IMGS.sk_18} style={styles.contactIcon} />
+            <TouchableOpacity onPress={() => Linking.openURL(`mailto:${email}`)}>
+                <Text style={styles.contactInfo}>Email: {email}</Text>
+            </TouchableOpacity>
+        </View>
+    );
+
+    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
+    };
+
+    useEffect(() => {
+        return () => {
+            if (hideTimer.current) {
+                clearTimeout(hideTimer.current);
+            }
+        };
+    }, []);
+
+    return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
+            <View style={styles.topContainer}>
+              <Text style={styles.topicText}>Peteachie Additional Symptoms</Text>
+                 <View style={styles.videoBox}>
+                    <View style={styles.videoDescriptionBox}>
+            <Text style={styles.descriptionText}>
+                Please play the video
+            </Text>
+            </View>
+            <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} 
+                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
+                    style={styles.playPauseIcon}
+                    source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
+                />
+            </TouchableOpacity>
+            )}
+            </TouchableOpacity>
+            </View>
+        
+            <View style={styles.qrCodeBox}>
+                          <Image
+                            source={IMGS.sk_21}  // Make sure the path is correct
+                            style={styles.qrCodeImage}
+                        />
+                        <Text style={styles.dscriptionText}>
+                            Click below to explore informative videos on this condition from trusted YouTube sources. 
+                            Remember, these videos are for educational purposes only. If you came this far, 
+                            you need medical advice immediately consult a professional. Thank you for prioritizing your health.
+                        </Text>
+                        
+                        <TouchableOpacity
+                            style={styles.orButton}
+                            onPress={() => Linking.openURL('https://youtu.be/YvUbylNcouA?si=Z_WCARLlZd37Xll1')}>
+                            <Image
+                                source={IMGS.sk_22}
+                                style={styles.buttonIcon}
+                            />
+                            <Text style={styles.orButtonText}>Click here to view video</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            style={styles.orButton}
+                            onPress={() => Linking.openURL('https://www.tiktok.com/@aribrownmd/video/7195031819681598763')}>
+                            <Image
+                                 source={IMGS.sk_22}
+                                style={styles.buttonIcon}
+                            />
+                            <Text style={styles.orButtonText}>Click here to view video</Text>
+                        </TouchableOpacity>
+                    
+            </View>
+            <View style={styles.qrCodeBox}>
+                          <Image
+                             source={IMGS.sk_23} // Make sure the path is correct
+                            style={styles.qrCodeImage1}
+                        />
+                        <Text style={styles.dscriptionText}>
+                        වැඩිදුර මග පෙන්වීම සහ සහාය සඳහා කරුණාකර යෙදුමේ ලැයිස්තුගත කර ඇති චර්ම රෝග විශේෂඥයින් වෙත සම්බන්ධ වන්න.
+                        </Text>
+                        <Text style={styles.dscriptionText}>
+                        Please reach out to the dermatologists listed in the app for further guidance and assistance.
+                        </Text>
+                        
+                        <ContactCard
+                             name="Neville Bassnayake"
+                             title="Dermatologist"
+                             phone="+94 759509725"
+                             email="Nevillebassn@gmail.com"
+                        />
+                         <ContactCard
+                             name="Sandhya Hemamali"
+                             title="Dermatologist"
+                             phone="+94 773910789"
+                             email="Sandhyahe@gmail.com"
+                        />
+                    
+            </View>
+                </View>
+
+                <Button
+                    title="Not sure ? Diagnose again"
+                    style={styles.nextButton}
+                    onPress={() => navigation.navigate(ROUTES.SKIN_WELCOME)}
+                />
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+
+const styles = StyleSheet.create({
+    scrollContainer: {
+        flexGrow: 1,
+    },
+    
+
+    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',
+    },
+   
+    submitButton: {
+        backgroundColor: COLORS.primary,
+        borderRadius: 20,
+        padding: 15,
+        marginVertical: 20,
+        width: '90%',
+        alignSelf: 'center',
+    },
+
+    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%',
+    },
+
+    
+
+    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: '#316B83', // Set the border color
+        borderRadius: 10, // Set border radius for rounded corners
+        padding: 20, // Add padding around the content
+        marginBottom: -20, // Add bottom margin for spacing
+        width: '98%', // 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.45,
+        shadowRadius: 8.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,
+    },
+
+    contentContainer: {
+        paddingBottom: 20, // Adds padding at the bottom
+    },
+    qrCodeBox: {
+        width: '90%',
+        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:50
+    },
+    qrCodeImage: {
+        width: 250, // Adjust size as needed
+        height: 200, // Adjust size as needed
+    },
+    qrCodeImage1:{
+        width: 200, // Adjust size as needed
+        height: 200,
+    },
+    orButton: {
+        marginTop: 30,
+        backgroundColor:'#5F939A',
+        padding: 10,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'left',
+        flexDirection: 'row', // Align icon and text in a row
+        width: '100%', // Make the button wider
+        shadowColor: "#000",
+        shadowOffset: {
+        width: 0,
+        height: 6,
+    },
+        shadowOpacity: 0.20,
+        shadowRadius: 4.65,
+        elevation: 12,
+    },
+    orButtonText: {
+        color: COLORS.white,
+        fontSize: 16,
+       
+        marginLeft: 10, // Give some space after the icon
+    },
+    buttonIcon: {
+        width: 30,
+        height: 30,
+        marginLeft:10
+    },
+    dscriptionText: {
+        fontSize: 14,
+        textAlign: 'center',
+        color: COLORS.darkGray,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    contactCard: {
+        backgroundColor: '#5F939A',
+        padding: 15,
+        borderRadius:20,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 4,
+        },
+        shadowOpacity: 0.30,
+        shadowRadius: 4.65,
+        elevation: 8,
+        width: '110%',
+        marginVertical: 10,
+        alignItems: 'left',
+    },
+    contactName: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: COLORS.white,
+    },
+    contactTitle: {
+        fontSize: 16,
+        color: COLORS.white,
+    },
+    contactInfo: {
+        fontSize: 14,
+        color: COLORS.white,
+    },
+    contactSpace: {
+        height: 10, // Space between title and contact info
+    },
+    contactIcon: {
+        width: 16,
+        height: 16,
+        marginRight: 8,
+    },
+
+   
+    
+    // ... possibly other styles
+});
+
+export default Additionalinformation2;
\ No newline at end of file

src/screens/home/skin/skininformation5.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 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';
+
+
+const Additionalinformation3 = ({ navigation }) => {
+    
+    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/v1716106405/AI/kigbpys5roel90rymer4.mp4";
+    
+    const videoRef = useRef(null);
+
+
+
+   
+
+    const handleLoad = () => {
+        setLoading(false);
+    };
+
+    const handleBuffer = () => {
+        setLoading(true);
+    };
+
+    const toggleCheckbox = (symptom) => {
+        setSelectedSymptoms(prevState => ({
+            ...prevState,
+            [symptom]: !prevState[symptom],
+        }));
+    };
+
+
+    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 ContactCard = ({ name, title, phone, email }) => (
+        <View style={styles.contactCard}>
+            <Text style={styles.contactName}>{name}</Text>
+            <Text style={styles.contactTitle}>{title}</Text>
+            <View style={styles.contactSpace} />
+            <TouchableOpacity onPress={() => Linking.openURL(`tel:${phone}`)}>
+            <Image source={IMGS.sk_17} style={styles.contactIcon} />
+                <Text style={styles.contactInfo}>Phone: {phone}</Text>
+            </TouchableOpacity>
+            <Image source={IMGS.sk_18} style={styles.contactIcon} />
+            <TouchableOpacity onPress={() => Linking.openURL(`mailto:${email}`)}>
+                <Text style={styles.contactInfo}>Email: {email}</Text>
+            </TouchableOpacity>
+        </View>
+    );
+
+    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
+    };
+
+    useEffect(() => {
+        return () => {
+            if (hideTimer.current) {
+                clearTimeout(hideTimer.current);
+            }
+        };
+    }, []);
+
+    return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
+            <View style={styles.topContainer}>
+              <Text style={styles.topicText}>Melanoma Additional Information</Text>
+                 <View style={styles.videoBox}>
+                    <View style={styles.videoDescriptionBox}>
+            <Text style={styles.descriptionText}>
+                Please play the video
+            </Text>
+            </View>
+            <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} 
+                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
+                    style={styles.playPauseIcon}
+                    source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
+                />
+            </TouchableOpacity>
+            )}
+            </TouchableOpacity>
+            </View>
+        
+            <View style={styles.qrCodeBox}>
+                          <Image
+                            source={IMGS.sk_21}  // Make sure the path is correct
+                            style={styles.qrCodeImage}
+                        />
+                        <Text style={styles.dscriptionText}>
+                            Click below to explore informative videos on this condition from trusted YouTube sources. 
+                            Remember, these videos are for educational purposes only. If you came this far, 
+                            you need medical advice immediately consult a professional. Thank you for prioritizing your health.
+                        </Text>
+                        
+                        <TouchableOpacity
+                            style={styles.orButton}
+                            onPress={() => Linking.openURL('https://youtu.be/njOyPv5o1sU?si=n8noO97Qw4Oi7tX9')}>
+                            <Image
+                                source={IMGS.sk_22}
+                                style={styles.buttonIcon}
+                            />
+                            <Text style={styles.orButtonText}>Click here to view video</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            style={styles.orButton}
+                            onPress={() => Linking.openURL('https://youtu.be/VKccqnKRDUI?si=dqgrE3D8VwY-pvLZ')}>
+                            <Image
+                                 source={IMGS.sk_22}
+                                style={styles.buttonIcon}
+                            />
+                            <Text style={styles.orButtonText}>Click here to view video</Text>
+                        </TouchableOpacity>
+                    
+            </View>
+            <View style={styles.qrCodeBox}>
+                          <Image
+                             source={IMGS.sk_23} // Make sure the path is correct
+                            style={styles.qrCodeImage1}
+                        />
+                        <Text style={styles.dscriptionText}>
+                        වැඩිදුර මග පෙන්වීම සහ සහාය සඳහා කරුණාකර යෙදුමේ ලැයිස්තුගත කර ඇති චර්ම රෝග විශේෂඥයින් වෙත සම්බන්ධ වන්න.
+                        </Text>
+                        <Text style={styles.dscriptionText}>
+                        Please reach out to the dermatologists listed in the app for further guidance and assistance.
+                        </Text>
+                        
+                        <ContactCard
+                             name="Neville Bassnayake"
+                             title="Dermatologist"
+                             phone="+94 759509725"
+                             email="Nevillebassn@gmail.com"
+                        />
+                         <ContactCard
+                             name="Sandhya Hemamali"
+                             title="Dermatologist"
+                             phone="+94 773910789"
+                             email="Sandhyahe@gmail.com"
+                        />
+                    
+            </View>
+                </View>
+
+                <Button
+                    title="Not sure ? Diagnose again"
+                    style={styles.nextButton}
+                    onPress={() => navigation.navigate(ROUTES.SKIN_WELCOME)}
+                />
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+
+const styles = StyleSheet.create({
+    scrollContainer: {
+        flexGrow: 1,
+    },
+    
+
+    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',
+    },
+   
+    submitButton: {
+        backgroundColor: COLORS.primary,
+        borderRadius: 20,
+        padding: 15,
+        marginVertical: 20,
+        width: '90%',
+        alignSelf: 'center',
+    },
+
+    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%',
+    },
+
+    
+
+    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: '#316B83', // Set the border color
+        borderRadius: 10, // Set border radius for rounded corners
+        padding: 20, // Add padding around the content
+        marginBottom: -20, // Add bottom margin for spacing
+        width: '98%', // 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.45,
+        shadowRadius: 8.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,
+    },
+
+    contentContainer: {
+        paddingBottom: 20, // Adds padding at the bottom
+    },
+    qrCodeBox: {
+        width: '90%',
+        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:50
+    },
+    qrCodeImage: {
+        width: 250, // Adjust size as needed
+        height: 200, // Adjust size as needed
+    },
+    qrCodeImage1:{
+        width: 200, // Adjust size as needed
+        height: 200,
+    },
+    orButton: {
+        marginTop: 30,
+        backgroundColor:'#5F939A',
+        padding: 10,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'left',
+        flexDirection: 'row', // Align icon and text in a row
+        width: '100%', // Make the button wider
+        shadowColor: "#000",
+        shadowOffset: {
+        width: 0,
+        height: 6,
+    },
+        shadowOpacity: 0.20,
+        shadowRadius: 4.65,
+        elevation: 12,
+    },
+    orButtonText: {
+        color: COLORS.white,
+        fontSize: 16,
+       
+        marginLeft: 10, // Give some space after the icon
+    },
+    buttonIcon: {
+        width: 30,
+        height: 30,
+        marginLeft:10
+    },
+    dscriptionText: {
+        fontSize: 14,
+        textAlign: 'center',
+        color: COLORS.darkGray,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    contactCard: {
+        backgroundColor: '#5F939A',
+        padding: 15,
+        borderRadius:20,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 4,
+        },
+        shadowOpacity: 0.30,
+        shadowRadius: 4.65,
+        elevation: 8,
+        width: '110%',
+        marginVertical: 10,
+        alignItems: 'left',
+    },
+    contactName: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: COLORS.white,
+    },
+    contactTitle: {
+        fontSize: 16,
+        color: COLORS.white,
+    },
+    contactInfo: {
+        fontSize: 14,
+        color: COLORS.white,
+    },
+    contactSpace: {
+        height: 10, // Space between title and contact info
+    },
+    contactIcon: {
+        width: 16,
+        height: 16,
+        marginRight: 8,
+    },
+
+   
+    
+    // ... possibly other styles
+});
+
+export default Additionalinformation3;
\ No newline at end of file

src/screens/home/skin/skininformation6.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 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';
+
+
+const Additionalinformation6 = ({ navigation }) => {
+    
+    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/v1716106375/AI/yfek3kaihgrplcrq3fcp.mp4";
+    
+    const videoRef = useRef(null);
+
+
+
+   
+
+    const handleLoad = () => {
+        setLoading(false);
+    };
+
+    const handleBuffer = () => {
+        setLoading(true);
+    };
+
+    const toggleCheckbox = (symptom) => {
+        setSelectedSymptoms(prevState => ({
+            ...prevState,
+            [symptom]: !prevState[symptom],
+        }));
+    };
+
+
+    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 ContactCard = ({ name, title, phone, email }) => (
+        <View style={styles.contactCard}>
+            <Text style={styles.contactName}>{name}</Text>
+            <Text style={styles.contactTitle}>{title}</Text>
+            <View style={styles.contactSpace} />
+            <TouchableOpacity onPress={() => Linking.openURL(`tel:${phone}`)}>
+            <Image source={IMGS.sk_17} style={styles.contactIcon} />
+                <Text style={styles.contactInfo}>Phone: {phone}</Text>
+            </TouchableOpacity>
+            <Image source={IMGS.sk_18} style={styles.contactIcon} />
+            <TouchableOpacity onPress={() => Linking.openURL(`mailto:${email}`)}>
+                <Text style={styles.contactInfo}>Email: {email}</Text>
+            </TouchableOpacity>
+        </View>
+    );
+
+    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
+    };
+
+    useEffect(() => {
+        return () => {
+            if (hideTimer.current) {
+                clearTimeout(hideTimer.current);
+            }
+        };
+    }, []);
+
+    return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
+            <View style={styles.topContainer}>
+              <Text style={styles.topicText}>PUPP Additional Information</Text>
+                 <View style={styles.videoBox}>
+                    <View style={styles.videoDescriptionBox}>
+            <Text style={styles.descriptionText}>
+                Please play the video
+            </Text>
+            </View>
+            <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} 
+                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
+                    style={styles.playPauseIcon}
+                    source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
+                />
+            </TouchableOpacity>
+            )}
+            </TouchableOpacity>
+            </View>
+        
+            <View style={styles.qrCodeBox}>
+                          <Image
+                            source={IMGS.sk_21}  // Make sure the path is correct
+                            style={styles.qrCodeImage}
+                        />
+                        <Text style={styles.dscriptionText}>
+                            Click below to explore informative videos on this condition from trusted YouTube sources. 
+                            Remember, these videos are for educational purposes only. If you came this far, 
+                            you need medical advice immediately consult a professional. Thank you for prioritizing your health.
+                        </Text>
+                        
+                        <TouchableOpacity
+                            style={styles.orButton}
+                            onPress={() => Linking.openURL('https://youtu.be/fglGCbIFb-Y?si=JdirOFhCzhfKAYY6')}>
+                            <Image
+                                source={IMGS.sk_22}
+                                style={styles.buttonIcon}
+                            />
+                            <Text style={styles.orButtonText}>Click here to view video</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            style={styles.orButton}
+                            onPress={() => Linking.openURL('https://youtu.be/qT4YLpO2ykc?si=iuM4FHPav4lmvEhc')}>
+                            <Image
+                                 source={IMGS.sk_22}
+                                style={styles.buttonIcon}
+                            />
+                            <Text style={styles.orButtonText}>Click here to view video</Text>
+                        </TouchableOpacity>
+                    
+            </View>
+            <View style={styles.qrCodeBox}>
+                          <Image
+                             source={IMGS.sk_23} // Make sure the path is correct
+                            style={styles.qrCodeImage1}
+                        />
+                        <Text style={styles.dscriptionText}>
+                        වැඩිදුර මග පෙන්වීම සහ සහාය සඳහා කරුණාකර යෙදුමේ ලැයිස්තුගත කර ඇති චර්ම රෝග විශේෂඥයින් වෙත සම්බන්ධ වන්න.
+                        </Text>
+                        <Text style={styles.dscriptionText}>
+                        Please reach out to the dermatologists listed in the app for further guidance and assistance.
+                        </Text>
+                        
+                        <ContactCard
+                             name="Neville Bassnayake"
+                             title="Dermatologist"
+                             phone="+94 759509725"
+                             email="Nevillebassn@gmail.com"
+                        />
+                         <ContactCard
+                             name="Sandhya Hemamali"
+                             title="Dermatologist"
+                             phone="+94 773910789"
+                             email="Sandhyahe@gmail.com"
+                        />
+                    
+            </View>
+                </View>
+
+                <Button
+                    title="Not sure ? Diagnose again"
+                    style={styles.nextButton}
+                    onPress={() => navigation.navigate(ROUTES.SKIN_WELCOME)}
+                />
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+
+const styles = StyleSheet.create({
+    scrollContainer: {
+        flexGrow: 1,
+    },
+    
+
+    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',
+    },
+   
+    submitButton: {
+        backgroundColor: COLORS.primary,
+        borderRadius: 20,
+        padding: 15,
+        marginVertical: 20,
+        width: '90%',
+        alignSelf: 'center',
+    },
+
+    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%',
+    },
+
+    
+
+    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: '#316B83', // Set the border color
+        borderRadius: 10, // Set border radius for rounded corners
+        padding: 20, // Add padding around the content
+        marginBottom: -20, // Add bottom margin for spacing
+        width: '98%', // 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.45,
+        shadowRadius: 8.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,
+    },
+
+    contentContainer: {
+        paddingBottom: 20, // Adds padding at the bottom
+    },
+    qrCodeBox: {
+        width: '90%',
+        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:50
+    },
+    qrCodeImage: {
+        width: 250, // Adjust size as needed
+        height: 200, // Adjust size as needed
+    },
+    qrCodeImage1:{
+        width: 200, // Adjust size as needed
+        height: 200,
+    },
+    orButton: {
+        marginTop: 30,
+        backgroundColor:'#5F939A',
+        padding: 10,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'left',
+        flexDirection: 'row', // Align icon and text in a row
+        width: '100%', // Make the button wider
+        shadowColor: "#000",
+        shadowOffset: {
+        width: 0,
+        height: 6,
+    },
+        shadowOpacity: 0.20,
+        shadowRadius: 4.65,
+        elevation: 12,
+    },
+    orButtonText: {
+        color: COLORS.white,
+        fontSize: 16,
+       
+        marginLeft: 10, // Give some space after the icon
+    },
+    buttonIcon: {
+        width: 30,
+        height: 30,
+        marginLeft:10
+    },
+    dscriptionText: {
+        fontSize: 14,
+        textAlign: 'center',
+        color: COLORS.darkGray,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    contactCard: {
+        backgroundColor: '#5F939A',
+        padding: 15,
+        borderRadius:20,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 4,
+        },
+        shadowOpacity: 0.30,
+        shadowRadius: 4.65,
+        elevation: 8,
+        width: '110%',
+        marginVertical: 10,
+        alignItems: 'left',
+    },
+    contactName: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: COLORS.white,
+    },
+    contactTitle: {
+        fontSize: 16,
+        color: COLORS.white,
+    },
+    contactInfo: {
+        fontSize: 14,
+        color: COLORS.white,
+    },
+    contactSpace: {
+        height: 10, // Space between title and contact info
+    },
+    contactIcon: {
+        width: 16,
+        height: 16,
+        marginRight: 8,
+    },
+
+   
+    
+    // ... possibly other styles
+});
+
+export default Additionalinformation6;
\ No newline at end of file

src/screens/home/skin/skininfromation3.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 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';
+
+
+const Additionalinformation4 = ({ navigation }) => {
+    
+    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/v1716106409/AI/aclrqfoy8i9jz2g6hxr9.mp4";
+    
+    const videoRef = useRef(null);
+
+
+
+   
+
+    const handleLoad = () => {
+        setLoading(false);
+    };
+
+    const handleBuffer = () => {
+        setLoading(true);
+    };
+
+    const toggleCheckbox = (symptom) => {
+        setSelectedSymptoms(prevState => ({
+            ...prevState,
+            [symptom]: !prevState[symptom],
+        }));
+    };
+
+
+    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 ContactCard = ({ name, title, phone, email }) => (
+        <View style={styles.contactCard}>
+            <Text style={styles.contactName}>{name}</Text>
+            <Text style={styles.contactTitle}>{title}</Text>
+            <View style={styles.contactSpace} />
+            <TouchableOpacity onPress={() => Linking.openURL(`tel:${phone}`)}>
+            <Image source={IMGS.sk_17} style={styles.contactIcon} />
+                <Text style={styles.contactInfo}>Phone: {phone}</Text>
+            </TouchableOpacity>
+            <Image source={IMGS.sk_18} style={styles.contactIcon} />
+            <TouchableOpacity onPress={() => Linking.openURL(`mailto:${email}`)}>
+                <Text style={styles.contactInfo}>Email: {email}</Text>
+            </TouchableOpacity>
+        </View>
+    );
+
+    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
+    };
+
+    useEffect(() => {
+        return () => {
+            if (hideTimer.current) {
+                clearTimeout(hideTimer.current);
+            }
+        };
+    }, []);
+
+    return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
+            <View style={styles.topContainer}>
+              <Text style={styles.topicText}>Cytomegalovirus Additional Symptoms</Text>
+                 <View style={styles.videoBox}>
+                    <View style={styles.videoDescriptionBox}>
+            <Text style={styles.descriptionText}>
+                Please play the video
+            </Text>
+            </View>
+            <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} 
+                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
+                    style={styles.playPauseIcon}
+                    source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
+                />
+            </TouchableOpacity>
+            )}
+            </TouchableOpacity>
+            </View>
+        
+            <View style={styles.qrCodeBox}>
+                          <Image
+                            source={IMGS.sk_21}  // Make sure the path is correct
+                            style={styles.qrCodeImage}
+                        />
+                        <Text style={styles.dscriptionText}>
+                            Click below to explore informative videos on this condition from trusted YouTube sources. 
+                            Remember, these videos are for educational purposes only. If you came this far, 
+                            you need medical advice immediately consult a professional. Thank you for prioritizing your health.
+                        </Text>
+                        
+                        <TouchableOpacity
+                            style={styles.orButton}
+                            onPress={() => Linking.openURL('https://youtu.be/AX6SKcxAfDM?si=-zSxxB9xjcR0kppY')}>
+                            <Image
+                                source={IMGS.sk_22}
+                                style={styles.buttonIcon}
+                            />
+                            <Text style={styles.orButtonText}>Click here to view video</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            style={styles.orButton}
+                            onPress={() => Linking.openURL('https://youtu.be/9H1z6j20x2M?si=z4Nza02ANNNAIOCa')}>
+                            <Image
+                                 source={IMGS.sk_22}
+                                style={styles.buttonIcon}
+                            />
+                            <Text style={styles.orButtonText}>Click here to view video</Text>
+                        </TouchableOpacity>
+                    
+            </View>
+            <View style={styles.qrCodeBox}>
+                          <Image
+                             source={IMGS.sk_23} // Make sure the path is correct
+                            style={styles.qrCodeImage1}
+                        />
+                        <Text style={styles.dscriptionText}>
+                        වැඩිදුර මග පෙන්වීම සහ සහාය සඳහා කරුණාකර යෙදුමේ ලැයිස්තුගත කර ඇති චර්ම රෝග විශේෂඥයින් වෙත සම්බන්ධ වන්න.
+                        </Text>
+                        <Text style={styles.dscriptionText}>
+                        Please reach out to the dermatologists listed in the app for further guidance and assistance.
+                        </Text>
+                        
+                        <ContactCard
+                             name="Neville Bassnayake"
+                             title="Dermatologist"
+                             phone="+94 759509725"
+                             email="Nevillebassn@gmail.com"
+                        />
+                         <ContactCard
+                             name="Sandhya Hemamali"
+                             title="Dermatologist"
+                             phone="+94 773910789"
+                             email="Sandhyahe@gmail.com"
+                        />
+                    
+            </View>
+                </View>
+
+                <Button
+                    title="Not sure ? Diagnose again"
+                    style={styles.nextButton}
+                    onPress={() => navigation.navigate(ROUTES.SKIN_WELCOME)}
+                />
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+
+const styles = StyleSheet.create({
+    scrollContainer: {
+        flexGrow: 1,
+    },
+    
+
+    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',
+    },
+   
+    submitButton: {
+        backgroundColor: COLORS.primary,
+        borderRadius: 20,
+        padding: 15,
+        marginVertical: 20,
+        width: '90%',
+        alignSelf: 'center',
+    },
+
+    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%',
+    },
+
+    
+
+    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: '#316B83', // Set the border color
+        borderRadius: 10, // Set border radius for rounded corners
+        padding: 20, // Add padding around the content
+        marginBottom: -20, // Add bottom margin for spacing
+        width: '98%', // 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.45,
+        shadowRadius: 8.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,
+    },
+
+    contentContainer: {
+        paddingBottom: 20, // Adds padding at the bottom
+    },
+    qrCodeBox: {
+        width: '90%',
+        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:50
+    },
+    qrCodeImage: {
+        width: 250, // Adjust size as needed
+        height: 200, // Adjust size as needed
+    },
+    qrCodeImage1:{
+        width: 200, // Adjust size as needed
+        height: 200,
+    },
+    orButton: {
+        marginTop: 30,
+        backgroundColor:'#5F939A',
+        padding: 10,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'left',
+        flexDirection: 'row', // Align icon and text in a row
+        width: '100%', // Make the button wider
+        shadowColor: "#000",
+        shadowOffset: {
+        width: 0,
+        height: 6,
+    },
+        shadowOpacity: 0.20,
+        shadowRadius: 4.65,
+        elevation: 12,
+    },
+    orButtonText: {
+        color: COLORS.white,
+        fontSize: 16,
+       
+        marginLeft: 10, // Give some space after the icon
+    },
+    buttonIcon: {
+        width: 30,
+        height: 30,
+        marginLeft:10
+    },
+    dscriptionText: {
+        fontSize: 14,
+        textAlign: 'center',
+        color: COLORS.darkGray,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    contactCard: {
+        backgroundColor: '#5F939A',
+        padding: 15,
+        borderRadius:20,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 4,
+        },
+        shadowOpacity: 0.30,
+        shadowRadius: 4.65,
+        elevation: 8,
+        width: '110%',
+        marginVertical: 10,
+        alignItems: 'left',
+    },
+    contactName: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: COLORS.white,
+    },
+    contactTitle: {
+        fontSize: 16,
+        color: COLORS.white,
+    },
+    contactInfo: {
+        fontSize: 14,
+        color: COLORS.white,
+    },
+    contactSpace: {
+        height: 10, // Space between title and contact info
+    },
+    contactIcon: {
+        width: 16,
+        height: 16,
+        marginRight: 8,
+    },
+
+   
+    
+    // ... possibly other styles
+});
+
+export default Additionalinformation4;
\ No newline at end of file

src/screens/home/skin/skininfromation4.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 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';
+
+
+const Additionalinformation5 = ({ navigation }) => {
+    
+    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/v1716106396/AI/spmoo9gqur4uaieu8yvl.mp4";
+    
+    const videoRef = useRef(null);
+
+
+
+   
+
+    const handleLoad = () => {
+        setLoading(false);
+    };
+
+    const handleBuffer = () => {
+        setLoading(true);
+    };
+
+    const toggleCheckbox = (symptom) => {
+        setSelectedSymptoms(prevState => ({
+            ...prevState,
+            [symptom]: !prevState[symptom],
+        }));
+    };
+
+
+    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 ContactCard = ({ name, title, phone, email }) => (
+        <View style={styles.contactCard}>
+            <Text style={styles.contactName}>{name}</Text>
+            <Text style={styles.contactTitle}>{title}</Text>
+            <View style={styles.contactSpace} />
+            <TouchableOpacity onPress={() => Linking.openURL(`tel:${phone}`)}>
+            <Image source={IMGS.sk_17} style={styles.contactIcon} />
+                <Text style={styles.contactInfo}>Phone: {phone}</Text>
+            </TouchableOpacity>
+            <Image source={IMGS.sk_18} style={styles.contactIcon} />
+            <TouchableOpacity onPress={() => Linking.openURL(`mailto:${email}`)}>
+                <Text style={styles.contactInfo}>Email: {email}</Text>
+            </TouchableOpacity>
+        </View>
+    );
+
+    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
+    };
+
+    useEffect(() => {
+        return () => {
+            if (hideTimer.current) {
+                clearTimeout(hideTimer.current);
+            }
+        };
+    }, []);
+
+    return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
+            <View style={styles.topContainer}>
+              <Text style={styles.topicText}>Herpes Additional Information </Text>
+                 <View style={styles.videoBox}>
+                    <View style={styles.videoDescriptionBox}>
+            <Text style={styles.descriptionText}>
+                Please play the video
+            </Text>
+            </View>
+            <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} 
+                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
+                    style={styles.playPauseIcon}
+                    source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
+                />
+            </TouchableOpacity>
+            )}
+            </TouchableOpacity>
+            </View>
+        
+            <View style={styles.qrCodeBox}>
+                          <Image
+                            source={IMGS.sk_21}  // Make sure the path is correct
+                            style={styles.qrCodeImage}
+                        />
+                        <Text style={styles.dscriptionText}>
+                            Click below to explore informative videos on this condition from trusted YouTube sources. 
+                            Remember, these videos are for educational purposes only. If you came this far, 
+                            you need medical advice immediately consult a professional. Thank you for prioritizing your health.
+                        </Text>
+                        
+                        <TouchableOpacity
+                            style={styles.orButton}
+                            onPress={() => Linking.openURL('https://youtu.be/xmSHS3Dt09g?si=9vkNkGyQea-B8oUZ')}>
+                            <Image
+                                source={IMGS.sk_22}
+                                style={styles.buttonIcon}
+                            />
+                            <Text style={styles.orButtonText}>Click here to view video</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            style={styles.orButton}
+                            onPress={() => Linking.openURL('https://youtu.be/TrIAIutjUKY?si=fHgt48PfNcBEQvuH')}>
+                            <Image
+                                 source={IMGS.sk_22}
+                                style={styles.buttonIcon}
+                            />
+                            <Text style={styles.orButtonText}>Click here to view video</Text>
+                        </TouchableOpacity>
+                    
+            </View>
+            <View style={styles.qrCodeBox}>
+                          <Image
+                             source={IMGS.sk_23} // Make sure the path is correct
+                            style={styles.qrCodeImage1}
+                        />
+                        <Text style={styles.dscriptionText}>
+                        වැඩිදුර මග පෙන්වීම සහ සහාය සඳහා කරුණාකර යෙදුමේ ලැයිස්තුගත කර ඇති චර්ම රෝග විශේෂඥයින් වෙත සම්බන්ධ වන්න.
+                        </Text>
+                        <Text style={styles.dscriptionText}>
+                        Please reach out to the dermatologists listed in the app for further guidance and assistance.
+                        </Text>
+                        
+                        <ContactCard
+                             name="Neville Bassnayake"
+                             title="Dermatologist"
+                             phone="+94 759509725"
+                             email="Nevillebassn@gmail.com"
+                        />
+                         <ContactCard
+                             name="Sandhya Hemamali"
+                             title="Dermatologist"
+                             phone="+94 773910789"
+                             email="Sandhyahe@gmail.com"
+                        />
+                    
+            </View>
+                </View>
+
+                <Button
+                    title="Not sure ? Diagnose again"
+                    style={styles.nextButton}
+                    onPress={() => navigation.navigate(ROUTES.SKIN_WELCOME)}
+                />
+            </ScrollView>
+        </SafeAreaView>
+    );
+};
+
+
+const styles = StyleSheet.create({
+    scrollContainer: {
+        flexGrow: 1,
+    },
+    
+
+    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',
+    },
+   
+    submitButton: {
+        backgroundColor: COLORS.primary,
+        borderRadius: 20,
+        padding: 15,
+        marginVertical: 20,
+        width: '90%',
+        alignSelf: 'center',
+    },
+
+    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%',
+    },
+
+    
+
+    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: '#316B83', // Set the border color
+        borderRadius: 10, // Set border radius for rounded corners
+        padding: 20, // Add padding around the content
+        marginBottom: -20, // Add bottom margin for spacing
+        width: '98%', // 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.45,
+        shadowRadius: 8.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,
+    },
+
+    contentContainer: {
+        paddingBottom: 20, // Adds padding at the bottom
+    },
+    qrCodeBox: {
+        width: '90%',
+        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:50
+    },
+    qrCodeImage: {
+        width: 250, // Adjust size as needed
+        height: 200, // Adjust size as needed
+    },
+    qrCodeImage1:{
+        width: 200, // Adjust size as needed
+        height: 200,
+    },
+    orButton: {
+        marginTop: 30,
+        backgroundColor:'#5F939A',
+        padding: 10,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'left',
+        flexDirection: 'row', // Align icon and text in a row
+        width: '100%', // Make the button wider
+        shadowColor: "#000",
+        shadowOffset: {
+        width: 0,
+        height: 6,
+    },
+        shadowOpacity: 0.20,
+        shadowRadius: 4.65,
+        elevation: 12,
+    },
+    orButtonText: {
+        color: COLORS.white,
+        fontSize: 16,
+       
+        marginLeft: 10, // Give some space after the icon
+    },
+    buttonIcon: {
+        width: 30,
+        height: 30,
+        marginLeft:10
+    },
+    dscriptionText: {
+        fontSize: 14,
+        textAlign: 'center',
+        color: COLORS.darkGray,
+        marginTop: 20,
+        marginBottom: 20,
+    },
+    contactCard: {
+        backgroundColor: '#5F939A',
+        padding: 15,
+        borderRadius:20,
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 4,
+        },
+        shadowOpacity: 0.30,
+        shadowRadius: 4.65,
+        elevation: 8,
+        width: '110%',
+        marginVertical: 10,
+        alignItems: 'left',
+    },
+    contactName: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: COLORS.white,
+    },
+    contactTitle: {
+        fontSize: 16,
+        color: COLORS.white,
+    },
+    contactInfo: {
+        fontSize: 14,
+        color: COLORS.white,
+    },
+    contactSpace: {
+        height: 10, // Space between title and contact info
+    },
+    contactIcon: {
+        width: 16,
+        height: 16,
+        marginRight: 8,
+    },
+
+   
+    
+    // ... possibly other styles
+});
+
+export default Additionalinformation5;
\ No newline at end of file