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

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

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" />
@@ -13,7 +14,8 @@
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
-      android:theme="@style/AppTheme">
+      android:theme="@style/AppTheme"
+      android:usesCleartextTraffic="true">
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"

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=password
+MYAPP_UPLOAD_KEY_PASSWORD=password
\ No newline at end of file

package.json

@@ -27,11 +27,13 @@
     "react-native-circular-progress": "^1.4.0",
     "react-native-circular-progress-indicator": "^4.4.2",
     "react-native-gesture-handler": "^2.16.2",
+    "react-native-gifted-chat": "^2.4.0",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-progress-circle-gradient": "^1.2.1",
     "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,7 +42,6 @@
   },
   "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",
@@ -53,6 +54,7 @@
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
+    "react-native-image-picker": "^7.1.1",
     "react-test-renderer": "18.2.0",
     "typescript": "5.0.4"
   },

src/components/HeaderWithBackNav.js

+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import React from 'react';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { useNavigation, NavigationProp } from '@react-navigation/native';
+
+
+const HeaderWithBackArrow = ({ title, screenName }) => {
+    const navigation = useNavigation();
+    return (
+        <View style={styles.header}>
+            <TouchableOpacity onPress={() => navigation.navigate(screenName)} style={styles.closeButton}>
+                <Icon name="pulse-sharp" size={22} color={black} />
+            </TouchableOpacity>
+            <Text style={styles.headerTitle}>{title}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center', // Keeps the title centered
+        padding: 16,
+        borderBottomWidth: 1,
+        borderBottomColor: '#c4c4c4',
+        position: 'relative', // Allows absolute positioning for children
+    },
+    headerTitle: {
+        fontSize: 16,
+        color: 'black',
+    },
+    closeButton: {
+        position: 'absolute', // Positions the arrow independently of the flex layout
+        left: 0, // Aligns the arrow to the left
+        padding: 16, // Optional: increases the touchable area
+    },
+});
+
+export default HeaderWithBackArrow;
\ No newline at end of file

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,5 +9,24 @@ export default {
   gray: '#666666',
   grayLight: '#ccc',
   black: '#0a0a0a',
-  blue:'#ADC4CE',
+  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',
+  red: '#DC143C',
+  cadmium_Green: '#5EAAA8',
+  main_blue: '#6096B4',
+  dark_Pink: '#D885A3',
+  light_yellow: '#FFDBA4',
+  orange: '#C7B198',
+  pink_dark: '#FFC4E1',
+  light_gray: '#D3DEDC',
 };

src/constants/imgs.js

