Merge branch 'final-app' of http://gitlab.sliit.lk/2023-24-005/emidwife-new into chatbot-develop

src/constants/imgs.js

@@ -76,4 +76,20 @@ export default {
   home_emotional_support: require('../assets/virtual-assistant.png'),
   home_skin: require('../assets/home_skin.png'),
   logo: require('../assets/foreground.png'),
+  sk_17: require('../assets/sk_17.png'),
+  sk_18: require('../assets/sk_18.png'),
+  sk_19: require('../assets/sk_19.png'),
+  sk_20: require('../assets/sk_20.png'),
+  sk_21: require('../assets/sk_21.png'),
+  sk_22: require('../assets/sk_22.png'),
+  sk_23: require('../assets/sk_23.jpg'),
+  sk_24: require('../assets/sk_24.jpg'),
+  sk_25: require('../assets/sk_25.png'),
+  sk_26: require('../assets/sk_26.png'),
+  sk_27: require('../assets/sk_27.png'),
+  sk_28: require('../assets/sk_28.png'),
+  sk_29: require('../assets/sk_29.png'),
+  sk_30: require('../assets/sk_30.png'),
+  sk_31: require('../assets/sk_31.png'),
+  sk_32: require('../assets/sk_32.png'),
 };

src/constants/routes.js

@@ -34,7 +34,7 @@ export default {
   SKIN_VIDEO3: 'Skin_Video3',
   SKIN_VIDEO4: 'Skin_Video4',
   SKIN_VIDEO5: 'Skin_Video5',
-  SKIN_INFO: 'skin_info',
+  
 
   //GAMES
   GAME_WELCOME: 'Game_Welcome',
@@ -88,4 +88,10 @@ export default {
   Game02ProgressLevel09: 'Game02ProgressLevel09',
   Game02ProgressLevel08: 'Game02ProgressLevel08',
   Game02ProgressLevel07: 'Game02ProgressLevel07',
+  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/Home.js

@@ -32,7 +32,7 @@ const Home = ({navigation}) => {
       name: 'Get Emotional Support',
       image: IMGS.home_emotional_support,
       backgroundColor: COLORS.main_blue,
-      navigateTo: ROUTES.HOME,
+      navigateTo: ROUTES.CHAT_HOME,
     },
   ];
   return (

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);
         }
@@ -122,6 +122,35 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
       <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
             <View style={styles.topContainer}>
             <Text style={styles.topicText}>Discoid Additional Symptoms </Text>
+            <View style={styles.qrCodeBox1}>
+                          <Image
+                            source={IMGS.sk_24}  // Make sure the path is correct
+                            style={styles.qrCodeImage1}
+                        />
+                        <Text style={styles.dscriptionText1}>
+                        මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත. 
+                        වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
+                        </Text>
+                        <Text style={styles.dscriptionText1}>
+                        Check if you have the symptoms listed below. Watch the video for guidance. 
+                        If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
+                        </Text>
+                         
+            </View>
+            <Image source={IMGS.sk_25}
+                        style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
+                        
+            <View style={styles.qrCodeBox}>
+                        <Image
+                            source={IMGS.sk_26}  // Make sure the path is correct
+                            style={styles.qrCodeImage1}
+                        />
+                         <TouchableOpacity
+                          style={styles.orButton}
+                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
+                                 <Text style={styles.orButtonText}>OR Click This</Text>
+                        </TouchableOpacity>
+            </View>
             <View style={styles.videoBox}>
                     <View style={styles.videoDescriptionBox}>
             <Text style={styles.descriptionText}>
@@ -142,26 +171,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
             <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
                 <Image
                     style={styles.playPauseIcon}
-                    source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                    source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
                 />
             </TouchableOpacity>
             )}
             </TouchableOpacity>
             </View>
-            <Image source={require('./skinassets/scanme.png')}
-                        style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
-            <View style={styles.qrCodeBox}>
-                        <Image
-                            source={require('./skinassets/QR1.png')}  // Make sure the path is correct
-                            style={styles.qrCodeImage}
-                        />
-                         <TouchableOpacity
-                          style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
-                                 <Text style={styles.orButtonText}>OR Click This</Text>
-                        </TouchableOpacity>
-            </View>
-            <Text style={styles.checkboxLabel}>Check the related box</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}>
@@ -183,7 +200,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                 </View>
 
                 <Button
-                    title="Continue for more information"
+                    title="Evaluate the risk level"
                     style={styles.nextButton}
                     onPress={handleSubmit} 
                 />
