feature_skin_risk_updated

src/screens/home/skin/AdditionalSymptoms.js

@@ -210,7 +210,6 @@ const styles = StyleSheet.create({
         backgroundColor: COLORS.white,
     // This creates the curve effect for the background
     },
-  
     topicText: {
         fontSize: 24,
         fontWeight: 'bold',

src/screens/home/skin/AdditionalSymptoms1.js

@@ -146,12 +146,12 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                         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={require('./skinassets/QR2.png')}  // Make sure the path is correct
                             style={styles.qrCodeImage}
                         />
                          <TouchableOpacity
                           style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
+                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_1_kashsimytd')}>
                                  <Text style={styles.orButtonText}>OR Click This</Text>
                         </TouchableOpacity>
             </View>

src/screens/home/skin/AdditionalSymptoms2.js

@@ -142,12 +142,12 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                         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={require('./skinassets/QR4.png')}  // Make sure the path is correct
                             style={styles.qrCodeImage}
                         />
                          <TouchableOpacity
                           style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
+                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_3_oq5mkmz3uu')}>
                                  <Text style={styles.orButtonText}>OR Click This</Text>
                         </TouchableOpacity>
             </View>

src/screens/home/skin/AdditionalSymptoms3.js

@@ -137,12 +137,12 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                         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={require('./skinassets/QR3.png')}  // Make sure the path is correct
                             style={styles.qrCodeImage}
                         />
                          <TouchableOpacity
                           style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
+                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_2_qbealmm517')}>
                                  <Text style={styles.orButtonText}>OR Click This</Text>
                         </TouchableOpacity>
             </View>

src/screens/home/skin/AdditionalSymptoms5.js

@@ -135,12 +135,12 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                         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={require('./skinassets/QR5.png')}  // Make sure the path is correct
                             style={styles.qrCodeImage}
                         />
                          <TouchableOpacity
                           style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
+                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_4_wzkzvl12m')}>
                                  <Text style={styles.orButtonText}>OR Click This</Text>
                         </TouchableOpacity>
             </View>

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 [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();
+        } 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);
+        }
+    };
+
+    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.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={require('./skinassets/musicicon.png')} style={styles.musicIcon} />
+                <View style={styles.playerContainer}>
+                <View style={styles.controlsContainer}>
+                        <TouchableOpacity onPress={togglePlayPause} style={styles.playPauseButton}>
+                            <Image
+                                source={audioPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                                style={styles.playPauseIcon}
+                            />
+                        </TouchableOpacity>
+                <Video
+                        ref={audioRef}
+                        source={{ uri: URL_link }}
+                        paused={audioPaused}
+                        audioOnly={true}
+                        onEnd={() => setAudioPaused(true)}
+                    />
+                <View style={styles.progressContainer}>
+                            <Image source={require('./skinassets/sound-waves.png')} style={styles.progressBarBackground} />
+                            <Animated.View style={[styles.progressBar, { width: progressAnim.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: ['0%', '100%']
+                            }) }]} />
+                        </View>
+                        </View>
 </View>
                
-                <Image style={styles.babyImage} source={IMGS.sk_14} />
-           
-                <View style={styles.resultBox}>
-                    <Text style={styles.resultText}>High Risk</Text>
-                </View>
+                
             </View>
             <View style={styles.bottomContainer}>
+
+            <Image style={styles.babyImage} source={IMGS.sk_14} />
+           
+           <View style={styles.resultBox}>
+               <Text style={styles.resultText}>Most likley to be High Risk</Text>
+           </View>
             <Button
-                    title="Continue for more information"
+                    title="What should I do next"
                     style={styles.nextButton}
                     onPress={() => navigation.navigate(ROUTES.SKIN_INFO)}
                 />
             </View>
-            </View>
+            </SafeAreaView>
       
     );
 };
@@ -78,6 +120,7 @@ const styles = StyleSheet.create({
         color: COLORS.black,
         textAlign: 'center',
         marginVertical: 20,
+        marginTop:-60
     },
     descriptionText: {
         fontSize: 16,
@@ -156,29 +199,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',
+        alignItems: 'center',
+        marginBottom: 20,
+    },
+    musicIcon: {
+        width: 60,
+        height: 60,
+        marginBottom: -10,
+        marginTop:30
+    },
+
+    controlsContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    playPauseButton: {
+        marginRight: 20,
+    },
+    playPauseIcon: {
+        width: 30,
+        height: 30,
+        marginTop:1,
+        marginLeft:10
+    },
+    progressContainer: {
+        flex: 1,
+        height: 30,
         justifyContent: 'center',
-        marginTop: 20, // Space between the text and the player
+        alignItems: 'center',
+        marginTop:1,
+        marginRight:40
     },
-    
-    audioPlayer: {
-        width: '100%', // Fill the container width
-        height: '100%', // Fill the container height
-        // Add more styles as needed
+    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

@@ -140,11 +140,20 @@ const Camera = ({ navigation }) => {
                  <Text style={styles.predictionText}>Confidence: {prediction.confidence}</Text>
             </View>
             )}
-            <Button
+            {/* <Button
                     title="Continue for more information"
                     style={styles.nextButton}
                     onPress={handleContinue}
-                />
+                /> */}
+                 <Button
+                        title="Start Today"
+                        style={{
+                            marginTop: 12,
+                            width: "100%",
+                            marginTop:43
+                        }}
+                        onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
+                    />
             </View>
         </View>
     );

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

src/screens/home/skin/information1.js

@@ -156,7 +156,7 @@ const Additionalinformation = ({ navigation }) => {
             </View>
             <View style={styles.qrCodeBox}>
                           <Image
-                            source={require('./skinassets/Vectorw.png')}  // Make sure the path is correct
+                            source={require('./skinassets/Vectorw.jpg')}  // Make sure the path is correct
                             style={styles.qrCodeImage1}
                         />
                         <Text style={styles.dscriptionText}>