@@ -15,6 +15,67 @@ export default {
   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'),
+  user_profile_image: require('../assets/user_profile.png'),
+  lip_stick: require('../assets/games/lipstick.png'),
+  ring: require('../assets/games/ring.png'),
+  play_pen: require('../assets/games/play_pen.png'),
+  milk_bottle: require('../assets/games/milk_bottle.png'),
+  high_chair: require('../assets/games/high_chair.png'),
+  home_exercises: require('../assets/running-pregnant-woman.png'),
+  home_mental_well_being: require('../assets/relaxing-mind.png'),
+  home_emotional_support: require('../assets/virtual-assistant.png'),
+  home_skin: require('../assets/home_skin.png'),
+  logo: require('../assets/foreground.png'),
   sk_17: require('../assets/sk_17.png'),
   sk_18: require('../assets/sk_18.png'),
   sk_19: require('../assets/sk_19.png'),

src/constants/routes.js

@@ -2,17 +2,13 @@ export default {
   LOGIN: 'Login',
   REGISTER: 'Register',
   FORGOT_PASSWORD: 'Forgot_Password',
-
+  PROFILE: 'UserProfile',
   HOME: 'Home',
   HOME_TAB: 'Home_Tab',
-
   WALLET: 'Wallet',
-
   NOTIFICATIONS: 'Notifications',
-
   SETTINGS: 'Settings',
   SETTINGS_NAVIGATOR: 'Welcome',
-
   SETTINGS_DETAIL: 'Settings_Detail',
 
   //EXERCISES
@@ -20,12 +16,15 @@ 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_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',
@@ -35,6 +34,60 @@ export default {
   SKIN_VIDEO3: 'Skin_Video3',
   SKIN_VIDEO4: 'Skin_Video4',
   SKIN_VIDEO5: 'Skin_Video5',
+  
+
+  //GAMES
+  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',
+  Game02Level08: 'Game02Level08',
+  Game02Level09: 'Game02Level09',
+  Game02Level10: 'Game02Level10',
+  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',
+
+  CHAT_HOME: 'chat_home',
+  CHAT_SCREEN: 'chat_screen',
+
+  Game02ProgressLevel10: 'Game02ProgressLevel10',
+  Game02ProgressLevel09: 'Game02ProgressLevel09',
+  Game02ProgressLevel08: 'Game02ProgressLevel08',
+  Game02ProgressLevel07: 'Game02ProgressLevel07',
   SKIN_INFO:'skin_info',
   SKIN_INFO2:'skin_info2',
   SKIN_INFO3:'skin_info3',

src/navigations/AuthNavigator.js

 import React, {useState, useEffect} from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
-import  Login  from '../screens/auth/Login';
-import Register  from '../screens/auth/Register';
-import  ForgotPassword  from '../screens/auth/ForgotPassword';
+import {createStackNavigator} from '@react-navigation/stack';
+import Login from '../screens/auth/Login';
+import Register from '../screens/auth/Register';
+import ForgotPassword from '../screens/auth/ForgotPassword';
 // import  { Login, Register, ForgotPassword}  from '../screens';
-import { ROUTES } from "../constants"
-import BottomTabNavigator from './BottomTabNavigator'
+import {ROUTES} from '../constants';
+import BottomTabNavigator from './BottomTabNavigator';
 const Stack = createStackNavigator();
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import ProfileNavigator from './ProfileNavigator';
 
 function AuthNavigator() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
-    const [isLoggedIn, setIsLoggedIn] = useState(false);
+  useEffect(() => {
+    // Check if the user is already logged in
+    checkLoggedInStatus();
+  }, []);
 
-    useEffect(() => {
-        // Check if the user is already logged in
-        checkLoggedInStatus();
-    }, []);
-
-    const checkLoggedInStatus = async () => {
-        try {
-            // Example: Check if a token or user data exists in AsyncStorage
-            const userData = await AsyncStorage.getItem('userData');
-            if (userData) {
-                setIsLoggedIn(true);
-            }
-        } catch (error) {
-            console.error('Error checking logged in status:', error);
-        }
-    };
-    return (
-        // <Stack.Navigator 
-        // screenOptions={{
-        //     headerBackTitleVisible: false
-        // }}
-        // initialRouteName={ROUTES.LOGIN}
-        // >
-        //     <Stack.Screen
-        //         options={{
-        //             headerShown: false
-        //         }}
-        //         name={ROUTES.LOGIN} component={Login}
-        //     />
-        //     <Stack.Screen 
-        //     options={{
-        //         headerShown: false,
-        //         headerBackTitleVisible: false
-        //     }}
-        //     name={ROUTES.REGISTER} component={Register} 
-        //     /> 
-        //     <Stack.Screen 
-        //     name={ROUTES.FORGOT_PASSWORD} component={ForgotPassword} 
-        //     /> 
-        //     <Stack.Screen options={{
-        //         headerShown: false,
-        //         headerBackTitleVisible: false
-        //     }}
-        //         name={ROUTES.HOME} component={BottomTabNavigator} />
-        // </Stack.Navigator>
-        <Stack.Navigator
-            screenOptions={{
-                headerBackTitleVisible: false
+  const checkLoggedInStatus = async () => {
+    try {
+      // Example: Check if a token or user data exists in AsyncStorage
+      const userData = await AsyncStorage.getItem('userData');
+      if (userData) {
+        setIsLoggedIn(true);
+      }
+    } catch (error) {
+      console.error('Error checking logged in status:', error);
+    }
+  };
+  return (
+    // <Stack.Navigator
+    // screenOptions={{
+    //     headerBackTitleVisible: false
+    // }}
+    // initialRouteName={ROUTES.LOGIN}
+    // >
+    //     <Stack.Screen
+    //         options={{
+    //             headerShown: false
+    //         }}
+    //         name={ROUTES.LOGIN} component={Login}
+    //     />
+    //     <Stack.Screen
+    //     options={{
+    //         headerShown: false,
+    //         headerBackTitleVisible: false
+    //     }}
+    //     name={ROUTES.REGISTER} component={Register}
+    //     />
+    //     <Stack.Screen
+    //     name={ROUTES.FORGOT_PASSWORD} component={ForgotPassword}
+    //     />
+    //     <Stack.Screen options={{
+    //         headerShown: false,
+    //         headerBackTitleVisible: false
+    //     }}
+    //         name={ROUTES.HOME} component={BottomTabNavigator} />
+    // </Stack.Navigator>
+    <Stack.Navigator
+      screenOptions={{
+        headerBackTitleVisible: false,
+      }}
+      initialRouteName={ROUTES.LOGIN}>
+      {isLoggedIn ? (
+        <>
+          <Stack.Screen
+            options={{
+              headerShown: false,
+            }}
+            name={ROUTES.HOME}
+            component={BottomTabNavigator}
+          />
+          <Stack.Screen
+            options={{
+              headerShown: false,
+            }}
+            name={ROUTES.PROFILE}
+            component={ProfileNavigator}
+          />
+        </>
+      ) : (
+        <>
+          <Stack.Screen
+            options={{
+              headerShown: false,
+            }}
+            name={ROUTES.LOGIN}
+            component={Login}
+          />
+          <Stack.Screen
+            options={{
+              headerShown: false,
+              headerBackTitleVisible: false,
+            }}
+            name={ROUTES.REGISTER}
+            component={Register}
+          />
+          <Stack.Screen
+            name={ROUTES.FORGOT_PASSWORD}
+            component={ForgotPassword}
+          />
+          <Stack.Screen
+            options={{
+              headerShown: false,
+            }}
+            name={ROUTES.HOME}
+            component={BottomTabNavigator}
+          />
+          <Stack.Screen
+            options={{
+              headerShown: false,
             }}
-            initialRouteName={ROUTES.LOGIN}
-        >
-            {isLoggedIn ? (
-                <Stack.Screen
-                    options={{
-                        headerShown: false
-                    }}
-                    name={ROUTES.HOME}
-                    component={BottomTabNavigator}
-                />
-            ) : (
-                <>
-                    <Stack.Screen
-                        options={{
-                            headerShown: false
-                        }}
-                        name={ROUTES.LOGIN}
-                        component={Login}
-                    />
-                    <Stack.Screen
-                        options={{
-                            headerShown: false,
-                            headerBackTitleVisible: false
-                        }}
-                        name={ROUTES.REGISTER}
-                        component={Register}
-                    />
-                    <Stack.Screen
-                        name={ROUTES.FORGOT_PASSWORD}
-                        component={ForgotPassword}
-                    />
-                     <Stack.Screen
-                    options={{
-                        headerShown: false
-                    }}
-                    name={ROUTES.HOME}
-                    component={BottomTabNavigator}
-                />
-                </>
-            )}
-        </Stack.Navigator>
-    );
+            name={ROUTES.PROFILE}
+            component={ProfileNavigator}
+          />
+        </>
+      )}
+    </Stack.Navigator>
+  );
 }
 
-export default AuthNavigator;
+export default AuthNavigator;
\ No newline at end of file

src/navigations/BottomTabNavigator.js

 import React from 'react';
 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 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 { COLORS, ROUTES } from '../constants';
 import Icon from 'react-native-vector-icons/Ionicons';
 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';
+import ChatBotNavigation from './ChatBotNavigator';
+
 const Tab = createBottomTabNavigator();
 
 function BottomTabNavigator() {
   return (
     // <KeyboardAvoidingView>
     <Tab.Navigator
-    tabBar={props => <CustomTabBar {...props} />}
-    screenOptions={({route}) =>({
-      tabBarHideOnKeyboard: true,
-      headerShown: false,
-      tabBarStyle: styles.tabBarStyle,
-      tabBarInactiveTintColor: COLORS.dark, 
-      tabBarActiveTintColor: COLORS.primary,
-      tabBarShowLabel:false,
-      tabBarIcon: ({color, size, focused}) =>
-      {
-        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} /> ;
-         } 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} />;
-         }
-      }
-    })}>
-      <Tab.Screen name={ROUTES.SKIN_WELCOME} component={SkinNavigator} 
-      options={{
-        tabBarButton: props => <CustomTabBarButton {...props} />,
-      }}
-      />
-      <Tab.Screen name={ROUTES.SETTINGS} component={Settings} 
-      options={{
-        tabBarButton: props => <CustomTabBarButton {...props} />,
-      }}/>
-      <Tab.Screen name={ROUTES.WALLET} component={Wallet} 
-      options={{
-        tabBarButton: props => <CustomTabBarButton {...props} />,
-      }}/>
-      <Tab.Screen options={{
+      tabBar={props => <CustomTabBar {...props} />}
+      screenOptions={({ route }) => ({
+        tabBarHideOnKeyboard: true,
         headerShown: false,
-        headerBackTitleVisible: false,
-        tabBarButton: props => <CustomTabBarButton {...props} />,
-      }}
-       name={ROUTES.EXERCISE_HOME} component={ExerciseNavigator} />
+        tabBarStyle: styles.tabBarStyle,
+        tabBarInactiveTintColor: COLORS.dark,
+        tabBarActiveTintColor: COLORS.primary,
+        tabBarShowLabel: false,
+        tabBarIcon: ({ color, size, focused }) => {
+          if (route.name === ROUTES.HOME_TAB) {
+            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.GAME_WELCOME) {
+            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.CHAT_HOME) {
+            return focused ? (
+              <Icon name="chatbubble-ellipses-sharp" size={22} color={color} />
+            ) : (
+              <Icon name="chatbubble-ellipses-outline" size={22} color={color} />
+            );
+          }
+        },
+      })}>
+      <Tab.Screen
+        name={ROUTES.HOME_TAB}
+        component={Home}
+        options={{
+          tabBarButton: props => <CustomTabBarButton {...props} />,
+        }}
+      />
+      <Tab.Screen
+        name={ROUTES.SKIN_WELCOME}
+        component={SkinNavigator}
+        options={{
+          tabBarButton: props => <CustomTabBarButton {...props} />,
+        }}
+      />
+      <Tab.Screen
+        name={ROUTES.GAME_WELCOME}
+        component={GameNavigator}
+        options={{
+          tabBarButton: props => <CustomTabBarButton {...props} />,
+        }}
+      />
+      <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.CHAT_HOME}
+        component={ChatBotNavigation}
+      />
     </Tab.Navigator>
     // </KeyboardAvoidingView>
   );