@@ -210,7 +227,6 @@ const styles = StyleSheet.create({
         backgroundColor: COLORS.white,
     // This creates the curve effect for the background
     },
-  
     topicText: {
         fontSize: 24,
         fontWeight: 'bold',
@@ -248,8 +264,8 @@ const styles = StyleSheet.create({
         
     },
     checkboxLabel: {
-        fontSize: 18,
-        fontWeight: 'bold',
+        fontSize: 16,
+        
         marginBottom: 10,
         alignSelf: 'center',
         color:COLORS.black,
@@ -335,7 +351,7 @@ const styles = StyleSheet.create({
         borderColor: '#80BCBD', // 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
+        marginBottom: 40, // Add bottom margin for spacing
         width: '100%', // Adjust the width as necessary
         alignSelf: 'center', // Center the box within its container
         // Add shadows for elevation effect (optional)
@@ -375,7 +391,7 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         padding: 20,
         backgroundColor: COLORS.white,
-        marginBottom: 20,
+        marginBottom: 40,
         shadowColor: "#000",
         borderColor: '#80BCBD',
         borderWidth: 2,
@@ -387,6 +403,7 @@ const styles = StyleSheet.create({
         shadowOpacity: 0.25,
         shadowRadius: 3.84,
         elevation: 5,
+        marginTop:16
     },
     qrCodeImage: {
         width: 200, // Adjust size as needed
@@ -404,6 +421,38 @@ const styles = StyleSheet.create({
         color: COLORS.white,
         fontSize: 14,
         fontWeight: 'bold',
+    },
+    qrCodeBox1: {
+        width: '95%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 30,
+        backgroundColor: COLORS.white,
+        marginBottom: 40,
+        shadowColor: "#000",
+        borderColor: '#80BCBD',
+        borderWidth: 2,
+        borderRadius: 10,
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 10,
+        marginTop:10
+    },
+   
+    qrCodeImage1:{
+        width: 210, // Adjust size as needed
+        height: 170,
+    },
+    dscriptionText1: {
+        fontSize: 14,
+        textAlign: 'center',
+        color: COLORS.darkGray,
+        marginTop: 20,
+        marginBottom: 20,
     }
 
    
@@ -411,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);
         }
     };
 
@@ -115,7 +115,36 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
         <SafeAreaView style={styles.container}>
           <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
                 <View style={styles.topContainer}>
-              <Text style={styles.topicText}>Patechiae Additional Symptoms</Text>
+                <Text style={styles.topicText}>Peteachie Additional Symptoms </Text>
+                <View style={styles.qrCodeBox1}>
+                              <Image
+                                source={IMGS.sk_24}   // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                            <Text style={styles.dscriptionText1}>
+                            මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත. 
+                            වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
+                            </Text>
+                            <Text style={styles.dscriptionText1}>
+                            Check if you have the symptoms listed below. Watch the video for guidance. 
+                            If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
+                            </Text>
+                             
+                </View>
+                <Image source={IMGS.sk_25}
+                            style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
+                            
+                <View style={styles.qrCodeBox}>
+                            <Image
+                                source={IMGS.sk_27}  // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                             <TouchableOpacity
+                              style={styles.orButton}
+                                      onPress={() => Linking.openURL('https://mywebar.com/p/Project_1_kashsimytd')}>
+                                     <Text style={styles.orButtonText}>OR Click This</Text>
+                            </TouchableOpacity>
+                </View>
                 <View style={styles.videoBox}>
                         <View style={styles.videoDescriptionBox}>
                 <Text style={styles.descriptionText}>
@@ -136,26 +165,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                 <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
                     <Image
                         style={styles.playPauseIcon}
-                    source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                        source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
                     />
                 </TouchableOpacity>
                 )}
                 </TouchableOpacity>
                 </View>
-            <Image source={require('./skinassets/scanme.png')}
-                        style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
-            <View style={styles.qrCodeBox}>
-                        <Image
-                            source={require('./skinassets/QR1.png')}  // Make sure the path is correct
-                            style={styles.qrCodeImage}
-                        />
-                         <TouchableOpacity
-                          style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
-                                 <Text style={styles.orButtonText}>OR Click This</Text>
-                        </TouchableOpacity>
-            </View>
-            <Text style={styles.checkboxLabel}>Check the related box</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}>
@@ -177,17 +194,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                     </View>
     
                     <Button
-                    title="Continue for more information"
+                        title="Evaluate the risk level"
                         style={styles.nextButton}
                         onPress={handleSubmit} 
                     />
                 </ScrollView>
             </SafeAreaView>
         );
-};
+    };
     
     
-const styles = StyleSheet.create({
+    const styles = StyleSheet.create({
         scrollContainer: {
             flexGrow: 1,
         },
@@ -204,7 +221,6 @@ const styles = StyleSheet.create({
             backgroundColor: COLORS.white,
         // This creates the curve effect for the background
         },
-  
         topicText: {
             fontSize: 24,
             fontWeight: 'bold',
@@ -217,7 +233,7 @@ const styles = StyleSheet.create({
             textAlign: 'center',
             marginHorizontal: 20,
             marginBottom: 20,
-        color:COLORS.black,
+            color:COLORS.white,
             fontWeight: 'bold',
         },
         separator: {
@@ -242,8 +258,8 @@ const styles = StyleSheet.create({
             
         },
         checkboxLabel: {
-        fontSize: 18,
-        fontWeight: 'bold',
+            fontSize: 16,
+            
             marginBottom: 10,
             alignSelf: 'center',
             color:COLORS.black,
@@ -324,12 +340,12 @@ const styles = StyleSheet.create({
         },
     
         videoBox: {
-        backgroundColor: COLORS.white, // Set background color to white
+            backgroundColor: '#11324D', // Set background color to white
             borderWidth: 2, // Set the border width
             borderColor: '#80BCBD', // Set the border color
             borderRadius: 10, // Set border radius for rounded corners
             padding: 20, // Add padding around the content
-        marginBottom: -20, // Add bottom margin for spacing
+            marginBottom: 40, // Add bottom margin for spacing
             width: '100%', // Adjust the width as necessary
             alignSelf: 'center', // Center the box within its container
             // Add shadows for elevation effect (optional)
@@ -369,7 +385,7 @@ const styles = StyleSheet.create({
             alignItems: 'center',
             padding: 20,
             backgroundColor: COLORS.white,
-        marginBottom: 20,
+            marginBottom: 40,
             shadowColor: "#000",
             borderColor: '#80BCBD',
             borderWidth: 2,
@@ -381,6 +397,7 @@ const styles = StyleSheet.create({
             shadowOpacity: 0.25,
             shadowRadius: 3.84,
             elevation: 5,
+            marginTop:16
         },
         qrCodeImage: {
             width: 200, // Adjust size as needed
@@ -398,11 +415,44 @@ const styles = StyleSheet.create({
             color: COLORS.white,
             fontSize: 14,
             fontWeight: 'bold',
+        },
+        qrCodeBox1: {
+            width: '95%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: 30,
+            backgroundColor: COLORS.white,
+            marginBottom: 40,
+            shadowColor: "#000",
+            borderColor: '#80BCBD',
+            borderWidth: 2,
+            borderRadius: 10,
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+            elevation: 10,
+            marginTop:10
+        },
+       
+        qrCodeImage1:{
+            width: 210, // Adjust size as needed
+            height: 170,
+        },
+        dscriptionText1: {
+            fontSize: 14,
+            textAlign: 'center',
+            color: COLORS.darkGray,
+            marginTop: 20,
+            marginBottom: 20,
         }
     
        
         
         // ... possibly other styles
-});
+    });
+    
 
-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);
         }
@@ -111,7 +111,36 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
         <SafeAreaView style={styles.container}>
           <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
                 <View style={styles.topContainer}>
-              <Text style={styles.topicText}>Cytomegalovirus Additional Symptoms</Text>
+                <Text style={styles.topicText}>Cytomegalovirus Additional Symptoms </Text>
+                <View style={styles.qrCodeBox1}>
+                              <Image
+                                source={IMGS.sk_24}    // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                            <Text style={styles.dscriptionText1}>
+                            මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත. 
+                            වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
+                            </Text>
+                            <Text style={styles.dscriptionText1}>
+                            Check if you have the symptoms listed below. Watch the video for guidance. 
+                            If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
+                            </Text>
+                             
+                </View>
+                <Image source={IMGS.sk_25}
+                            style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
+                            
+                <View style={styles.qrCodeBox}>
+                            <Image
+                                source={IMGS.sk_29}  // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                             <TouchableOpacity
+                              style={styles.orButton}
+                                      onPress={() => Linking.openURL('https://mywebar.com/p/Project_3_oq5mkmz3uu')}>
+                                     <Text style={styles.orButtonText}>OR Click This</Text>
+                            </TouchableOpacity>
+                </View>
                 <View style={styles.videoBox}>
                         <View style={styles.videoDescriptionBox}>
                 <Text style={styles.descriptionText}>
@@ -132,26 +161,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                 <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
                     <Image
                         style={styles.playPauseIcon}
-                    source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                        source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
                     />
                 </TouchableOpacity>
                 )}
                 </TouchableOpacity>
                 </View>
-            <Image source={require('./skinassets/scanme.png')}
-                        style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
-            <View style={styles.qrCodeBox}>
-                        <Image
-                            source={require('./skinassets/QR1.png')}  // Make sure the path is correct
-                            style={styles.qrCodeImage}
-                        />
-                         <TouchableOpacity
-                          style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
-                                 <Text style={styles.orButtonText}>OR Click This</Text>
-                        </TouchableOpacity>
-            </View>
-            <Text style={styles.checkboxLabel}>Check the related box</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}>
@@ -173,17 +190,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                     </View>
     
                     <Button
-                    title="Continue for more information"
+                        title="Evaluate the risk level"
                         style={styles.nextButton}
                         onPress={handleSubmit} 
                     />
                 </ScrollView>
             </SafeAreaView>
         );
-};
+    };
     
     
-const styles = StyleSheet.create({
+    const styles = StyleSheet.create({
         scrollContainer: {
             flexGrow: 1,
         },
@@ -200,7 +217,6 @@ const styles = StyleSheet.create({
             backgroundColor: COLORS.white,
         // This creates the curve effect for the background
         },
-  
         topicText: {
             fontSize: 24,
             fontWeight: 'bold',
@@ -213,7 +229,7 @@ const styles = StyleSheet.create({
             textAlign: 'center',
             marginHorizontal: 20,
             marginBottom: 20,
-        color:COLORS.black,
+            color:COLORS.white,
             fontWeight: 'bold',
         },
         separator: {
@@ -238,8 +254,8 @@ const styles = StyleSheet.create({
             
         },
         checkboxLabel: {
-        fontSize: 18,
-        fontWeight: 'bold',
+            fontSize: 16,
+            
             marginBottom: 10,
             alignSelf: 'center',
             color:COLORS.black,
@@ -320,12 +336,12 @@ const styles = StyleSheet.create({
         },
     
         videoBox: {
-        backgroundColor: COLORS.white, // Set background color to white
+            backgroundColor: '#11324D', // Set background color to white
             borderWidth: 2, // Set the border width
             borderColor: '#80BCBD', // Set the border color
             borderRadius: 10, // Set border radius for rounded corners
             padding: 20, // Add padding around the content
-        marginBottom: -20, // Add bottom margin for spacing
+            marginBottom: 40, // Add bottom margin for spacing
             width: '100%', // Adjust the width as necessary
             alignSelf: 'center', // Center the box within its container
             // Add shadows for elevation effect (optional)
@@ -365,7 +381,7 @@ const styles = StyleSheet.create({
             alignItems: 'center',
             padding: 20,
             backgroundColor: COLORS.white,
-        marginBottom: 20,
+            marginBottom: 40,
             shadowColor: "#000",
             borderColor: '#80BCBD',
             borderWidth: 2,
@@ -377,6 +393,7 @@ const styles = StyleSheet.create({
             shadowOpacity: 0.25,
             shadowRadius: 3.84,
             elevation: 5,
+            marginTop:16
         },
         qrCodeImage: {
             width: 200, // Adjust size as needed
@@ -394,11 +411,44 @@ const styles = StyleSheet.create({
             color: COLORS.white,
             fontSize: 14,
             fontWeight: 'bold',
+        },
+        qrCodeBox1: {
+            width: '95%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: 30,
+            backgroundColor: COLORS.white,
+            marginBottom: 40,
+            shadowColor: "#000",
+            borderColor: '#80BCBD',
+            borderWidth: 2,
+            borderRadius: 10,
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+            elevation: 10,
+            marginTop:10
+        },
+       
+        qrCodeImage1:{
+            width: 210, // Adjust size as needed
+            height: 170,
+        },
+        dscriptionText1: {
+            fontSize: 14,
+            textAlign: 'center',
+            color: COLORS.darkGray,
+            marginTop: 20,
+            marginBottom: 20,
         }
     
        
         
         // ... possibly other styles
-});
+    });
+    
 
-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);
         }
@@ -106,7 +106,36 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
         <SafeAreaView style={styles.container}>
           <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
                 <View style={styles.topContainer}>
-              <Text style={styles.topicText}>Herpes Additional Symptoms</Text>
+                <Text style={styles.topicText}>Herpes Additional Symptoms </Text>
+                <View style={styles.qrCodeBox1}>
+                              <Image
+                                source={IMGS.sk_24}  // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                            <Text style={styles.dscriptionText1}>
+                            මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත. 
+                            වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
+                            </Text>
+                            <Text style={styles.dscriptionText1}>
+                            Check if you have the symptoms listed below. Watch the video for guidance. 
+                            If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
+                            </Text>
+                             
+                </View>
+                <Image source={IMGS.sk_25} 
+                            style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
+                            
+                <View style={styles.qrCodeBox}>
+                            <Image
+                                source={IMGS.sk_28}  // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                             <TouchableOpacity
+                              style={styles.orButton}
+                                      onPress={() => Linking.openURL('https://mywebar.com/p/Project_2_qbealmm517')}>
+                                     <Text style={styles.orButtonText}>OR Click This</Text>
+                            </TouchableOpacity>
+                </View>
                 <View style={styles.videoBox}>
                         <View style={styles.videoDescriptionBox}>
                 <Text style={styles.descriptionText}>
@@ -127,26 +156,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                 <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
                     <Image
                         style={styles.playPauseIcon}
-                    source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                        source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
                     />
                 </TouchableOpacity>
                 )}
                 </TouchableOpacity>
                 </View>
-            <Image source={require('./skinassets/scanme.png')}
-                        style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
-            <View style={styles.qrCodeBox}>
-                        <Image
-                            source={require('./skinassets/QR1.png')}  // Make sure the path is correct
-                            style={styles.qrCodeImage}
-                        />
-                         <TouchableOpacity
-                          style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
-                                 <Text style={styles.orButtonText}>OR Click This</Text>
-                        </TouchableOpacity>
-            </View>
-            <Text style={styles.checkboxLabel}>Check the related box</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}>
@@ -168,17 +185,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                     </View>
     
                     <Button
-                    title="Continue for more information"
+                        title="Evaluate the risk level"
                         style={styles.nextButton}
                         onPress={handleSubmit} 
                     />
                 </ScrollView>
             </SafeAreaView>
         );
-};
+    };
     
     
-const styles = StyleSheet.create({
+    const styles = StyleSheet.create({
         scrollContainer: {
             flexGrow: 1,
         },
@@ -195,7 +212,6 @@ const styles = StyleSheet.create({
             backgroundColor: COLORS.white,
         // This creates the curve effect for the background
         },
-  
         topicText: {
             fontSize: 24,
             fontWeight: 'bold',
@@ -208,7 +224,7 @@ const styles = StyleSheet.create({
             textAlign: 'center',
             marginHorizontal: 20,
             marginBottom: 20,
-        color:COLORS.black,
+            color:COLORS.white,
             fontWeight: 'bold',
         },
         separator: {
@@ -233,8 +249,8 @@ const styles = StyleSheet.create({
             
         },
         checkboxLabel: {
-        fontSize: 18,
-        fontWeight: 'bold',
+            fontSize: 16,
+            
             marginBottom: 10,
             alignSelf: 'center',
             color:COLORS.black,
@@ -315,12 +331,12 @@ const styles = StyleSheet.create({
         },
     
         videoBox: {
-        backgroundColor: COLORS.white, // Set background color to white
+            backgroundColor: '#11324D', // Set background color to white
             borderWidth: 2, // Set the border width
             borderColor: '#80BCBD', // Set the border color
             borderRadius: 10, // Set border radius for rounded corners
             padding: 20, // Add padding around the content
-        marginBottom: -20, // Add bottom margin for spacing
+            marginBottom: 40, // Add bottom margin for spacing
             width: '100%', // Adjust the width as necessary
             alignSelf: 'center', // Center the box within its container
             // Add shadows for elevation effect (optional)
@@ -360,7 +376,7 @@ const styles = StyleSheet.create({
             alignItems: 'center',
             padding: 20,
             backgroundColor: COLORS.white,
-        marginBottom: 20,
+            marginBottom: 40,
             shadowColor: "#000",
             borderColor: '#80BCBD',
             borderWidth: 2,
@@ -372,6 +388,7 @@ const styles = StyleSheet.create({
             shadowOpacity: 0.25,
             shadowRadius: 3.84,
             elevation: 5,
+            marginTop:16
         },
         qrCodeImage: {
             width: 200, // Adjust size as needed
@@ -389,11 +406,43 @@ const styles = StyleSheet.create({
             color: COLORS.white,
             fontSize: 14,
             fontWeight: 'bold',
+        },
+        qrCodeBox1: {
+            width: '95%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: 30,
+            backgroundColor: COLORS.white,
+            marginBottom: 40,
+            shadowColor: "#000",
+            borderColor: '#80BCBD',
+            borderWidth: 2,
+            borderRadius: 10,
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+            elevation: 10,
+            marginTop:10
+        },
+       
+        qrCodeImage1:{
+            width: 210, // Adjust size as needed
+            height: 170,
+        },
+        dscriptionText1: {
+            fontSize: 14,
+            textAlign: 'center',
+            color: COLORS.darkGray,
+            marginTop: 20,
+            marginBottom: 20,
         }
     
        
         
         // ... 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,
@@ -112,17 +112,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
             <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
                 <Image
                     style={styles.playPauseIcon}
-                    source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                    source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
                 />
             </TouchableOpacity>
             )}
             </TouchableOpacity>
             </View>
-            <Image source={require('./skinassets/scanme.png')}
+            <Image source={IMGS.sk_25} 
                         style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
             <View style={styles.qrCodeBox}>
                         <Image
-                            source={require('./skinassets/QR1.png')}  // Make sure the path is correct
+                            source={IMGS.sk_26}  // Make sure the path is correct
                             style={styles.qrCodeImage}
                         />
                          <TouchableOpacity
@@ -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);
         }
@@ -104,7 +104,36 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
         <SafeAreaView style={styles.container}>
           <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
                 <View style={styles.topContainer}>
-              <Text style={styles.topicText}>Melanoma Additional Symptoms</Text>
+                <Text style={styles.topicText}>Melanoma Additional Symptoms </Text>
+                <View style={styles.qrCodeBox1}>
+                              <Image
+                                source={IMGS.sk_24}  // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                            <Text style={styles.dscriptionText1}>
+                            මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත. 
+                            වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
+                            </Text>
+                            <Text style={styles.dscriptionText1}>
+                            Check if you have the symptoms listed below. Watch the video for guidance. 
+                            If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
+                            </Text>
+                             
+                </View>
+                <Image source={IMGS.sk_25}
+                            style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
+                            
+                <View style={styles.qrCodeBox}>
+                            <Image
+                                source={IMGS.sk_30}  // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                             <TouchableOpacity
+                              style={styles.orButton}
+                                      onPress={() => Linking.openURL('https://mywebar.com/p/Project_4_wzkzvl12m')}>
+                                     <Text style={styles.orButtonText}>OR Click This</Text>
+                            </TouchableOpacity>
+                </View>
                 <View style={styles.videoBox}>
                         <View style={styles.videoDescriptionBox}>
                 <Text style={styles.descriptionText}>
@@ -125,26 +154,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                 <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
                     <Image
                         style={styles.playPauseIcon}
-                    source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                        source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
                     />
                 </TouchableOpacity>
                 )}
                 </TouchableOpacity>
                 </View>
-            <Image source={require('./skinassets/scanme.png')}
-                        style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
-            <View style={styles.qrCodeBox}>
-                        <Image
-                            source={require('./skinassets/QR1.png')}  // Make sure the path is correct
-                            style={styles.qrCodeImage}
-                        />
-                         <TouchableOpacity
-                          style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
-                                 <Text style={styles.orButtonText}>OR Click This</Text>
-                        </TouchableOpacity>
-            </View>
-            <Text style={styles.checkboxLabel}>Check the related box</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}>
@@ -166,17 +183,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                     </View>
     
                     <Button
-                    title="Continue for more information"
+                        title="Evaluate the risk level"
                         style={styles.nextButton}
                         onPress={handleSubmit} 
                     />
                 </ScrollView>
             </SafeAreaView>
         );
-};
+    };
     
     
-const styles = StyleSheet.create({
+    const styles = StyleSheet.create({
         scrollContainer: {
             flexGrow: 1,
         },
@@ -193,7 +210,6 @@ const styles = StyleSheet.create({
             backgroundColor: COLORS.white,
         // This creates the curve effect for the background
         },
-  
         topicText: {
             fontSize: 24,
             fontWeight: 'bold',
@@ -206,7 +222,7 @@ const styles = StyleSheet.create({
             textAlign: 'center',
             marginHorizontal: 20,
             marginBottom: 20,
-        color:COLORS.black,
+            color:COLORS.white,
             fontWeight: 'bold',
         },
         separator: {
@@ -231,8 +247,8 @@ const styles = StyleSheet.create({
             
         },
         checkboxLabel: {
-        fontSize: 18,
-        fontWeight: 'bold',
+            fontSize: 16,
+            
             marginBottom: 10,
             alignSelf: 'center',
             color:COLORS.black,
@@ -313,12 +329,12 @@ const styles = StyleSheet.create({
         },
     
         videoBox: {
-        backgroundColor: COLORS.white, // Set background color to white
+            backgroundColor: '#11324D', // Set background color to white
             borderWidth: 2, // Set the border width
             borderColor: '#80BCBD', // Set the border color
             borderRadius: 10, // Set border radius for rounded corners
             padding: 20, // Add padding around the content
-        marginBottom: -20, // Add bottom margin for spacing
+            marginBottom: 40, // Add bottom margin for spacing
             width: '100%', // Adjust the width as necessary
             alignSelf: 'center', // Center the box within its container
             // Add shadows for elevation effect (optional)
@@ -358,7 +374,7 @@ const styles = StyleSheet.create({
             alignItems: 'center',
             padding: 20,
             backgroundColor: COLORS.white,
-        marginBottom: 20,
+            marginBottom: 40,
             shadowColor: "#000",
             borderColor: '#80BCBD',
             borderWidth: 2,
@@ -370,6 +386,7 @@ const styles = StyleSheet.create({
             shadowOpacity: 0.25,
             shadowRadius: 3.84,
             elevation: 5,
+            marginTop:16
         },
         qrCodeImage: {
             width: 200, // Adjust size as needed
@@ -387,11 +404,43 @@ const styles = StyleSheet.create({
             color: COLORS.white,
             fontSize: 14,
             fontWeight: 'bold',
+        },
+        qrCodeBox1: {
+            width: '95%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: 30,
+            backgroundColor: COLORS.white,
+            marginBottom: 40,
+            shadowColor: "#000",
+            borderColor: '#80BCBD',
+            borderWidth: 2,
+            borderRadius: 10,
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+            elevation: 10,
+            marginTop:10
+        },
+       
+        qrCodeImage1:{
+            width: 210, // Adjust size as needed
+            height: 170,
+        },
+        dscriptionText1: {
+            fontSize: 14,
+            textAlign: 'center',
+            color: COLORS.darkGray,
+            marginTop: 20,
+            marginBottom: 20,
         }
     
        
         
         // ... possibly other styles
-});
+    });
 
-export default AdditionalSymptomsScreen;
+export default AdditionalSymptomsScreen6;

src/screens/home/skin/SkinRisk.js

-import React, { useState } from 'react';
-import { View, StyleSheet, Text, TouchableOpacity, ScrollView, Image } from 'react-native';
+import React, { useState,useRef, useEffect  } from 'react';
+import { View, StyleSheet, Text, TouchableOpacity, ScrollView, Image, Animated, Easing  } from 'react-native';
 // import Video from 'react-native-video'; // or any other audio player you prefer
 import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
 import { COLORS, IMGS, ROUTES } from '../../../constants';
 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;
 
 
-    const [audioPaused, setAudioPaused] = useState(true);
+    useEffect(() => {
+        if (audioPaused) {
+            progressAnim.stopAnimation();
+        } else {
+            Animated.timing(progressAnim, {
+                toValue: 1,
+                duration: 30000, // Duration of the audio file in milliseconds
+                easing: Easing.linear,
+                useNativeDriver: false,
+            }).start();
+        }
+    }, [audioPaused]);
+
+    const togglePlayPause = () => {
+        setAudioPaused(!audioPaused);
+        if (!audioPaused) {
+            progressAnim.stopAnimation();
+            progressAnim.setValue(0);
+        }
+    };
 
-    // Function to handle the continuation to the next screen
     const handleContinue = () => {
-        // navigation.navigate('NextScreenRoute');
+        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 (
-        <View style={styles.container}>
+        <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>
-                <Text style={styles.subTopicText}>Why High Risk ?</Text>
-                <View style={styles.audioPlayerContainer}>
-                 {/* <Video
-                    source={require("./skinassets/pause.png")} 
-                    style={styles.audioPlayer}
-                     controls={true} 
-                      audioOnly={true} 
-                     resizeMode="cover" // Cover the audio's aspect ratio
-                     paused={audioPaused}  
-                     repeat={true}
-                     onLoad={() => setAudioPaused(false)}
+                <Text style={styles.subTopicText}>Please listen to the below audio</Text>            
                
-    /> */}
+                 <Image source={IMGS.sk_31} style={styles.musicIcon} />
+                <View style={styles.playerContainer}>
+                <View style={styles.controlsContainer}>
+                        <TouchableOpacity onPress={togglePlayPause} style={styles.playPauseButton}>
+                            <Image
+                                source={audioPaused ? IMGS.sk_20 : IMGS.sk_19}
+                                style={styles.playPauseIcon}
+                            />
+                        </TouchableOpacity>
+                <Video
+                        ref={audioRef}
+                        source={{ uri: URL_link }}
+                        paused={audioPaused}
+                        audioOnly={true}
+                        onEnd={() => setAudioPaused(true)}
+                    />
+                <View style={styles.progressContainer}>
+                            <Image source={IMGS.sk_32} style={styles.progressBarBackground} />
+                            <Animated.View style={[styles.progressBar, { width: progressAnim.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: ['0%', '100%']
+                            }) }]} />
+                        </View>
+                        </View>
 </View>
                
+                
+            </View>
+            <View style={styles.bottomContainer}>
+
             <Image style={styles.babyImage} source={IMGS.sk_14} />
            
            <View style={styles.resultBox}>
-                    <Text style={styles.resultText}>High Risk</Text>
-                </View>
+               <Text style={styles.resultText}>Most likley to be High Risk</Text>
            </View>
-            <View style={styles.bottomContainer}>
             <Button
-                    title="Continue for more information"
+                    title="What should I do next"
                     style={styles.nextButton}
-                    onPress={() => navigation.navigate(ROUTES.SKIN_INFO)}
+                    onPress={handleContinue}
                 />
             </View>
-            </View>
+            </SafeAreaView>
       
     );
 };
@@ -78,6 +136,7 @@ const styles = StyleSheet.create({
         color: COLORS.black,
         textAlign: 'center',
         marginVertical: 20,
+        marginTop:-60
     },
     descriptionText: {
         fontSize: 16,
@@ -156,29 +215,72 @@ const styles = StyleSheet.create({
         shadowRadius: 3.84, // Shadow radius for iOS
         elevation: 5, // Elevation for Android
         alignSelf: 'center',
-        marginTop: 148, // Adjust the margin to fit your layout
-        marginLeft:20
+        marginTop: 80, // Adjust the margin to fit your layout
+        marginLeft:10,
+        bottom:117
     },
-
     audioPlayerContainer: {
-        width: '90%',
-        height: 50, // Set a fixed height for the audio player container
-        alignSelf: 'center',
-        justifyContent: 'center',
-        marginTop: 20, // Space between the text and the player
+        alignItems: 'center',
+        marginBottom: 20,
+    },
+    musicIcon: {
+        width: 60,
+        height: 60,
+        marginBottom: -10,
+        marginTop:30
     },
 
-    audioPlayer: {
-        width: '100%', // Fill the container width
-        height: '100%', // Fill the container height
-        // Add more styles as needed
+    controlsContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    playPauseButton: {
+        marginRight: 20,
+    },
+    playPauseIcon: {
+        width: 30,
+        height: 30,
+        marginTop:1,
+        marginLeft:10
+    },
+    progressContainer: {
+        flex: 1,
+        height: 30,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop:1,
+        marginRight:40
     },
+    playerContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: COLORS.white,
+        borderWidth: 0.5,
+        borderColor: COLORS.lightGray,
+        borderRadius: 10,
+        padding: 10,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+        width: '90%',
+        height:'10%',
+        justifyContent: 'space-between',
+        bottom:-20
+    },
+    progressBarBackground: {
+        width: '140%',
+        height: '70%',
+        position: 'absolute',
+    },
+  
     babyImage: {
         position: 'absolute', // Use absolute positioning
         width: 200,
         height: 100,
         resizeMode: 'contain',
-        bottom: 70, // Adjust this value based on the height of your result box + desired gap
+        bottom: 320, // Adjust this value based on the height of your result box + desired gap
         alignSelf: 'center', // Center the image horizontally
         marginLeft:40,
         marginRight:100,

src/screens/home/skin/SkinUploader.js

@@ -136,12 +136,12 @@ const Camera = ({ navigation }) => {
         )}
             {prediction && (
             <View style={styles.predictionContainer}>
-                <Text style={styles.predictionText}>Predicted Class: {prediction.class}</Text>
-                 <Text style={styles.predictionText}>Confidence: {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
-                    title="Continue for more information"
+                    title="Take your next step"
                     style={styles.nextButton}
                     onPress={handleContinue}
                 />
@@ -239,7 +239,7 @@ const styles = StyleSheet.create({
            
         },
         nextButton: {
-            width: '70%',
+            width: '90%',
             paddingVertical: 10,
             marginBottom: 80, // Adjust the margin to move the button up further if necessary
             backgroundColor: COLORS.white,
@@ -279,6 +279,8 @@ const styles = StyleSheet.create({
             shadowOffset: { width: 0, height: 2 }, // iOS shadow
             shadowOpacity: 0.1, // iOS shadow
             shadowRadius: 2, // iOS shadow
+            bottom:75,
+            top:-10
         },
         resultsHeading: {
             fontSize: 16,
@@ -286,7 +288,7 @@ const styles = StyleSheet.create({
             fontWeight: 'bold',
             padding: 10,
             textAlign: 'center',
-            marginBottom: 100,
+            marginBottom: 90,
             marginLeft:0
         },
 

src/screens/home/skin/WelcomeSkin.js

@@ -18,7 +18,6 @@ import {COLORS, IMGS, ROUTES} from '../../../constants';
 import Button from '../../../components/Button';
 
 
-
 const WelcomeExercise = ({ navigation }) => {
     return (
         <LinearGradient
@@ -44,19 +43,19 @@ const WelcomeExercise = ({ navigation }) => {
                         fontSize: 50,
                         // fontWeight: 800,
                         color: COLORS.white
-                    }}>Let's Get</Text>
+                    }}>Reveal Your</Text>
                     <Text style={{
                         fontSize: 46,
                         // fontWeight: 800,
                         color: COLORS.white
-                    }}>Started</Text>
+                    }}>Skin's Story</Text>
 
                     <View style={{ marginVertical: 22 }}>
                         <Text style={{
                             fontSize: 16,
                             color: COLORS.white,
                             marginVertical: 4
-                        }}>Reveal Your Skin's Story </Text>
+                        }}></Text>
                         <Text style={{
                             fontSize: 16,
                             color: COLORS.white,
@@ -64,7 +63,7 @@ const WelcomeExercise = ({ navigation }) => {
                     </View>
 
                     <Button
-                        title="Start Today"
+                        title="Diagnose"
                         style={{
                             marginTop: 12,
                             width: "100%",

src/screens/home/skin/information1.js

@@ -58,10 +58,10 @@ const Additionalinformation = ({ navigation }) => {
             <Text style={styles.contactTitle}>{title}</Text>
             <View style={styles.contactSpace} />
             <TouchableOpacity onPress={() => Linking.openURL(`tel:${phone}`)}>
-            <Image source={require('./skinassets/calling.png')} style={styles.contactIcon} />
+            <Image source={IMGS.sk_17} style={styles.contactIcon} />
                 <Text style={styles.contactInfo}>Phone: {phone}</Text>
             </TouchableOpacity>
-            <Image source={require('./skinassets/email.png')} style={styles.contactIcon} />
+            <Image source={IMGS.sk_18} style={styles.contactIcon} />
             <TouchableOpacity onPress={() => Linking.openURL(`mailto:${email}`)}>
                 <Text style={styles.contactInfo}>Email: {email}</Text>
             </TouchableOpacity>
@@ -116,7 +116,7 @@ const Additionalinformation = ({ navigation }) => {
             <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
                 <Image
                     style={styles.playPauseIcon}
-                    source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                    source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
                 />
             </TouchableOpacity>
             )}
@@ -125,7 +125,7 @@ const Additionalinformation = ({ navigation }) => {
         
             <View style={styles.qrCodeBox}>
                           <Image
-                            source={require('./skinassets/vector2.png')}  // Make sure the path is correct
+                            source={IMGS.sk_21}  // Make sure the path is correct
                             style={styles.qrCodeImage}
                         />
                         <Text style={styles.dscriptionText}>
@@ -138,7 +138,7 @@ const Additionalinformation = ({ navigation }) => {
                             style={styles.orButton}
                             onPress={() => Linking.openURL('https://youtu.be/sbrNx78JSV0?si=OsHd9sft8jDg1O1j')}>
                             <Image
-                                source={require('./skinassets/youtube.png')}
+                                source={IMGS.sk_22}
                                 style={styles.buttonIcon}
                             />
                             <Text style={styles.orButtonText}>Click here to view video</Text>
@@ -147,7 +147,7 @@ const Additionalinformation = ({ navigation }) => {
                             style={styles.orButton}
                             onPress={() => Linking.openURL('https://youtu.be/T9WQvX3W92A?si=dw7MhHk7TOpquJx_')}>
                             <Image
-                                source={require('./skinassets/youtube.png')}
+                                 source={IMGS.sk_22}
                                 style={styles.buttonIcon}
                             />
                             <Text style={styles.orButtonText}>Click here to view video</Text>
@@ -156,7 +156,7 @@ const Additionalinformation = ({ navigation }) => {
             </View>
             <View style={styles.qrCodeBox}>
                           <Image
-                            source={require('./skinassets/Vectorw.jpg')}  // Make sure the path is correct
+                             source={IMGS.sk_23} // Make sure the path is correct
                             style={styles.qrCodeImage1}
                         />
                         <Text style={styles.dscriptionText}>
@@ -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)}
                 />