Updated_Dependecies

.vscode/settings.json

+{
+    "java.compile.nullAnalysis.mode": "automatic"
+}
\ No newline at end of file

android/app/src/main/AndroidManifest.xml

@@ -2,6 +2,8 @@
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 
     <!-- optionally, if you want to record audio: -->
     <uses-permission android:name="android.permission.RECORD_AUDIO" />

package.json

@@ -40,6 +40,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "react-native-image-picker": "^7.1.1",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@react-native/babel-preset": "0.73.21",

src/constants/colors.js

@@ -9,4 +9,5 @@ export default {
   gray: '#666666',
   grayLight: '#ccc',
   black: '#0a0a0a',
+  blue:'#ADC4CE',
 };

src/constants/imgs.js

@@ -5,4 +5,14 @@ export default {
   ex_2: require('../assets/ex_2.jpg'),
   ex_3: require('../assets/ex_3.jpg'),
   ex_4: require('../assets/ex_4.jpg'),
+  sk_1: require('../assets/sk_1.png'),
+  sk_2: require('../assets/sk_2.png'),
+  sk_3: require('../assets/sk_3.png'),
+  sk_7: require('../assets/sk_7.png'),
+  sk_5: require('../assets/sk_5.png'),
+  sk_8: require('../assets/sk_8.png'),
+  sk_9: require('../assets/sk_9.png'),
+  sk_14: require('../assets/sk_14.png'),
+  sk_15: require('../assets/sk_15.png'),
+  sk_16: require('../assets/sk_16.png'),
 };

src/constants/routes.js

@@ -22,5 +22,17 @@ export default {
   EXERCISE_MAIN_MENU: 'Exercise_Home_Menu',
   EXERCISE_VIEW: 'Exercise_View',
   EXERCISE_ACTION_VIEW: 'Exercise_ACTION_View',
-  EXERCISE_PROGRESS: 'Exercise_PROGRESS'
+  EXERCISE_PROGRESS: 'Exercise_PROGRESS',
+
+  //skin
+
+  SKIN_WELCOME: 'Skin_Welcome',
+  SKIN_UPLOAD: 'Skin_Upload',
+  SKIN_RISK: 'Skin_Risk',
+  SKIN_VIDEO: 'Skin_Video',
+  SKIN_VIDEO1: 'Skin_Video1',
+  SKIN_VIDEO2: 'Skin_Video2',
+  SKIN_VIDEO3: 'Skin_Video3',
+  SKIN_VIDEO4: 'Skin_Video4',
+  SKIN_VIDEO5: 'Skin_Video5',
 };

src/navigations/BottomTabNavigator.js

@@ -6,6 +6,7 @@ import  Settings  from '../screens/home/Settings';
 import  WelcomeExercise  from '../screens/home/exercise/WelcomeExercise';
 // import  { Home, Wallet, Settings, WelcomeExercise}  from '../screens';
 import ExerciseNavigator from './ExerciseNavigator'
+import SkinNavigator from './SkinNavigator';
 import {COLORS, ROUTES} from '../constants';
 import Icon from 'react-native-vector-icons/Ionicons';
 import { StyleSheet } from 'react-native';
@@ -30,7 +31,7 @@ function BottomTabNavigator() {
       tabBarShowLabel:false,
       tabBarIcon: ({color, size, focused}) =>
       {
-        if (route.name === ROUTES.HOME_TAB) {
+        if (route.name === ROUTES.SKIN_WELCOME) {
           return focused ? <Icon name='home' size={22} color={color} /> :<Icon name='home-outline' size={22} color={color} />;
          } else if (route.name === ROUTES.EXERCISE_HOME) {
            return focused ? <Logo1 width={22} height={22} /> : <Logo width={22} height={22} /> ;
@@ -41,7 +42,7 @@ function BottomTabNavigator() {
          }
       }
     })}>
-      <Tab.Screen name={ROUTES.HOME_TAB} component={Home} 
+      <Tab.Screen name={ROUTES.SKIN_WELCOME} component={SkinNavigator} 
       options={{
         tabBarButton: props => <CustomTabBarButton {...props} />,
       }}

src/navigations/SkinNavigator.js