@@ -74,14 +117,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
-  }
-})
+    fill: COLORS.primary,
+  },
+});
\ No newline at end of file

src/navigations/ChatBotNavigator.js

+import { View, Text } from 'react-native'
+import React from 'react'
+import HomeScreen from '../screens/home/chat/ChatbotHome';
+import { createStackNavigator } from '@react-navigation/stack';
+import ChatScreen from '../screens/home/chat/ChatScreen';
+import { COLORS, ROUTES } from "../constants";
+
+const Stack = createStackNavigator();
+
+export default function ChatBotNavigation() {
+    return (
+        <Stack.Navigator screenOptions={{ headerShown: false }}>
+            <Stack.Screen name={ROUTES.CHAT_HOME} component={HomeScreen} />
+            <Stack.Screen name={ROUTES.CHAT_SCREEN} component={ChatScreen} />
+
+        </Stack.Navigator>
+    )
+}
\ No newline at end of file

src/navigations/ExerciseNavigator.js

@@ -69,6 +69,9 @@ 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_VIEW} component={ExerciseView} key="ExerciseView" />
+          <Stack.Screen name={ROUTES.EXERCISE_ACTION_VIEW} component={ExerciseActionView} key="ExerciseActionView" />
+          <Stack.Screen name={ROUTES.EXERCISE_PROGRESS} component={ExercisesProgress} key="ExercisesProgress" />
         </>
       )}
     </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';
