resolve-conflicts

.vscode/settings.json

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

App.js

@@ -7,14 +7,15 @@ LogBox.ignoreAllLogs();
 const App = () => {
   // Your Firebase project config
   const firebaseConfig = {
-    apiKey: "AIzaSyDYUf2gYWwE_qvQk2e-8ErEZ_PYBZ7eX0o",
-    authDomain: "emidwife-382f9.firebaseapp.com",
-    databaseURL: "https://emidwife-382f9-default-rtdb.asia-southeast1.firebasedatabase.app",
-    projectId: "emidwife-382f9",
-    storageBucket: "emidwife-382f9.appspot.com",
-    messagingSenderId: "586342030256",
-    appId: "1:586342030256:web:a88085b0dd2a72a953d475"
+    apiKey: "AIzaSyCeAB4zi1RAoBPPJyE6qii36pz01tfKrYQ",
+    authDomain: "esp32-emidwife.firebaseapp.com",
+    databaseURL: "https://esp32-emidwife-default-rtdb.firebaseio.com",
+    projectId: "esp32-emidwife",
+    storageBucket: "esp32-emidwife.appspot.com",
+    messagingSenderId: "590307045316",
+    appId: "1:590307045316:web:3471bfeaec9f74f6dcbe91"
   };
+  
   // Initialize Firebase
   if (!firebase.apps.length) {
     firebase.initializeApp(firebaseConfig);

android/app/build.gradle

@@ -85,6 +85,15 @@ android {
         versionName "1.0"
     }
     signingConfigs {
+         
+        release {
+            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
+                storeFile file(MYAPP_UPLOAD_STORE_FILE)
+                storePassword MYAPP_UPLOAD_STORE_PASSWORD
+                keyAlias MYAPP_UPLOAD_KEY_ALIAS
+                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
+            }
+        }
         debug {
             storeFile file('debug.keystore')
             storePassword 'android'
@@ -99,7 +108,7 @@ android {
         release {
             // Caution! In production, you need to generate your own keystore file.
             // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
+            signingConfig signingConfigs.release
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }

android/app/src/main/AndroidManifest.xml

 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     <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" />

android/gradle.properties

@@ -39,3 +39,8 @@ newArchEnabled=false
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.
 hermesEnabled=true
+
+MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
+MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
+MYAPP_UPLOAD_STORE_PASSWORD=midwife
+MYAPP_UPLOAD_KEY_PASSWORD=midwife
\ No newline at end of file

package.json

@@ -32,6 +32,7 @@
     "react-native-safe-area-context": "^4.10.1",
     "react-native-screens": "^3.31.1",
     "react-native-snap-carousel-v4": "^1.0.1",
+    "react-native-sound": "^0.11.2",
     "react-native-svg": "^15.2.0",
     "react-native-svg-transformer": "^1.3.0",
     "react-native-vector-icons": "^10.1.0",
@@ -40,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/components/RadioButton.js

+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import {View, Text, TouchableOpacity} from 'react-native';
+
+const RadioButton = ({label, selected, onPress, textColor}) => (
+  <TouchableOpacity onPress={onPress}>
+    <View style={{flexDirection: 'row', alignItems: 'center'}}>
+      <View
+        style={{
+          width: 20,
+          height: 20,
+          borderRadius: 10,
+          borderWidth: 2,
+          borderColor: selected ? '#0047AB' : 'gray',
+          marginRight: 10,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}>
+        {selected && (
+          <View
+            style={{
+              width: 10,
+              height: 10,
+              borderRadius: 5,
+              backgroundColor: 'black',
+            }}
+          />
+        )}
+      </View>
+      <Text
+        style={{
+          color: '#0047AB',
+          fontSize: 15,
+          fontWeight: 'bold',
+          color: textColor || '#000',
+        }}>
+        {label}
+      </Text>
+    </View>
+  </TouchableOpacity>
+);
+
+export default RadioButton;

src/constants/colors.js

@@ -9,4 +9,16 @@ export default {
   gray: '#666666',
   grayLight: '#ccc',
   black: '#0a0a0a',
+  blue: '#ADC4CE',
+  navyBlue: '#000080',
+  purple: '#DFCCFB',
+  light_purple: '#D9ACF5',
+  dark_purple: '#BEADFA',
+  pink: '#EF9595',
+  normal_purple: '#80558C',
+  rose: '#FFACC7',
+  pastalBlue: '#D2E9E9',
+  purple_new: '#AC87C5',
+  pink_new: '#FF8080',
+  pastal_blue: '#7469B6',
 };

src/constants/imgs.js

@@ -5,4 +5,65 @@ 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.jpg'),
+  sk_15: require('../assets/sk_15.png'),
+  sk_16: require('../assets/sk_16.png'),
+
+
+  //games
+  game_img_1: require('../assets/game_img_1.png'),
+  game_img_2: require('../assets/game_img_2.png'),
+  game_img_3: require('../assets/Game01.jpg'),
+  game_img_4: require('../assets/Game02.jpg'),
+  game_img_5: require('../assets/score_background.png'),
+  game_img_6: require('../assets/gameBackground.jpg'),
+  game_img_7: require('../assets/Game02background.jpg'),
+  game_img_8: require('../assets/game03background.jpg'),
+  game_img_9: require('../assets/rockpapergame.jpeg'),
+  game_img_10: require('../assets/rock.png'),
+  game_img_11: require('../assets/paper.png'),
+  game_img_12: require('../assets/scissors.png'),
+  game_img_13: require('../assets/baby.png'),
+  game_img_14: require('../assets/cart.png'),
+  game_img_15: require('../assets/background06.jpeg'),
+  game_img_16: require('../assets/shoes.png'),
+  game_img_17: require('../assets/cloths.png'),
+  game_img_18: require('../assets/shoppingCart.png'),
+  game_img_19: require('../assets/games/Spinach.png'),
+  game_img_20: require('../assets/games/Candy.png'),
+  game_img_21: require('../assets/games/Carrot.png'),
+  game_img_22: require('../assets/games/FrenchFries.png'),
+  game_img_23: require('../assets/games/Tomato.png'),
+  game_img_24: require('../assets/games/Doughnut.png'),
+  game_img_25: require('../assets/games/Fruits.png'),
+  game_img_26: require('../assets/games/Eggs.png'),
+  game_img_27: require('../assets/games/Milk.png'),
+  game_img_28: require('../assets/games/Water.png'),
+  game_img_29: require('../assets/games/Hotdogs.png'),
+  game_img_30: require('../assets/games/Oats.png'),
+  game_img_31: require('../assets/games/level0201.png'),
+  game_img_32: require('../assets/games/level0202.png'),
+  game_img_33: require('../assets/games/level0203.png'),
+  game_img_34: require('../assets/games/level0204.png'),
+  game_img_35: require('../assets/games/level0205.png'),
+  game_img_36: require('../assets/games/level0206.png'),
+  game_img_37: require('../assets/games/level0207.png'),
+  game_img_38: require('../assets/games/level0208.png'),
+  game_img_39: require('../assets/games/level0209.png'),
+  game_img_40: require('../assets/games/level0210.png'),
+  game_img_41: require('../assets/games/level0211.png'),
+  game_img_42: require('../assets/games/level0212.png'),
+  game_img_43: require('../assets/games/baby02.png'),
+  game_img_44: require('../assets/games/game02Backgroundnew.jpeg'),
+  game_img_45: require('../assets/games/game02Backgroundnew02.jpeg'),
+  home_page: require('../assets/home_page.png'),
+  well_being: require('../assets/games/wellBeing.jpg'),
+  motherWithMidWife: require('../assets/games/motherAndMidWife.jpg'),
 };

src/constants/routes.js

@@ -20,7 +20,69 @@ export default {
   EXERCISE_HOME: 'Exercise_Home',
   EXERCISE_FORM: 'Health_Form',
   EXERCISE_MAIN_MENU: 'Exercise_Home_Menu',
+  EXERCISE_MAIN_NEW_MENU: 'Exercise_Home_New_Menu',
   EXERCISE_VIEW: 'Exercise_View',
   EXERCISE_ACTION_VIEW: 'Exercise_ACTION_View',
-  EXERCISE_PROGRESS: 'Exercise_PROGRESS'
+  EXERCISE_PROGRESS: 'Exercise_PROGRESS',
+  EXERCISE_NEW_VIEW: 'Exercise_NEW_View',
+  EXERCISE_NEW_ACTION_VIEW: 'Exercise_NEW_ACTION_View',
+  EXERCISE_NEW_PROGRESS: 'Exercise_NEW_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',
+
+  SKIN_INFO:'skin_info',
+
+  //GAMES
+  GAME_HOME: 'Game_Home',
+  GAME_WELCOME: 'Game_Welcome',
+  GAME_FORM: 'Game_Form',
+  GAME_MAIN_MENU: 'Game_Home_Menu',
+  GAME_VIEW: 'Game_View',
+  GAME_QUIZ_OPTIONS: 'Game_Quiz_Options',
+  GAME_QUIZ_IN_ENGLISH: 'Game_Quiz_In_English',
+  GAME_QUIZ_IN_SINHALA: 'Game_Quiz_In_Sinhala',
+  GAME_MAIN_DETAILS: 'Main_Details_Form',
+  QUIZ_SCORE: 'Quiz_Score',
+  CHOOSE_GAME: 'Choose_Game',
+  Level01Instructions: 'Level01Instructions',
+  GameLevel1: 'GameLevel1',
+  GameLevel2: 'GameLevel2',
+  GameLevel3: 'GameLevel3',
+  GameLevel4: 'GameLevel4',
+  GameLevel5: 'GameLevel5',
+  GameLevel6: 'GameLevel6',
+  GameLevel0: 'GameLevel0',
+  Game02Level01: 'Game02Level01',
+  CravingsPuzzleGame02Level02: 'CravingsPuzzleGame02Level02',
+  PuzzleGame02Level03: 'PuzzleGame02Level03',
+  Game02Level04: 'Game02Level04',
+  Game02Level05: 'Game02Level05',
+  Game02Level06: 'Game02Level06',
+  Game02Level07: 'Game02Level07',
+  GameLevelPage: 'GameLevelPage',
+  MainDetailsFormInSinhala: 'MainDetailsFormInSinhala',
+  Level01: 'Level01',
+  Level02: 'Level02',
+  Level03: 'Level03',
+  Level04: 'Level04',
+  Level05: 'Level05',
+  Level06: 'Level06',
+  Game02ProgressLevel01: 'Game02ProgressLevel01',
+  Game02ProgressLevel02: 'Game02ProgressLevel02',
+  Game02ProgressLevel03: 'Game02ProgressLevel03',
+  Game02ProgressLevel04: 'Game02ProgressLevel04',
+  Game02ProgressLevel05: 'Game02ProgressLevel05',
+  Game02ProgressLevel06: 'Game02ProgressLevel06',
+  MentalWellBeingTypes: 'MentalWellBeingTypes',
 };
+

src/navigations/BottomTabNavigator.js

 import React from 'react';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import Home from '../screens/home/Home';
-import  Wallet  from '../screens/home/Wallet';
 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';
+import {StyleSheet} from 'react-native';
 import CustomTabBarButton from '../components/CustomTabBarButton';
 import CustomTabBar from '../components/CustomTabBar';
 import Logo from '../assets/icons/fitness1.svg';
 import Logo1 from '../assets/icons/fitness2.svg';
-import { Button, TextInput, View,SafeAreaView,KeyboardAvoidingView} from 'react-native';
+import GameNavigator from './GameNavigator';
+import AuthNavigator from './AuthNavigator';
 const Tab = createBottomTabNavigator();
 
 function BottomTabNavigator() {
@@ -21,45 +22,86 @@ function BottomTabNavigator() {
     // <KeyboardAvoidingView>
     <Tab.Navigator
       tabBar={props => <CustomTabBar {...props} />}
-    screenOptions={({route}) =>({
+      screenOptions={({route}) => ({
         tabBarHideOnKeyboard: true,
         headerShown: false,
         tabBarStyle: styles.tabBarStyle,
         tabBarInactiveTintColor: COLORS.dark,
         tabBarActiveTintColor: COLORS.primary,
-      tabBarShowLabel:false,
-      tabBarIcon: ({color, size, focused}) =>
-      {
+        tabBarShowLabel: false,
+        tabBarIcon: ({color, size, focused}) => {
           if (route.name === ROUTES.HOME_TAB) {
-          return focused ? <Icon name='home' size={22} color={color} /> :<Icon name='home-outline' size={22} color={color} />;
+            return focused ? (
+              <Icon name="home-sharp" size={22} color={color} />
+            ) : (
+              <Icon name="home-outline" size={22} color={color} />
+            );
+          } else if (route.name === ROUTES.SKIN_WELCOME) {
+            return focused ? (
+              <Icon name="pulse-sharp" size={22} color={color} />
+            ) : (
+              <Icon name="pulse-outline" size={22} color={color} />
+            );
           } else if (route.name === ROUTES.EXERCISE_HOME) {
-           return focused ? <Logo1 width={22} height={22} /> : <Logo width={22} height={22} /> ;
-         } else if (route.name === ROUTES.WALLET) {
-           return focused ? <Icon name='wallet' size={22} color={color} /> :<Icon name='wallet-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} />;
-         }
+            return focused ? (
+              <Logo1 width={22} height={22} />
+            ) : (
+              <Logo width={22} height={22} />
+            );
+          } else if (route.name === ROUTES.GAME_HOME) {
+            return focused ? (
+              <Icon name="game-controller-sharp" size={22} color={color}/>
+            ) : (
+              <Icon name="game-controller-outline" size={22} color={color}/>
+            );
+          } else if (route.name === ROUTES.LOGIN) {
+            return focused ? (
+              <Icon name="person-circle-sharp" size={22} color={color} />
+            ) : (
+              <Icon name="person-circle-outline" size={22} color={color} />
+            );
           }
+        },
       })}>
-      <Tab.Screen name={ROUTES.HOME_TAB} component={Home} 
+      <Tab.Screen
+        name={ROUTES.HOME_TAB}
+        component={Home}
         options={{
           tabBarButton: props => <CustomTabBarButton {...props} />,
         }}
       />
-      <Tab.Screen name={ROUTES.SETTINGS} component={Settings} 
+      <Tab.Screen
+        name={ROUTES.SKIN_WELCOME}
+        component={SkinNavigator}
         options={{
           tabBarButton: props => <CustomTabBarButton {...props} />,
-      }}/>
-      <Tab.Screen name={ROUTES.WALLET} component={Wallet} 
+      }}
+      />
+      <Tab.Screen
+        name={ROUTES.GAME_HOME}
+        component={GameNavigator}
         options={{
           tabBarButton: props => <CustomTabBarButton {...props} />,
-      }}/>
-      <Tab.Screen options={{
+        }}
+      />
+      <Tab.Screen
+        options={{
+          headerShown: false,
+          headerBackTitleVisible: false,
+          tabBarButton: props => <CustomTabBarButton {...props} />,
+        }}
+        name={ROUTES.EXERCISE_HOME}
+        component={ExerciseNavigator}
+      />
+      <Tab.Screen
+        options={{
           headerShown: false,
           headerBackTitleVisible: false,
           tabBarButton: props => <CustomTabBarButton {...props} />,
         }}
-       name={ROUTES.EXERCISE_HOME} component={ExerciseNavigator} />
+        name={ROUTES.LOGIN}
+        component={AuthNavigator}
+      />
     </Tab.Navigator>
     // </KeyboardAvoidingView>
   );
@@ -73,14 +115,14 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(255,255,255,0.1)',
     borderTopWidth: 0,
     borderColor: COLORS.white,
-    bottom: 5,
-    right: 10,
-    left: 10,
-    height: 58
+    bottom: 0,
+    right: 0,
+    left: 0,
+    height: 58,
   },
   mr7: {
     color: COLORS.primary,
     stroke: COLORS.primary,
-    fill: COLORS.primary
-  }
-})
\ No newline at end of file
+    fill: COLORS.primary,
+  },
+});