+import React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import  WelcomeSkin from '../screens/home/skin/WelcomeSkin';
+import Camera from '../screens/home/skin/SkinUploader';
+import SkinRisk from '../screens/home/skin/SkinRisk';
+import AdditionalSymptoms from '../screens/home/skin/AdditionalSymptoms';
+import AdditionalSymptoms1 from '../screens/home/skin/AdditionalSymptoms1';
+import AdditionalSymptoms2 from '../screens/home/skin/AdditionalSymptoms2';
+import AdditionalSymptoms3 from '../screens/home/skin/AdditionalSymptoms3';
+import AdditionalSymptoms4 from '../screens/home/skin/AdditionalSymptoms4';
+import AdditionalSymptoms5 from '../screens/home/skin/AdditionalSymptoms5';
+import {COLORS, ROUTES} from "../constants"
+const Stack = createStackNavigator();
+
+function SkinNavigator() {
+  return (
+    <Stack.Navigator screenOptions={{
+      headerBackTitleVisible: false,
+      headerShown: false
+    }}
+    initialRouteName={ROUTES.SKIN_WELCOME}>
+      <Stack.Screen name={ROUTES.SKIN_WELCOME} component={WelcomeSkin} />
+      <Stack.Screen name={ROUTES.SKIN_UPLOAD} component={Camera} />
+      <Stack.Screen name={ROUTES.SKIN_VIDEO} component={AdditionalSymptoms} />
+      <Stack.Screen name={ROUTES.SKIN_RISK} component={SkinRisk} />
+      <Stack.Screen name={ROUTES.SKIN_VIDEO1} component={AdditionalSymptoms1} />
+      <Stack.Screen name={ROUTES.SKIN_VIDEO2} component={AdditionalSymptoms2} />
+      <Stack.Screen name={ROUTES.SKIN_VIDEO3} component={AdditionalSymptoms3} />
+      <Stack.Screen name={ROUTES.SKIN_VIDEO4} component={AdditionalSymptoms4} />
+      <Stack.Screen name={ROUTES.SKIN_VIDEO5} component={AdditionalSymptoms5} />
+     
+      
+  
+    </Stack.Navigator>
+  );
+}
+export default SkinNavigator;
\ No newline at end of file

src/screens/home/skin/AdditionalSymptoms2.js

+import React, { useState, useRef, useEffect } from 'react';
+import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator,   } 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';
+const AdditionalSymptomsScreen = ({ navigation }) => {
+    const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
+        symptom2: false,
+        symptom3: false,});
+    const [loading, setLoading] = useState(true);
+    const [videoPaused, setVideoPaused] = useState(true);
+
+    
+
+
+    const handleLoad = () => {
+        setLoading(false);
+    };
+
+    const handleBuffer = () => {
+        setLoading(true);
+    };
+
+    const toggleCheckbox = (symptom) => {
+        setSelectedSymptoms(prevState => ({
+            ...prevState,
+            [symptom]: !prevState[symptom],
+        }));
+    };
+
+    const handleSubmit = () => {
+        // Handle the submission of symptoms
+        console.log(selectedSymptoms);
+        // Navigate or perform next steps
+    };
+
+    return (
+        <SafeAreaView style={styles.container}>
+        <View style={styles.container}>
+            <View style={styles.topContainer}>
+            <Text style={styles.topicText}>Maculopapular Additional Symptoms </Text>
+            <View style={styles.videoBox}>
+            <Text style={styles.descriptionText}>
+                Watch the 3D Model Video to Identify Additional Symptoms and Check the Boxes for Your Experience 
+            </Text>
+            <View style={styles.videoContainer}>
+            <Video
+                source={require("./skinassets/add1.mp4")} // Replace with the path to your video file
+                style={styles.video}
+                controls={true}
+                paused={videoPaused} 
+                resizeMode="contain" // This ensures the video fits within its container
+                onLoad={handleLoad}
+                onBuffer={handleBuffer}
+                onError={(error) => console.error('Video playback error:', error)}
+            />
+            </View>
+            </View>
+            <Text style={styles.checkboxLabel}>Check the related box</Text>
+            <ScrollView style={styles.scrollContainer} >
+             <View style={styles.checkboxContainer}>
+                {/* Repeat this CheckBox component for each symptom */}
+                <View style={styles.individualCheckboxContainer}>
+                        <CheckBox
+                            value={selectedSymptoms['symptom1']}
+                            onValueChange={() => toggleCheckbox('symptom1')}
+                        />
+                        <Text style={styles.checkboxText}>Scattered itchy bumps</Text>
+                    </View>
+                    <View style={styles.individualCheckboxContainer}>
+                        <CheckBox
+                            value={selectedSymptoms['symptom2']}
+                            onValueChange={() => toggleCheckbox('symptom2')}
+                        />
+                        <Text style={styles.checkboxText}>Large red inflamed area across belly</Text>
+                    </View>
+                    <View style={styles.individualCheckboxContainer}>
+                        <CheckBox
+                            value={selectedSymptoms['symptom3']}
+                            onValueChange={() => toggleCheckbox('symptom3')}
+                        />
+                        <Text style={styles.checkboxText}>Yellow discharges</Text>
+                    </View>
+                </View>
+         </ScrollView>
+            </View>
+
+                <Button
+                    title="Continue for more information"
+                    style={styles.nextButton}
+                    onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
+                />
+            </View>
+            </SafeAreaView>
+      
+      
+    );
+};
+
+const styles = StyleSheet.create({
+    scrollContainer: {
+        padding: 40,
+        backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
+        borderRadius: 25,
+        width:'110%',
+        marginBottom:-20,
+        paddingTop:-100,
+    },
+    
+
+    container: {
+        flexGrow: 1,
+        backgroundColor: COLORS.white,
+    },
+    topContainer: {
+        flex: 3,
+        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: 16,
+        textAlign: 'center',
+        marginHorizontal: 20,
+        marginBottom: 20,
+    },
+   
+    checkboxContainer: {
+     
+        padding: 60,
+        backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
+        borderRadius: 25,
+        width:'130%',
+        marginBottom:10,
+        marginLeft:40
+       
+        
+    },
+    checkboxLabel: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        marginBottom: 10,
+        alignSelf: 'center',
+    },
+    checkboxRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    checkboxText: {
+        fontSize: 16,
+        marginLeft: 8,
+    },
+    submitButton: {
+        backgroundColor: COLORS.primary,
+        borderRadius: 20,
+        padding: 15,
+        marginVertical: 20,
+        width: '90%',
+        alignSelf: 'center',
+    },
+    bottomContainer: {
+        flex: 2,
+        justifyContent: 'flex-end',
+        marginBottom: 2,
+        marginTop:-20,
+        alignItems: 'center',
+        backgroundColor: COLORS.blue,
+        borderTopRightRadius: 85,
+        borderTopLeftRadius: 85,
+       
+    },
+    nextButton: {
+        width: '70%',
+        paddingVertical: 10,
+        marginBottom: 80, // Adjust the margin to move the button up further if necessary
+        backgroundColor: COLORS.white,
+        borderRadius: 20,
+        alignSelf: 'center',
+        
+    },
+    videoContainer: {
+        width: '100%',
+        aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    video: {
+        width: '100%',
+        height: '100%',
+    },
+
+    individualCheckboxContainer: {
+        backgroundColor: COLORS.white, // Set the background color to white
+        borderRadius: 10, // Set border radius for rounded corners
+        padding: 10, // Add some padding around the content
+        marginBottom: 10, // Add bottom margin for spacing between items
+        flexDirection: 'row', // Align checkbox and label in a row
+        alignItems: 'center', // Center align items vertically
+        borderWidth: 0.6, // Optional border width
+        width: '100%', // Width 100% to fill container width
+        marginLeft:-100,
+        elevation: 6,
+
+    },
+
+    videoBox: {
+        backgroundColor: COLORS.white, // 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
+        width: '90%', // Adjust the width as necessary
+        alignSelf: 'center', // Center the box within its container
+        // Add shadows for elevation effect (optional)
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+    },
+    // ... possibly other styles
+});
+
+export default AdditionalSymptomsScreen;