+import Game02ProgressLevel07 from '../screens/home/game/game02/progress/Level07';
+import Game02ProgressLevel08 from '../screens/home/game/game02/progress/Level08';
+import Game02ProgressLevel09 from '../screens/home/game/game02/progress/Level09';
+import Game02ProgressLevel10 from '../screens/home/game/game02/progress/Level10';
+import Game02Level10 from '../screens/home/game/game02/level10';
+import Game02Level09 from '../screens/home/game/game02/level09';
+import Game02Level08 from '../screens/home/game/game02/level08';
+const Stack = createStackNavigator();
+
+function GameNavigator() {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerBackTitleVisible: false,
+        headerShown: false,
+      }}
+      initialRouteName={ROUTES.GAME_WELCOME}>
+      <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.Game02Level08} component={Game02Level08} />
+      <Stack.Screen name={ROUTES.Game02Level09} component={Game02Level09} />
+      <Stack.Screen name={ROUTES.Game02Level10} component={Game02Level10} />
+      <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.Screen
+        name={ROUTES.Game02ProgressLevel07}
+        component={Game02ProgressLevel07}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel08}
+        component={Game02ProgressLevel08}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel09}
+        component={Game02ProgressLevel09}
+      />
+      <Stack.Screen
+        name={ROUTES.Game02ProgressLevel10}
+        component={Game02ProgressLevel10}
+      />
+    </Stack.Navigator>
+  );
+}
+export default GameNavigator;

