Merge remote-tracking branch 'origin/feature/skin-manage' into final-app

.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

@@ -41,6 +41,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,6 +9,7 @@ export default {
   gray: '#666666',
   grayLight: '#ccc',
   black: '#0a0a0a',
+  blue:'#ADC4CE',
   navyBlue: '#000080',
   purple: '#DFCCFB',
   light_purple: '#D9ACF5',

src/constants/imgs.js

@@ -5,6 +5,16 @@ 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'),
 
 
   //games

src/constants/routes.js

@@ -24,6 +24,19 @@ export default {
   EXERCISE_ACTION_VIEW: 'Exercise_ACTION_View',
   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',
+  EXERCISE_PROGRESS: 'Exercise_PROGRESS',
+
 
   //GAMES
   GAME_HOME: 'Game_Home',

src/navigations/BottomTabNavigator.js

@@ -4,7 +4,8 @@ import Home from '../screens/home/Home';
 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 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';
@@ -35,6 +36,12 @@ function BottomTabNavigator() {
             ) : (
               <Icon name="home-outline" size={22} color={color} />
             );
+          } else 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} />
@@ -47,12 +54,6 @@ function BottomTabNavigator() {
             ) : (
               <Icon name="game-controller-outline" size={22} color={color}/>
             );
-          } else if (route.name === ROUTES.SETTINGS) {
-            return focused ? (
-              <Icon name="notifications-sharp" size={22} color={color} />
-            ) : (
-              <Icon name="notifications-outline" size={22} color={color} />
-            );
           } else if (route.name === ROUTES.LOGIN) {
             return focused ? (
               <Icon name="person-circle-sharp" size={22} color={color} />
@@ -70,8 +71,8 @@ function BottomTabNavigator() {
         }}
       />
       <Tab.Screen
-        name={ROUTES.SETTINGS}
-        component={Settings}
+        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/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/pause.png")} 
+                    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@^2.16.2:
     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"
@@ -7487,7 +7497,7 @@ typed-array-length@^1.0.6:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
-typescript@5.0.4:
+"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==