src/screens/home/skin/AdditionalSymptoms3.js

+import React, { useState, useRef, useEffect } from 'react';
+import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator,   } 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';
+const AdditionalSymptomsScreen = ({ navigation }) => {
+    const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
+        symptom2: false,
+        symptom3: false,});
+    const [loading, setLoading] = useState(true);
+    const [videoPaused, setVideoPaused] = useState(true);
+
+    
+
+
+    const handleLoad = () => {
+        setLoading(false);
+    };
+
+    const handleBuffer = () => {
+        setLoading(true);
+    };
+
+    const toggleCheckbox = (symptom) => {
+        setSelectedSymptoms(prevState => ({
+            ...prevState,
+            [symptom]: !prevState[symptom],
+        }));
+    };
+
+    const handleSubmit = () => {
+        // Handle the submission of symptoms
+        console.log(selectedSymptoms);
+        // Navigate or perform next steps
+    };
+
+    return (
+        <SafeAreaView style={styles.container}>
+        <View style={styles.container}>
+            <View style={styles.topContainer}>
+            <Text style={styles.topicText}>Melanoma Additional Symptoms </Text>
+            <View style={styles.videoBox}>
+            <Text style={styles.descriptionText}>
+                Watch the 3D Model Video to Identify Additional Symptoms and Check the Boxes for Your Experience 
+            </Text>
+            <View style={styles.videoContainer}>
+            <Video
+                source={require("./skinassets/add1.mp4")} // Replace with the path to your video file
+                style={styles.video}
+                controls={true}
+                paused={videoPaused} 
+                resizeMode="contain" // This ensures the video fits within its container
+                onLoad={handleLoad}
+                onBuffer={handleBuffer}
+                onError={(error) => console.error('Video playback error:', error)}
+            />
+            </View>
+            </View>
+            <Text style={styles.checkboxLabel}>Check the related box</Text>
+            <ScrollView style={styles.scrollContainer} >
+             <View style={styles.checkboxContainer}>
+                {/* Repeat this CheckBox component for each symptom */}
+                <View style={styles.individualCheckboxContainer}>
+                        <CheckBox
+                            value={selectedSymptoms['symptom1']}
+                            onValueChange={() => toggleCheckbox('symptom1')}
+                        />
+                        <Text style={styles.checkboxText}>Scattered itchy bumps</Text>
+                    </View>
+                    <View style={styles.individualCheckboxContainer}>
+                        <CheckBox
+                            value={selectedSymptoms['symptom2']}
+                            onValueChange={() => toggleCheckbox('symptom2')}
+                        />
+                        <Text style={styles.checkboxText}>Large red inflamed area across belly</Text>
+                    </View>
+                    <View style={styles.individualCheckboxContainer}>
+                        <CheckBox
+                            value={selectedSymptoms['symptom3']}
+                            onValueChange={() => toggleCheckbox('symptom3')}
+                        />
+                        <Text style={styles.checkboxText}>Yellow discharges</Text>
+                    </View>
+                </View>
+         </ScrollView>
+            </View>
+
+                <Button
+                    title="Continue for more information"
+                    style={styles.nextButton}
+                    onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
+                />
+            </View>
+            </SafeAreaView>
+      
+      
+    );
+};
+
+const styles = StyleSheet.create({
+    scrollContainer: {
+        padding: 40,
+        backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
+        borderRadius: 25,
+        width:'110%',
+        marginBottom:-20,
+        paddingTop:-100,
+    },
+    
+
+    container: {
+        flexGrow: 1,
+        backgroundColor: COLORS.white,
+    },
+    topContainer: {
+        flex: 3,
+        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: 16,
+        textAlign: 'center',
+        marginHorizontal: 20,
+        marginBottom: 20,
+    },
+   
+    checkboxContainer: {
+     
+        padding: 60,
+        backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
+        borderRadius: 25,
+        width:'130%',
+        marginBottom:10,
+        marginLeft:40
+       
+        
+    },
+    checkboxLabel: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        marginBottom: 10,
+        alignSelf: 'center',
+    },
+    checkboxRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    checkboxText: {
+        fontSize: 16,
+        marginLeft: 8,
+    },
+    submitButton: {
+        backgroundColor: COLORS.primary,
+        borderRadius: 20,
+        padding: 15,
+        marginVertical: 20,
+        width: '90%',
+        alignSelf: 'center',
+    },
+    bottomContainer: {
+        flex: 2,
+        justifyContent: 'flex-end',
+        marginBottom: 2,
+        marginTop:-20,
+        alignItems: 'center',
+        backgroundColor: COLORS.blue,
+        borderTopRightRadius: 85,
+        borderTopLeftRadius: 85,
+       
+    },
+    nextButton: {
+        width: '70%',
+        paddingVertical: 10,
+        marginBottom: 80, // Adjust the margin to move the button up further if necessary
+        backgroundColor: COLORS.white,
+        borderRadius: 20,
+        alignSelf: 'center',
+        
+    },
+    videoContainer: {
+        width: '100%',
+        aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    video: {
+        width: '100%',
+        height: '100%',
+    },
+
+    individualCheckboxContainer: {
+        backgroundColor: COLORS.white, // Set the background color to white
+        borderRadius: 10, // Set border radius for rounded corners
+        padding: 10, // Add some padding around the content
+        marginBottom: 10, // Add bottom margin for spacing between items
+        flexDirection: 'row', // Align checkbox and label in a row
+        alignItems: 'center', // Center align items vertically
+        borderWidth: 0.6, // Optional border width
+        width: '100%', // Width 100% to fill container width
+        marginLeft:-100,
+        elevation: 6,
+
+    },
+
+    videoBox: {
+        backgroundColor: COLORS.white, // 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
+        width: '90%', // Adjust the width as necessary
+        alignSelf: 'center', // Center the box within its container
+        // Add shadows for elevation effect (optional)
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+    },
+    // ... possibly other styles
+});
+
+export default AdditionalSymptomsScreen;