src/navigations/ProfileNavigator.js

+import React from 'react';
+import {createStackNavigator} from '@react-navigation/stack';
+import {ROUTES} from '../constants';
+import UserProfile from '../screens/auth/ProfilePage';
+const Stack = createStackNavigator();
+
+function ProfileNavigator() {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerBackTitleVisible: false,
+        headerShown: false,
+      }}
+      initialRouteName={ROUTES.HOME}>
+      <Stack.Screen name={ROUTES.PROFILE} component={UserProfile} />
+    </Stack.Navigator>
+  );
+}
+export default ProfileNavigator;

src/screens/auth/Login.js

@@ -8,86 +8,100 @@ 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}>
-      <View style={Styles.container}>
-        <View style={Styles.wFull}>
-        <Formik
-                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>
+    <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}) => (
+                <>
+                  <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
-              colors={[COLORS.gradientForm, COLORS.bgColor]}
-              style={Styles.linearGradient}
-              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}>
-                <Text style={Styles.loginText}>Log In</Text>
-              </TouchableOpacity>
-            </LinearGradient>
-          </View>
+                  <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}}>
+                      {/******************** LOGIN BUTTON *********************/}
+                      <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)}>
-            <Text style={Styles.forgotPassText}>Forgot Password?</Text>
-          </TouchableOpacity>
-          </>
-          )}
- </Formik>
-        </View>
+                  {/***************** FORGOT PASSWORD BUTTON *****************/}
+                  <TouchableOpacity
+                    style={Styles.loginBtn}
+                    onPress={() => navigation.navigate(ROUTES.FORGOT_PASSWORD)}>
+                    <Text style={Styles.forgotPassText}>Forgot Password?</Text>
+                  </TouchableOpacity>
+                </>
+              )}
+            </Formik>
+          </View>
 
-        <View style={Styles.footer}>
-          <Text style={Styles.footerText}> Don't have an account? </Text>
-          {/******************** REGISTER BUTTON *********************/}
-          <TouchableOpacity onPress={() => navigation.navigate(ROUTES.REGISTER)}>
-            <Text style={Styles.signupBtn}>Sign Up</Text>
-          </TouchableOpacity>
+          <View style={Styles.footer}>
+            <Text style={Styles.footerText}> Don't have an account? </Text>
+            {/******************** REGISTER BUTTON *********************/}
+            <TouchableOpacity
+              onPress={() => navigation.navigate(ROUTES.REGISTER)}>
+              <Text style={Styles.signupBtn}>Sign Up</Text>
+            </TouchableOpacity>
+          </View>
         </View>
-      </View>
-    </ScrollView>
+      </ScrollView>
     </KeyboardAvoidingView>
   );
 };
@@ -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/ProfilePage.js