src/navigations/ExerciseNavigator.js

@@ -68,7 +68,10 @@ function ExerciseNavigator() {
         <>
           <Stack.Screen name={ROUTES.EXERCISE_WELCOME} component={WelcomeExercise} key="ExerciseWelcome" />
           <Stack.Screen name={ROUTES.EXERCISE_FORM} component={HealthFormExercise} key="ExerciseForm" />
-          <Stack.Screen name={ROUTES.EXERCISE_MAIN_MENU} component={MainMenuExercise} key="MainMenuExercise" />
+          <Stack.Screen name={ROUTES.EXERCISE_MAIN_NEW_MENU} component={MainMenuExercise} key="MainMenuNewExercise" />
+          <Stack.Screen name={ROUTES.EXERCISE_NEW_VIEW} component={ExerciseView} key="ExerciseNewView" />
+          <Stack.Screen name={ROUTES.EXERCISE_NEW_ACTION_VIEW} component={ExerciseActionView} key="ExerciseActionNewView" />
+          <Stack.Screen name={ROUTES.EXERCISE_NEW_PROGRESS} component={ExercisesProgress} key="ExercisesNewProgress" />
         </>
       )}
     </Stack.Navigator>

src/navigations/GameNavigator.js

+import React from 'react';
+import {createStackNavigator} from '@react-navigation/stack';
+import WelcomeExercise from '../screens/home/exercise/WelcomeExercise';
+import HealthFormExercise from '../screens/home/exercise/HealthFormExercise';
+import MainMenuExercise from '../screens/home/exercise/MainMenuExercise';
+import ExerciseView from '../screens/home/exercise/ExerciseView';
+import {COLORS, ROUTES} from '../constants';
+import WelcomePageGame from '../screens/home/game/WelcomeGame';
+import QuizOptionsPage from '../screens/home/game/QuizOptions';
+import QuestionInEnglishPage from '../screens/home/game/QuestionsInEnglish';
+import QuestionInSinhalaPage from '../screens/home/game/QuestionsInShinhala';
+import MainDetailsForm from '../screens/home/game/MainDetailsForm';
+import QuizScoreDisplayPage from '../screens/home/game/QuizScore';
+import ChooseGame from '../screens/home/game/ChooseGame';
+import Level01InstructionsPage from '../screens/home/game/game01/Level01Instructions';
+import GameLevel1 from '../screens/home/game/game01/GameLevel1';
+import CandyCrushGameLevel02 from '../screens/home/game/game01/GameLevel2';
+import CandyCrushGameLevel03 from '../screens/home/game/game01/GameLevel3';
+import CandyCrushGameLevel04 from '../screens/home/game/game01/GameLevel04';
+import GameLevel5 from '../screens/home/game/game01/GameLevel5';
+import GameLevel6 from '../screens/home/game/game01/GameLevel6';
+import GameLevel0 from '../screens/home/game/game01/GameLevel0';
+import Game02Level01 from '../screens/home/game/game02/level01';
+import CravingsPuzzleGame02Level02 from '../screens/home/game/game02/level02';
+import PuzzleGame02Level03 from '../screens/home/game/game02/level03';
+import Game02Level04 from '../screens/home/game/game02/level04';
+import Game02Level05 from '../screens/home/game/game02/level05';
+import Game02Level06 from '../screens/home/game/game02/level06';
+import Game02Level07 from '../screens/home/game/game02/level07';
+import GameLevelPage from '../screens/home/game/GameLevelPage';
+import MainDetailsFormInSinhala from '../screens/home/game/MainDetailsFormInSinhala';
+import Level01 from '../screens/home/game/game01/progress/Level01';
+import Level02 from '../screens/home/game/game01/progress/Level02';
+import Level03 from '../screens/home/game/game01/progress/Level03';
+import Level04 from '../screens/home/game/game01/progress/Level04';
+import Level05 from '../screens/home/game/game01/progress/Level05';
+import Level06 from '../screens/home/game/game01/progress/Level06';
+import Game02ProgressLevel01 from '../screens/home/game/game02/progress/Level01';
+import Game02ProgressLevel02 from '../screens/home/game/game02/progress/Level02';
+import Game02ProgressLevel03 from '../screens/home/game/game02/progress/Level03';
+import Game02ProgressLevel04 from '../screens/home/game/game02/progress/Level04';
+import Game02ProgressLevel05 from '../screens/home/game/game02/progress/Level05';
+import Game02ProgressLevel06 from '../screens/home/game/game02/progress/Level06';
+import MentalWellBeingTypes from '../screens/home/game/MentalWellBeingTypes';
+const Stack = createStackNavigator();
+
+function GameNavigator() {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerBackTitleVisible: false,
+        headerShown: false,
+      }}
+      initialRouteName={ROUTES.EXERCISE_MAIN_MENU}>
+      <Stack.Screen name={ROUTES.GAME_WELCOME} component={WelcomePageGame} />
+      <Stack.Screen
+        name={ROUTES.GAME_QUIZ_OPTIONS}
+        component={QuizOptionsPage}
+      />
+      <Stack.Screen
+        name={ROUTES.GAME_QUIZ_IN_ENGLISH}
+        component={QuestionInEnglishPage}
+      />
+      <Stack.Screen
+        name={ROUTES.GAME_QUIZ_IN_SINHALA}
+        component={QuestionInSinhalaPage}
+      />
+      <Stack.Screen name={ROUTES.GAME_FORM} component={HealthFormExercise} />
+      <Stack.Screen name={ROUTES.GAME_MAIN_MENU} component={MainMenuExercise} />
+      <Stack.Screen name={ROUTES.GAME_VIEW} component={ExerciseView} />
+      <Stack.Screen name={ROUTES.QUIZ_SCORE} component={QuizScoreDisplayPage} />
+      <Stack.Screen name={ROUTES.CHOOSE_GAME} component={ChooseGame} />
+      {/* {/* <Stack.Screen name={ROUTES.CHOOSE_GAME} component={ChooseGame} /> */}
+      {/* <Stack.Screen name={ROUTES.CHOOSE_GAME} component={ChooseGame} />
+      <Stack.Screen name={ROUTES.CHOOSE_GAME} component={ChooseGame} /> */}
+      <Stack.Screen name={ROUTES.GameLevel1} component={GameLevel1} />
+      <Stack.Screen
+        name={ROUTES.GameLevel2}
+        component={CandyCrushGameLevel02}
+      />
+      <Stack.Screen
+        name={ROUTES.GameLevel3}
+        component={CandyCrushGameLevel03}
+      />
+      <Stack.Screen
+        name={ROUTES.GameLevel4}
+        component={CandyCrushGameLevel04}
+      />
+      <Stack.Screen name={ROUTES.GameLevel5} component={GameLevel5} />
+      <Stack.Screen name={ROUTES.GameLevel0} component={GameLevel0} />
+      <Stack.Screen name={ROUTES.GameLevel6} component={GameLevel6} />
+      <Stack.Screen name={ROUTES.Game02Level01} component={Game02Level01} />
+      <Stack.Screen
+        name={ROUTES.CravingsPuzzleGame02Level02}
+        component={CravingsPuzzleGame02Level02}
+      />
+      <Stack.Screen
+        name={ROUTES.PuzzleGame02Level03}
+        component={PuzzleGame02Level03}
+      />
+      <Stack.Screen name={ROUTES.Game02Level04} component={Game02Level04} />
+      <Stack.Screen
+        name={ROUTES.Level01Instructions}
+        component={Level01InstructionsPage}
+      />
+      <Stack.Screen name={ROUTES.Game02Level05} component={Game02Level05} />
+      <Stack.Screen name={ROUTES.Game02Level06} component={Game02Level06} />
+      <Stack.Screen name={ROUTES.Game02Level07} component={Game02Level07} />
+      <Stack.Screen
+        name={ROUTES.GAME_MAIN_DETAILS}
+        component={MainDetailsForm}
+      />
+      <Stack.Screen
+        name={ROUTES.MainDetailsFormInSinhala}
+        component={MainDetailsFormInSinhala}
+      />
+      <Stack.Screen
+        name={ROUTES.MentalWellBeingTypes}
+        component={MentalWellBeingTypes}
+      />
+      <Stack.Screen name={ROUTES.GameLevelPage} component={GameLevelPage} />
+      <Stack.Screen name={ROUTES.Level01} component={Level01} />
+      <Stack.Screen name={ROUTES.Level02} component={Level02} />
+      <Stack.Screen name={ROUTES.Level03} component={Level03} />
+      <Stack.Screen name={ROUTES.Level04} component={Level04} />
+      <Stack.Screen name={ROUTES.Level05} component={Level05} />
+      <Stack.Screen name={ROUTES.Level06} component={Level06} />
+
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel01}
+        component={Game02ProgressLevel01}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel02}
+        component={Game02ProgressLevel02}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel03}
+        component={Game02ProgressLevel03}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel04}
+        component={Game02ProgressLevel04}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel05}
+        component={Game02ProgressLevel05}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel06}
+        component={Game02ProgressLevel06}
+      />
+    </Stack.Navigator>
+  );
+}
+export default GameNavigator;

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 Additionalinformation from '../screens/home/skin/information1';
+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.Screen name={ROUTES.SKIN_INFO} component={Additionalinformation} />
+     
+      
+  
+    </Stack.Navigator>
+  );
+}
+export default SkinNavigator;
\ No newline at end of file