src/screens/home/skin/AdditionalSymptoms4.js

+import React, { useState, useRef, useEffect } from 'react';
+import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator,   } 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';
+const AdditionalSymptomsScreen = ({ navigation }) => {
+    const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
+        symptom2: false,
+        symptom3: false,});
+    const [loading, setLoading] = useState(true);
+    const [videoPaused, setVideoPaused] = useState(true);
+
+    
+
+
+    const handleLoad = () => {
+        setLoading(false);
+    };
+
+    const handleBuffer = () => {
+        setLoading(true);
+    };
+
+    const toggleCheckbox = (symptom) => {
+        setSelectedSymptoms(prevState => ({
+            ...prevState,
+            [symptom]: !prevState[symptom],
+        }));
+    };
+
+    const handleSubmit = () => {
+        // Handle the submission of symptoms
+        console.log(selectedSymptoms);
+        // Navigate or perform next steps
+    };
+
+    return (
+        <SafeAreaView style={styles.container}>
+        <View style={styles.container}>
+            <View style={styles.topContainer}>
+            <Text style={styles.topicText}>Patechiae Additional Symptoms </Text>
+            <View style={styles.videoBox}>
+            <Text style={styles.descriptionText}>
+                Watch the 3D Model Video to Identify Additional Symptoms and Check the Boxes for Your Experience 
+            </Text>
+            <View style={styles.videoContainer}>
+            <Video
+                source={require("./skinassets/add1.mp4")} // Replace with the path to your video file
+                style={styles.video}
+                controls={true}
+                paused={videoPaused} 
+                resizeMode="contain" // This ensures the video fits within its container
+                onLoad={handleLoad}
+                onBuffer={handleBuffer}
+                onError={(error) => console.error('Video playback error:', error)}
+            />
+            </View>
+            </View>
+            <Text style={styles.checkboxLabel}>Check the related box</Text>
+            <ScrollView style={styles.scrollContainer} >
+             <View style={styles.checkboxContainer}>
+                {/* Repeat this CheckBox component for each symptom */}
+                <View style={styles.individualCheckboxContainer}>
+                        <CheckBox
+                            value={selectedSymptoms['symptom1']}
+                            onValueChange={() => toggleCheckbox('symptom1')}
+                        />
+                        <Text style={styles.checkboxText}>Scattered itchy bumps</Text>
+                    </View>
+                    <View style={styles.individualCheckboxContainer}>
+                        <CheckBox
+                            value={selectedSymptoms['symptom2']}
+                            onValueChange={() => toggleCheckbox('symptom2')}
+                        />
+                        <Text style={styles.checkboxText}>Large red inflamed area across belly</Text>
+                    </View>
+                    <View style={styles.individualCheckboxContainer}>
+                        <CheckBox
+                            value={selectedSymptoms['symptom3']}
+                            onValueChange={() => toggleCheckbox('symptom3')}
+                        />
+                        <Text style={styles.checkboxText}>Yellow discharges</Text>
+                    </View>
+                </View>
+         </ScrollView>
+            </View>
+
+                <Button
+                    title="Continue for more information"
+                    style={styles.nextButton}
+                    onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
+                />
+            </View>
+            </SafeAreaView>
+      
+      
+    );
+};
+
+const styles = StyleSheet.create({
+    scrollContainer: {
+        padding: 40,
+        backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
+        borderRadius: 25,
+        width:'110%',
+        marginBottom:-20,
+        paddingTop:-100,
+    },
+    
+
+    container: {
+        flexGrow: 1,
+        backgroundColor: COLORS.white,
+    },
+    topContainer: {
+        flex: 3,
+        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: 16,
+        textAlign: 'center',
+        marginHorizontal: 20,
+        marginBottom: 20,
+    },
+   
+    checkboxContainer: {
+     
+        padding: 60,
+        backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
+        borderRadius: 25,
+        width:'130%',
+        marginBottom:10,
+        marginLeft:40
+       
+        
+    },
+    checkboxLabel: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        marginBottom: 10,
+        alignSelf: 'center',
+    },
+    checkboxRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    checkboxText: {
+        fontSize: 16,
+        marginLeft: 8,
+    },
+    submitButton: {
+        backgroundColor: COLORS.primary,
+        borderRadius: 20,
+        padding: 15,
+        marginVertical: 20,
+        width: '90%',
+        alignSelf: 'center',
+    },
+    bottomContainer: {
+        flex: 2,
+        justifyContent: 'flex-end',
+        marginBottom: 2,
+        marginTop:-20,
+        alignItems: 'center',
+        backgroundColor: COLORS.blue,
+        borderTopRightRadius: 85,
+        borderTopLeftRadius: 85,
+       
+    },
+    nextButton: {
+        width: '70%',
+        paddingVertical: 10,
+        marginBottom: 80, // Adjust the margin to move the button up further if necessary
+        backgroundColor: COLORS.white,
+        borderRadius: 20,
+        alignSelf: 'center',
+        
+    },
+    videoContainer: {
+        width: '100%',
+        aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    video: {
+        width: '100%',
+        height: '100%',
+    },
+
+    individualCheckboxContainer: {
+        backgroundColor: COLORS.white, // Set the background color to white
+        borderRadius: 10, // Set border radius for rounded corners
+        padding: 10, // Add some padding around the content
+        marginBottom: 10, // Add bottom margin for spacing between items
+        flexDirection: 'row', // Align checkbox and label in a row
+        alignItems: 'center', // Center align items vertically
+        borderWidth: 0.6, // Optional border width
+        width: '100%', // Width 100% to fill container width
+        marginLeft:-100,
+        elevation: 6,
+
+    },
+
+    videoBox: {
+        backgroundColor: COLORS.white, // 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
+        width: '90%', // Adjust the width as necessary
+        alignSelf: 'center', // Center the box within its container
+        // Add shadows for elevation effect (optional)
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+    },
+    // ... possibly other styles
+});
+
+export default AdditionalSymptomsScreen;