+import React, {useState, useEffect} from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {COLORS, IMGS, ROUTES} from '../../constants';
+import LinearGradient from 'react-native-linear-gradient';
+import {getUserDetails} from '../../services/auth/index';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const UserProfile = ({navigation}) => {
+  const [userDetails, setUserDetails] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const handleFetchDetails = async () => {
+    try {
+      setLoading(true);
+      const email = await AsyncStorage.getItem('userEmail');
+      if (!email) {
+        setError('Email not found');
+        setLoading(false);
+        return; // Early exit if email is not found in storage
+      }
+
+      const details = await getUserDetails(); // getUserDetails now internally gets the email from AsyncStorage
+      if (details && details.success) {
+        setUserDetails(details.data);
+      } else {
+        setError('Failed to fetch details');
+      }
+      setLoading(false);
+    } catch (err) {
+      setError('Failed to fetch details');
+      console.error('Error fetching user details:', err);
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    handleFetchDetails();
+  }, []);
+
+  if (loading) {
+    return (
+      <View style={styles.loaderContainer}>
+        <ActivityIndicator size={150} color={COLORS.dark_purple} />
+      </View>
+    );
+  }
+
+  return (
+    <LinearGradient
+      style={styles.container}
+      colors={[COLORS.dark_purple, COLORS.white, COLORS.pink]}>
+      <View style={styles.profileHeader}>
+        <Image source={IMGS.user_profile_image} style={styles.profileImage} />
+        <Text style={styles.name}>
+          {userDetails?.name ? userDetails?.name : 'Malsha Geethmi'}
+        </Text>
+      </View>
+
+      <View style={styles.infoContainer}>
+        <View style={styles.infoItem}>
+          <Text style={styles.infoLabel}>Email</Text>
+          <Text style={styles.infoContent}>
+            {userDetails?.email ? userDetails?.email : 'malsha@gmail.com'}
+          </Text>
+        </View>
+        <View style={styles.infoItem}>
+          <Text style={styles.infoLabel}>Age</Text>
+          <Text style={styles.infoContent}>
+            {userDetails?.age ? userDetails?.age : '24'}
+          </Text>
+        </View>
+        <View style={styles.infoItem}>
+          <Text style={styles.infoLabel}>Week</Text>
+          <Text style={styles.infoContent}>
+            {userDetails?.week ? userDetails?.week : '14'}
+          </Text>
+        </View>
+      </View>
+
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => navigation.navigate(ROUTES.FORGOT_PASSWORD)}>
+        <View style={styles.new}>
+          <Icon
+            name="key"
+            size={30}
+            color={COLORS.white}
+            style={styles.icon1}
+          />
+          <Text style={styles.buttonText}>Change Password</Text>
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.button2}>
+        <Text style={styles.buttonText2}>LOGOUT</Text>
+      </TouchableOpacity>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  loaderContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: COLORS.white,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.pastalBlue,
+    alignItems: 'center',
+    paddingTop: 50,
+  },
+  profileHeader: {
+    backgroundColor: 'white',
+    width: '90%',
+    borderRadius: 20,
+    alignItems: 'center',
+    marginBottom: 20,
+    paddingVertical: 20,
+  },
+  profileImage: {
+    width: 140,
+    height: 140,
+    borderRadius: 40,
+    marginBottom: 20,
+  },
+  name: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: COLORS.navyBlue,
+  },
+  phoneNumber: {
+    fontSize: 16,
+    color: 'gray',
+  },
+  infoContainer: {
+    width: '90%',
+    backgroundColor: 'white',
+    borderRadius: 20,
+    paddingVertical: 10,
+  },
+  infoItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+  },
+  infoLabel: {
+    fontWeight: 'bold',
+    color: 'gray',
+    fontSize: 16,
+  },
+  infoContent: {
+    color: 'black',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: COLORS.purple_new,
+    borderRadius: 20,
+    width: '90%',
+    padding: 15,
+    marginVertical: 5,
+    marginTop: 20,
+  },
+  button2: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: COLORS.red,
+    borderRadius: 20,
+    width: '90%',
+    padding: 15,
+    marginVertical: 5,
+    marginTop: 150,
+  },
+  buttonText: {
+    textAlign: 'center',
+    fontSize: 18,
+    color: COLORS.white,
+    fontWeight: 'bold',
+  },
+  buttonText2: {
+    textAlign: 'center',
+    fontSize: 20,
+    color: COLORS.white,
+    fontWeight: 'bold',
+  },
+  icon1: {
+    justifyContent: 'flex-start',
+    display: 'flex',
+  },
+  new: {
+    marginRight: 90,
+    flexDirection: 'row',
+    gap: 20,
+  },
+});
+
+export default UserProfile;