src/screens/auth/Login.js

@@ -8,54 +8,62 @@ import {
   TouchableOpacity,
   KeyboardAvoidingView,
   ScrollView,
-  ToastAndroid
+  ToastAndroid,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {COLORS, ROUTES} from '../../constants';
 import Logo from '../../assets/icons/mother.svg';
-import { Formik } from 'formik';
-import { signin } from '../../services/auth/index';
+import {Formik} from 'formik';
+import {signin} from '../../services/auth/index';
 
-
-const Login = (props) => {
+const Login = props => {
   const {navigation} = props;
-  const onSubmit = async (values) => {
-    console.log("dataset2")
+  const onSubmit = async values => {
+    console.log('dataset2');
     let respond = await signin(values.email, values.password);
-    console.log("dataset3",respond.data)
-    if(respond.data){
-      if(respond.data.success === true){
-        console.log("dataset")
-        navigation.navigate(ROUTES.HOME)
-      }
-      else{
+    console.log('dataset3', respond.data);
+    if (respond.data) {
+      if (respond.data.success === true) {
+        console.log('dataset');
+        ToastAndroid.show('Logged Successfully', ToastAndroid.SHORT);
+        navigation.navigate(ROUTES.HOME);
+      } else {
         ToastAndroid.show('Email or password incorrect !', ToastAndroid.SHORT);
       }
-    }
-    else{
+    } else {
       ToastAndroid.show('Network Error !', ToastAndroid.SHORT);
     }
-    
-} 
+  };
   return (
-    <KeyboardAvoidingView style={{flex:1}}>
-    <ScrollView contentContainerStyle={{flex:1}} bounces={false}>
+    <KeyboardAvoidingView style={{flex: 1}}>
+      <ScrollView contentContainerStyle={{flex: 1}} bounces={false}>
         <View style={Styles.container}>
           <View style={Styles.wFull}>
             <Formik
-                initialValues={{ email: '' , password: ''}}
-                onSubmit={values => onSubmit(values)}
-            >
-                {({ handleChange, handleBlur, handleSubmit, values }) => (
+              initialValues={{email: '', password: ''}}
+              onSubmit={values => onSubmit(values)}>
+              {({handleChange, handleBlur, handleSubmit, values}) => (
                 <>
                   <View style={Styles.row}>
                     <Logo width={55} height={55} style={Styles.mr7} />
                     <Text style={Styles.brandName}>EmidWife</Text>
                   </View>
 
-          <Text style={Styles.loginContinueTxt}>Login in to continue</Text>
-          <TextInput style={Styles.input} placeholder="Email"  onChangeText={handleChange('email')} value={values.email}/>
-          <TextInput style={Styles.input} placeholder="Password" onChangeText={handleChange('password')} value={values.password}/>
+                  <Text style={Styles.loginContinueTxt}>
+                    Login in to continue
+                  </Text>
+                  <TextInput
+                    style={Styles.input}
+                    placeholder="Email"
+                    onChangeText={handleChange('email')}
+                    value={values.email}
+                  />
+                  <TextInput
+                    style={Styles.input}
+                    placeholder="Password"
+                    onChangeText={handleChange('password')}
+                    value={values.password}
+                  />
 
                   <View style={Styles.loginBtnWrapper}>
                     <LinearGradient
@@ -64,14 +72,19 @@ const Login = (props) => {
                       start={{y: 0.0, x: 0.0}}
                       end={{y: 1.0, x: 0.0}}>
                       {/******************** LOGIN BUTTON *********************/}
-              <TouchableOpacity activeOpacity={0.7} style={Styles.loginBtn}   onPress={handleSubmit}>
+                      <TouchableOpacity
+                        activeOpacity={0.7}
+                        style={Styles.loginBtn}
+                        onPress={handleSubmit}>
                         <Text style={Styles.loginText}>Log In</Text>
                       </TouchableOpacity>
                     </LinearGradient>
                   </View>
 
                   {/***************** FORGOT PASSWORD BUTTON *****************/}
-          <TouchableOpacity style={Styles.loginBtn}  onPress={() => navigation.navigate(ROUTES.FORGOT_PASSWORD)}>
+                  <TouchableOpacity
+                    style={Styles.loginBtn}
+                    onPress={() => navigation.navigate(ROUTES.FORGOT_PASSWORD)}>
                     <Text style={Styles.forgotPassText}>Forgot Password?</Text>
                   </TouchableOpacity>
                 </>
@@ -82,7 +95,8 @@ const Login = (props) => {
           <View style={Styles.footer}>
             <Text style={Styles.footerText}> Don't have an account? </Text>
             {/******************** REGISTER BUTTON *********************/}
-          <TouchableOpacity onPress={() => navigation.navigate(ROUTES.REGISTER)}>
+            <TouchableOpacity
+              onPress={() => navigation.navigate(ROUTES.REGISTER)}>
               <Text style={Styles.signupBtn}>Sign Up</Text>
             </TouchableOpacity>
           </View>
@@ -120,7 +134,6 @@ const Styles = StyleSheet.create({
     color: COLORS.gray,
     marginBottom: 16,
     fontWeight: 'bold',
-    
   },
   input: {
     borderWidth: 1,
@@ -130,7 +143,7 @@ const Styles = StyleSheet.create({
     borderRadius: 12,
     height: 45,
     paddingVertical: 0,
-    color: "black"
+    color: 'black',
   },
   // Login Btn Styles
   loginBtnWrapper: {

src/screens/auth/Register.js

@@ -8,58 +8,98 @@ import {
   TouchableOpacity,
   KeyboardAvoidingView,
   ScrollView,
-  ToastAndroid
+  ToastAndroid,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { COLORS, ROUTES } from '../../constants';
+import {COLORS, ROUTES} from '../../constants';
 import Logo from '../../assets/icons/mother.svg';
-import { Formik } from 'formik';
-import { signup } from '../../services/auth/index'; 
+import {Formik} from 'formik';
+import {signup} from '../../services/auth/index';
 
-const Register = ({ navigation }) => {
-  const onSubmit = async (values) => {
-    let respond = await signup(values.name, values.password, values.email, values.age, values.week);
-    console.log("dataset3",respond.data)
-    if(respond.data.success === true){
-      console.log("dataset")
-      navigation.navigate(ROUTES.HOME)
-      ToastAndroid.show('Login success', ToastAndroid.SHORT);
-    }
-    else{
+const Register = ({navigation}) => {
+  const onSubmit = async values => {
+    let respond = await signup(
+      values.name,
+      values.password,
+      values.email,
+      values.age,
+      values.week,
+    );
+    console.log('dataset3', respond.data);
+    if (respond.data.success === true) {
+      console.log('dataset');
+      ToastAndroid.show('Registered Successfully', ToastAndroid.SHORT);
+      navigation.navigate(ROUTES.HOME);
+    } else {
       ToastAndroid.show('Network or details not clear !', ToastAndroid.SHORT);
     }
   };
 
   return (
-    <KeyboardAvoidingView style={{ flex: 1 }}>
-      <ScrollView contentContainerStyle={{ flexGrow: 1 }} bounces={false}>
+    <KeyboardAvoidingView style={{flex: 1}}>
+      <ScrollView contentContainerStyle={{flexGrow: 1}} bounces={false}>
         <View style={styles.container}>
           <View style={styles.wFull}>
             <Formik
-              initialValues={{ email: '', password: '', name: '', age: '', week: '' }}
-              onSubmit={values => onSubmit(values)}
-            >
-              {({ handleChange, handleBlur, handleSubmit, values }) => (
+              initialValues={{
+                email: '',
+                password: '',
+                name: '',
+                age: '',
+                week: '',
+              }}
+              onSubmit={values => onSubmit(values)}>
+              {({handleChange, handleBlur, handleSubmit, values}) => (
                 <>
                   <View style={styles.row}>
                     <Logo width={55} height={55} style={styles.mr7} />
                     <Text style={styles.brandName}>EmidWife</Text>
                   </View>
 
-                  <Text style={styles.loginContinueTxt}>Register to continue</Text>
-                  <TextInput style={styles.input} placeholder="Name" onChangeText={handleChange('name')} value={values.name} />
-                  <TextInput style={styles.input} placeholder="Email" onChangeText={handleChange('email')} value={values.email} />
-                  <TextInput style={styles.input} placeholder="Password" onChangeText={handleChange('password')} value={values.password} />
-                  <TextInput style={styles.input} placeholder="Age" onChangeText={handleChange('age')} value={values.age} />
-                  <TextInput style={styles.input} placeholder="Week" onChangeText={handleChange('week')} value={values.week} />
+                  <Text style={styles.loginContinueTxt}>
+                    Register to continue
+                  </Text>
+                  <TextInput
+                    style={styles.input}
+                    placeholder="Name"
+                    onChangeText={handleChange('name')}
+                    value={values.name}
+                  />
+                  <TextInput
+                    style={styles.input}
+                    placeholder="Email"
+                    onChangeText={handleChange('email')}
+                    value={values.email}
+                  />
+                  <TextInput
+                    style={styles.input}
+                    placeholder="Password"
+                    onChangeText={handleChange('password')}
+                    value={values.password}
+                  />
+                  <TextInput
+                    style={styles.input}
+                    placeholder="Age"
+                    onChangeText={handleChange('age')}
+                    value={values.age}
+                  />
+                  <TextInput
+                    style={styles.input}
+                    placeholder="Week"
+                    onChangeText={handleChange('week')}
+                    value={values.week}
+                  />
 
                   <View style={styles.loginBtnWrapper}>
                     <LinearGradient
                       colors={[COLORS.gradientForm, COLORS.bgColor]}
                       style={styles.linearGradient}
-                      start={{ y: 0.0, x: 0.0 }}
-                      end={{ y: 1.0, x: 0.0 }}>
-                      <TouchableOpacity activeOpacity={0.7} style={styles.loginBtn} onPress={handleSubmit}>
+                      start={{y: 0.0, x: 0.0}}
+                      end={{y: 1.0, x: 0.0}}>
+                      <TouchableOpacity
+                        activeOpacity={0.7}
+                        style={styles.loginBtn}
+                        onPress={handleSubmit}>
                         <Text style={styles.loginText}>Sign Up</Text>
                       </TouchableOpacity>
                     </LinearGradient>
@@ -114,6 +154,7 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     height: 45,
     paddingVertical: 0,
+    color: COLORS.black,
   },
   // Login Btn Styles
   loginBtnWrapper: {

src/screens/home/Home.js

 import React from 'react';
-import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import {Image, TouchableOpacity, Text, View} from 'react-native';
+import {COLORS, IMGS} from '../../constants';
+import LinearGradient from 'react-native-linear-gradient';
 
 const Home = () => {
   return (
+    <LinearGradient
+      style={{
+        flex: 1,
+      }}
+      colors={[COLORS.dark_purple, COLORS.white, COLORS.dark_purple]}>
       <View>
-            <Text>Register</Text>
+        <View>
+          <Image
+            source={IMGS.home_page}
+            style={{
+              height: 360,
+              width: '100%',
+              position: 'absolute',
+              top: 100,
+            }}
+          />
+        </View>
+
+        <View
+          style={{
+            paddingHorizontal: 67,
+            position: 'absolute',
+            top: 510,
+            width: '100%',
+          }}>
+          <Text
+            style={{
+              fontSize: 45,
+              color: COLORS.black,
+              fontWeight: 'bold',
+              textAlign: 'center',
+              fontFamily: 'monospace',
+            }}>
+            Welcome to
+          </Text>
+          <Text
+            style={{
+              fontSize: 45,
+              color: COLORS.black,
+              fontWeight: 'bold',
+              textAlign: 'center',
+              fontFamily: 'monospace',
+            }}>
+            e-MidWife
+          </Text>
+
+          {/* <View style={{marginTop: 1}}>
+            <TouchableOpacity
+              style={{
+                backgroundColor: COLORS.purple_new,
+                borderColor: COLORS.purple_new,
+                height: 50,
+                marginBottom: 50,
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderRadius: 14,
+                width: '100%',
+                zIndex: 3,
+                elevation: 10,
+              }}
+                onPress={() => navigation.navigate(ROUTES.GAME_QUIZ_OPTIONS)}
+            >
+              <Text
+                medium
+                center
+                style={{color: 'white', fontSize: 24, fontWeight: 'bold'}}>
+                Start
+              </Text>
+            </TouchableOpacity>
+          </View> */}
+        </View>
       </View>
+    </LinearGradient>
   );
 };
 export default Home;

src/screens/home/exercise/HealthFormExercise.js

 import React, { useEffect, useState } from 'react';
-import { TextInput, View, SafeAreaView, KeyboardAvoidingView, TouchableOpacity, Text, Modal, StyleSheet, ScrollView, ToastAndroid, Image} from 'react-native';
+import { TextInput, View, SafeAreaView, KeyboardAvoidingView, TouchableOpacity, Text, Modal, StyleSheet, ScrollView, ToastAndroid, Image } from 'react-native';
 import { Formik } from 'formik';
 import CheckBox from '@react-native-community/checkbox';
 import LinearGradient from 'react-native-linear-gradient';
 import { COLORS, IMGS, ROUTES } from '../../../constants';
 import Button from '../../../components/Button';
-import { meternalHealthPredict, addInitialExercises } from '../../../services/exercises/index';
+import { meternalHealthPredict, addInitialExercises, updateDeviceStatus } from '../../../services/exercises/index';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import database from '@react-native-firebase/database';
 import Dot from '../../../assets/icons/dot.svg';
@@ -20,34 +20,50 @@ const HealthFormExercise = (props) => {
     const [initialBodyTemp, setInitialBodyTemp] = useState();
     const [initialHeartRate, setInitialHeartRate] = useState();
     const [dataArray, setDataArray] = useState(null);
+    const [isWearbleDevice, setIsWearbleDevice] = useState(false);
+    const [wearableModalVisible, setWearableModalVisible] = useState(false);
 
 
     useEffect(() => {
+        if (isWearbleDevice) {
             // Reference to your Firebase Realtime Database
             const databaseRef = database().ref('test');
             ToastAndroid.show('Data reading on device !', ToastAndroid.SHORT);
+
             // Attach an asynchronous listener to read the data at our reference
             const onDataChange = (snapshot) => {
                 const data = snapshot.val();
                 setDataArray(data);
-            console.log("dada", data)
+                console.log("data", data);
             };
+            updateDeviceState()
             
             databaseRef.on('value', onDataChange);
 
-        // Detach the listener when component unmounts
+            // Detach the listener when component unmounts or when isWearableDevice changes
             return () => {
                 databaseRef.off('value', onDataChange);
             };
-    }, []); // Empty dependency array to run the effect only once
+        }
 
-    const onSubmit = async (values) => {
+    }, [isWearbleDevice]);
+
+    const updateDeviceState = async () => {
         let userDataString = await AsyncStorage.getItem('userData');
         let userData = JSON.parse(userDataString);
         console.log(userData)
-        let respond = await meternalHealthPredict(userData.age, values.SystolicBP, values.DiastolicBP, values.Blood_glucose, values.BodyTemp, values.HeartRate);
+        let deviceStatus = isWearbleDevice;
+        await updateDeviceStatus(userData._id, deviceStatus);
+    }
 
-        if (respond.data.prediction) {
+    const onSubmit = async (values) => {
+        let userDataString = await AsyncStorage.getItem('userData');
+        let userData = JSON.parse(userDataString);
+        console.log(values)
+        let respond = await meternalHealthPredict(userData.age, values.SystolicBP, values.DiastolicBP, values.Blood_glucose, values.BodyTemp, values.HeartRate);
+        console.log(respond)
+        if (respond) {
+            ToastAndroid.show('Prediction getting successfully !', ToastAndroid.SHORT);
             //0:"high risk",1:"low risk",2:"mid risk"
             let prediction = respond.data.prediction === "high risk" ? 0 : respond.data.prediction === "low risk" ? 1 : respond.data.prediction === "mid risk" ? 2 : null;
             let predictionStatus = respond.data.prediction === "high risk" ? 20 : respond.data.prediction === "low risk" ? 0 : respond.data.prediction === "mid risk" ? 10 : null;
@@ -59,7 +75,7 @@ const HealthFormExercise = (props) => {
             if (responds.data) {
                 try {
                     await AsyncStorage.setItem('userData', JSON.stringify(userData));
-                    navigation.navigate(ROUTES.EXERCISE_MAIN_MENU)
+                    navigation.navigate(ROUTES.EXERCISE_MAIN_NEW_MENU)
                     ToastAndroid.show('userData updated successfully !', ToastAndroid.SHORT);
                 } catch (error) {
                     ToastAndroid.show('Error updating userData !', ToastAndroid.SHORT);
@@ -76,7 +92,7 @@ const HealthFormExercise = (props) => {
     return (
         <SafeAreaView >
             <Formik
-                initialValues={{ SystolicBP: '', DiastolicBP: '', Blood_glucose: '', BodyTemp: `${dataArray?.temp}` || '', HeartRate: `${dataArray?.bpm}` || '' }}
+                initialValues={{ SystolicBP: '', DiastolicBP: '', Blood_glucose: '', BodyTemp: isWearbleDevice ? `${dataArray?.temp}` : '', HeartRate: isWearbleDevice ? `${dataArray?.bpm}` : '' }}
                 onSubmit={values => onSubmit(values)}
                 enableReinitialize={true}
             >
@@ -117,13 +133,47 @@ const HealthFormExercise = (props) => {
                                             />
                                         </View>
                                         <View style={Styles.closeDiv}>
-                                            <TouchableOpacity onPress={() => setModalVisible(false)}>
+                                            <TouchableOpacity onPress={() => { setModalVisible(false); setWearableModalVisible(true) }}>
                                                 <Text style={Styles.closeButton}>Close</Text>
                                             </TouchableOpacity>
                                         </View>
                                     </View>
                                 </View>
                             </Modal>
+                            <Modal
+                                animationType="slide"
+                                transparent={true}
+                                visible={wearableModalVisible}
+                                onRequestClose={() => {
+                                    setWearableModalVisible(!wearableModalVisible);
+                                }}
+                            >
+                                <View style={Styles.centeredView}>
+                                    <View style={Styles.modalView}>
+                                        <Text>Do you have a wearable device?</Text>
+                                        <View style={Styles.buttonRow}>
+                                            <TouchableOpacity
+                                                onPress={() => {
+                                                    setIsWearbleDevice(true);
+                                                    setWearableModalVisible(false);
+                                                }}
+
+                                            >
+                                                <Text style={Styles.closeButton}>Yes</Text>
+                                            </TouchableOpacity>
+                                            <TouchableOpacity
+                                                onPress={() => {
+                                                    setIsWearbleDevice(false)
+                                                    setWearableModalVisible(false);
+                                                }}
+
+                                            >
+                                                <Text style={Styles.closeNewButton}>No</Text>
+                                            </TouchableOpacity>
+                                        </View>
+                                    </View>
+                                </View>
+                            </Modal>
 
                             <Text style={Styles.textInputLabel}>SystolicBP (mmHg)</Text>
                             <View style={Styles.inputBox}>
@@ -237,6 +287,13 @@ const Styles = StyleSheet.create({
         fontSize: 18,
         fontWeight: 'bold',
     },
+    closeNewButton: {
+        marginTop: 10,
+        color: COLORS.danger,
+        textAlign: 'center',
+        fontSize: 18,
+        fontWeight: 'bold',
+    },
     submitButton: {
         backgroundColor: '#1899D6',
         borderRadius: 10, // Adjust the border radius as needed
@@ -354,8 +411,17 @@ const Styles = StyleSheet.create({
         display: "flex",
         flexDirection: "row",
         justifyContent: "center",
-        alignItems:"center",
+        alignItems: "center",
         width: "100%"
+    },
+    buttonRow: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        width: '100%',
+        marginTop: 10,
+        gap: 20
     }
 });