src/screens/home/skin/AdditionalSymptoms5.js

+import React, { useState, useRef, useEffect } from 'react';
+import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator,   } 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';
+const AdditionalSymptomsScreen = ({ navigation }) => {
+    const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
+        symptom2: false,
+        symptom3: false,});
+    const [loading, setLoading] = useState(true);
+    const [videoPaused, setVideoPaused] = useState(true);
+
+    
+
+
+    const handleLoad = () => {
+        setLoading(false);
+    };
+
+    const handleBuffer = () => {
+        setLoading(true);
+    };
+
+    const toggleCheckbox = (symptom) => {
+        setSelectedSymptoms(prevState => ({
+            ...prevState,
+            [symptom]: !prevState[symptom],
+        }));
+    };
+
+    const handleSubmit = () => {
+        // Handle the submission of symptoms
+        console.log(selectedSymptoms);
+        // Navigate or perform next steps
+    };
+
+    return (
+        <SafeAreaView style={styles.container}>
+        <View style={styles.container}>
+            <View style={styles.topContainer}>
+            <Text style={styles.topicText}>Herpes HPV Additional Symptoms </Text>
+            <View style={styles.videoBox}>
+            <Text style={styles.descriptionText}>
+                Watch the 3D Model Video to Identify Additional Symptoms and Check the Boxes for Your Experience 
+            </Text>
+            <View style={styles.videoContainer}>
+            <Video
+                source={require("./skinassets/add1.mp4")} // Replace with the path to your video file
+                style={styles.video}
+                controls={true}
+                paused={videoPaused} 
+                resizeMode="contain" // This ensures the video fits within its container
+                onLoad={handleLoad}
+                onBuffer={handleBuffer}
+                onError={(error) => console.error('Video playback error:', error)}
+            />
+            </View>
+            </View>
+            <Text style={styles.checkboxLabel}>Check the related box</Text>
+            <ScrollView style={styles.scrollContainer} >
+             <View style={styles.checkboxContainer}>
+                {/* Repeat this CheckBox component for each symptom */}
+                <View style={styles.individualCheckboxContainer}>
+                        <CheckBox
+                            value={selectedSymptoms['symptom1']}
+                            onValueChange={() => toggleCheckbox('symptom1')}
+                        />
+                        <Text style={styles.checkboxText}>Scattered itchy bumps</Text>
+                    </View>
+                    <View style={styles.individualCheckboxContainer}>
+                        <CheckBox
+                            value={selectedSymptoms['symptom2']}
+                            onValueChange={() => toggleCheckbox('symptom2')}
+                        />
+                        <Text style={styles.checkboxText}>Large red inflamed area across belly</Text>
+                    </View>
+                    <View style={styles.individualCheckboxContainer}>
+                        <CheckBox
+                            value={selectedSymptoms['symptom3']}
+                            onValueChange={() => toggleCheckbox('symptom3')}
+                        />
+                        <Text style={styles.checkboxText}>Yellow discharges</Text>
+                    </View>
+                </View>
+         </ScrollView>
+            </View>
+
+                <Button
+                    title="Continue for more information"
+                    style={styles.nextButton}
+                    onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
+                />
+            </View>
+            </SafeAreaView>
+      
+      
+    );
+};
+
+const styles = StyleSheet.create({
+    scrollContainer: {
+        padding: 40,
+        backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
+        borderRadius: 25,
+        width:'110%',
+        marginBottom:-20,
+        paddingTop:-100,
+    },
+    
+
+    container: {
+        flexGrow: 1,
+        backgroundColor: COLORS.white,
+    },
+    topContainer: {
+        flex: 3,
+        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: 16,
+        textAlign: 'center',
+        marginHorizontal: 20,
+        marginBottom: 20,
+    },
+   
+    checkboxContainer: {
+     
+        padding: 60,
+        backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
+        borderRadius: 25,
+        width:'130%',
+        marginBottom:10,
+        marginLeft:40
+       
+        
+    },
+    checkboxLabel: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        marginBottom: 10,
+        alignSelf: 'center',
+    },
+    checkboxRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    checkboxText: {
+        fontSize: 16,
+        marginLeft: 8,
+    },
+    submitButton: {
+        backgroundColor: COLORS.primary,
+        borderRadius: 20,
+        padding: 15,
+        marginVertical: 20,
+        width: '90%',
+        alignSelf: 'center',
+    },
+    bottomContainer: {
+        flex: 2,
+        justifyContent: 'flex-end',
+        marginBottom: 2,
+        marginTop:-20,
+        alignItems: 'center',
+        backgroundColor: COLORS.blue,
+        borderTopRightRadius: 85,
+        borderTopLeftRadius: 85,
+       
+    },
+    nextButton: {
+        width: '70%',
+        paddingVertical: 10,
+        marginBottom: 80, // Adjust the margin to move the button up further if necessary
+        backgroundColor: COLORS.white,
+        borderRadius: 20,
+        alignSelf: 'center',
+        
+    },
+    videoContainer: {
+        width: '100%',
+        aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    video: {
+        width: '100%',
+        height: '100%',
+    },
+
+    individualCheckboxContainer: {
+        backgroundColor: COLORS.white, // Set the background color to white
+        borderRadius: 10, // Set border radius for rounded corners
+        padding: 10, // Add some padding around the content
+        marginBottom: 10, // Add bottom margin for spacing between items
+        flexDirection: 'row', // Align checkbox and label in a row
+        alignItems: 'center', // Center align items vertically
+        borderWidth: 0.6, // Optional border width
+        width: '100%', // Width 100% to fill container width
+        marginLeft:-100,
+        elevation: 6,
+
+    },
+
+    videoBox: {
+        backgroundColor: COLORS.white, // 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
+        width: '90%', // Adjust the width as necessary
+        alignSelf: 'center', // Center the box within its container
+        // Add shadows for elevation effect (optional)
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+    },
+    // ... possibly other styles
+});
+
+export default AdditionalSymptomsScreen;

src/screens/home/skin/SkinRisk.js

+import React, { useState } from 'react';
+import { View, StyleSheet, Text, TouchableOpacity, ScrollView, Image } 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';
+
+const RiskEvaluationScreen = ({ navigation }) => {
+
+
+    const [audioPaused, setAudioPaused] = useState(true);
+
+    // Function to handle the continuation to the next screen
+    const handleContinue = () => {
+        // navigation.navigate('NextScreenRoute');
+    };
+
+    return (
+        <View 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/add1.mp4")} 
+                    style={styles.audioPlayer}
+                     controls={true} 
+                      audioOnly={true} 
+                     resizeMode="cover" // Cover the audio's aspect ratio
+                     paused={audioPaused}  
+                     repeat={true}
+                     onLoad={() => setAudioPaused(false)}
+                          
+    />
+</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}>
+                <Button
+                    title="Continue for more information"
+                    style={styles.nextButton}
+                    onPress={handleContinue}
+                />
+            </View>
+            </View>
+      
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+   
+    topContainer: {
+        flex: 3,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: COLORS.white,
+    // This creates the curve effect for the background
+    },
+    container: {
+        flex: 1,
+        backgroundColor: COLORS.white,
+    },
+    topicText: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: COLORS.black,
+        textAlign: 'center',
+        marginVertical: 20,
+    },
+    descriptionText: {
+        fontSize: 16,
+        textAlign: 'center',
+        marginHorizontal: 20,
+        marginBottom: 20,
+    },
+    videoPlayer: {
+        width: '90%',
+        alignSelf: 'center',
+        height: 200, // Adjust the height as needed
+        marginBottom: 20,
+    },
+    checkboxContainer: {
+        margin: 20,
+        padding: 20,
+        backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
+        borderRadius: 25,
+    },
+    checkboxLabel: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        marginBottom: 10,
+    },
+    checkboxRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    checkboxText: {
+        fontSize: 16,
+        marginLeft: 8,
+    },
+  
+    bottomContainer: {
+        flex: 2,
+        justifyContent: 'flex-end',
+        marginBottom: 2,
+        marginTop:20,
+        alignItems: 'center',
+        backgroundColor: '#EF9595',
+        borderTopRightRadius: 75,
+        borderTopLeftRadius: 75,
+       
+    },
+    nextButton: {
+        width: '80%',
+        paddingVertical: 10,
+        marginBottom: 80, // Adjust the margin to move the button up further if necessary
+        backgroundColor: COLORS.white,
+        borderRadius: 20,
+        alignSelf: 'center',
+        
+    },
+   
+   
+    resultText: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: '#EF9595',
+        textAlign: 'center',
+    },
+    resultBox: {
+        borderWidth: 2,
+        borderColor: '#EF9595',
+        borderRadius: 10,
+        paddingVertical: 25,
+        paddingHorizontal: 40,
+        backgroundColor: COLORS.white, // Set the background color to white
+        shadowColor: "#000", // Shadow color for iOS and also works as elevation shadow color in Android
+        shadowOffset: { 
+            width: 0,
+            height: 2, // Shadow offset for iOS
+        },
+        shadowOpacity: 0.25, // Shadow opacity for iOS
+        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
+    },
+
+    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
+    },
+    
+    audioPlayer: {
+        width: '100%', // Fill the container width
+        height: '100%', // Fill the container height
+        // Add more styles as needed
+    },
+    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
+        alignSelf: 'center', // Center the image horizontally
+        marginLeft:40,
+        marginRight:100,
+    },
+  
+   
+});
+
+export default RiskEvaluationScreen;

src/screens/home/skin/WelcomeSkin.js

+// import React from 'react';
+// import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
+
+// const WelcomeExercise = () => {
+//     return (
+//         <View >
+//             <Text>Register</Text>
+//         </View>
+//     );
+// };
+
+// export default WelcomeExercise;
+
+import { View, Text, Pressable, Image, StyleSheet } from 'react-native'
+import React from 'react'
+import LinearGradient from 'react-native-linear-gradient';
+import {COLORS, IMGS, ROUTES} from '../../../constants';
+import Button from '../../../components/Button';
+
+
+
+const WelcomeExercise = ({ navigation }) => {
+    return (
+        <LinearGradient
+            style={styles.linearGradient}
+            colors={['#F1F0E8', '#96B6C5']}
+        >
+            <View style={styles.container}>
+                {/* Floating images with white borders */}
+                <Image source={IMGS.sk_5} style={styles.image1} />
+                <Image source={IMGS.sk_7} style={styles.image2} />
+                <Image source={IMGS.sk_8} style={styles.image3} />
+                <Image source={IMGS.sk_9} style={styles.image4} />
+
+                {/* Content */}
+
+                <View style={{
+                    paddingHorizontal: 22,
+                    position: "absolute",
+                    top: 370,
+                    width: "100%"
+                }}>
+                    <Text style={{
+                        fontSize: 50,
+                        // fontWeight: 800,
+                        color: COLORS.white
+                    }}>Let's Get</Text>
+                    <Text style={{
+                        fontSize: 46,
+                        // fontWeight: 800,
+                        color: COLORS.white
+                    }}>Started</Text>
+
+                    <View style={{ marginVertical: 22 }}>
+                        <Text style={{
+                            fontSize: 16,
+                            color: COLORS.white,
+                            marginVertical: 4
+                        }}>Reveal Your Skin's Story </Text>
+                        <Text style={{
+                            fontSize: 16,
+                            color: COLORS.white,
+                        }}>Your Skin, Your Health, Your App.</Text>
+                    </View>
+
+                    <Button
+                        title="Start Today"
+                        style={{
+                            marginTop: 12,
+                            width: "100%"
+                        }}
+                        onPress={() => navigation.navigate(ROUTES.SKIN_UPLOAD)}
+                    />
+                {/* ... rest of your content */}
+            </View>
+            </View>
+        </LinearGradient>
+    );
+};
+
+const styles = StyleSheet.create({
+    linearGradient: {
+        flex: 1,
+    },
+    container: {
+        flex: 1,
+    },
+    image1: {
+        height: 100,
+        width: 100,
+        borderRadius: 20,
+        position: 'absolute',
+        top: -20,
+        transform: [
+            { translateX: 20 },
+            { translateY: 50 },
+            { rotate: '-15deg' },
+        ],
+        borderWidth: 3, // White border
+        borderColor: '#FFFFFF',
+    },
+    image2: {
+        height: 100,
+        width: 100,
+        borderRadius: 20,
+        position: 'absolute',
+        top: -20,
+        left: 200,
+        transform: [
+            { translateX: 50 },
+            { translateY: 50 },
+            { rotate: '-5deg' },
+        ],
+        borderWidth: 3, // White border
+        borderColor: '#FFFFFF',
+    },
+    image3: {
+        width: 100,
+        height: 100,
+        borderRadius: 20,
+        position: 'absolute',
+        top: 130,
+        left: -30,
+        transform: [
+            { translateX: 50 },
+            { translateY: 50 },
+            { rotate: '15deg' },
+        ],
+        borderWidth: 3, // White border
+        borderColor: '#FFFFFF',
+    },
+    image4: {
+        height: 150,
+        width: 150,
+        borderRadius: 20,
+        position: 'absolute',
+        top: 140,
+        left: 140,
+        transform: [
+            { translateX: 50 },
+            { translateY: 50 },
+            { rotate: '-15deg' },
+        ],
+        borderWidth: 3, // White border
+        borderColor: '#FFFFFF',
+    },
+    // ... rest of your styles
+});
+
+export default WelcomeExercise;

yarn.lock

@@ -3311,7 +3311,17 @@ deepmerge@^2.1.1:
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz"
   integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
 
-deepmerge@^4.2.2, deepmerge@^4.3.0, deepmerge@^4.3.1:
+deepmerge@^4.2.2:
+  version "4.3.1"
+  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
+deepmerge@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
+deepmerge@^4.3.1:
   version "4.3.1"
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -6378,22 +6388,7 @@ react-freeze@^1.0.0:
   resolved "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz"
   integrity sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA==
 
-"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
-  version "18.3.1"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"
-  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
-
-react-is@^16.13.0:
-  version "16.13.1"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-
-react-is@^16.13.1:
-  version "16.13.1"
-  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-
-react-is@^16.7.0:
+"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -6403,6 +6398,16 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-is@^18.0.0:
+  version "18.3.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
+react-is@^18.2.0:
+  version "18.3.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
 react-native-circular-progress-indicator@^4.4.2:
   version "4.4.2"
   resolved "https://registry.npmjs.org/react-native-circular-progress-indicator/-/react-native-circular-progress-indicator-4.4.2.tgz"
@@ -6428,6 +6433,11 @@ react-native-gesture-handler@*, react-native-gesture-handler@^2.16.2, "react-nat
     lodash "^4.17.21"
     prop-types "^15.7.2"
 
+react-native-image-picker@^7.1.1:
+  version "7.1.2"
+  resolved "https://registry.npmjs.org/react-native-image-picker/-/react-native-image-picker-7.1.2.tgz"
+  integrity sha512-b5y5nP60RIPxlAXlptn2QwlIuZWCUDWa/YPUVjgHc0Ih60mRiOg1PSzf0IjHSLeOZShCpirpvSPGnDExIpTRUg==
+
 react-native-linear-gradient@^2.8.3:
   version "2.8.3"
   resolved "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz"
@@ -7496,7 +7506,7 @@ typed-array-length@^1.0.6:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
-"typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta", typescript@>=4.9.5:
+"typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta", typescript@>=4.9.5, typescript@5.0.4:
   version "5.0.4"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz"
   integrity sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==