Map screen buttons relocation

Route.tsx

@@ -76,16 +76,18 @@ import UsersListScreen from 'src/screens/InAppScreens/MapScreen/UsersListScreen'
 import SuggestSeriesScreen from 'src/screens/InAppScreens/TravelsScreen/SuggestSeriesScreen';
 import MyFriendsScreen from 'src/screens/InAppScreens/ProfileScreen/MyFriendsScreen';
 import CountryViewScreen from 'src/screens/InAppScreens/MapScreen/CountryViewScreen';
+import { userApi } from '@api/user';
 
 enableScreens();
 
 const ScreenStack = createStackNavigator();
 const BottomTab = createBottomTabNavigator();
+const MapDrawer = createDrawerNavigator();
 
 SplashScreen.preventAutoHideAsync();
 
 const Route = () => {
-  const token = storage.get('token', StoreType.STRING);
+  const token = storage.get('token', StoreType.STRING) as string;
 
   const [fontsLoaded] = useFonts({
     'redhat-900': require('./assets/fonts/RedHatDisplay-Black-900.ttf'),
@@ -96,6 +98,27 @@ const Route = () => {
     'montserrat-400': require('./assets/fonts/Montserrat-Regular.ttf')
   });
   const [dbLoaded, setDbLoaded] = useState(false);
+  const uid = storage.get('uid', StoreType.STRING);
+  const hasUserInfo = storage.get('currentUserData', StoreType.STRING);
+
+  useEffect(() => {
+    const fetchAndSaveUserInfo = async () => {
+      if (uid && token) {
+        const profileData = await userApi.getProfileInfoData(token, +uid);
+        const userInfo = {
+          avatar: profileData?.data?.data?.user_data.avatar ?? '',
+          first_name: profileData?.data?.data?.user_data.first_name,
+          last_name: profileData?.data?.data?.user_data.last_name,
+          homebase_flag: profileData?.data?.data?.user_data.flag1
+        };
+        storage.set('currentUserData', JSON.stringify(userInfo));
+      }
+    };
+
+    if (!hasUserInfo) {
+      fetchAndSaveUserInfo();
+    }
+  }, [hasUserInfo]);
 
   useEffect(() => {
     const prepareApp = async () => {
@@ -142,14 +165,20 @@ const Route = () => {
   }
 
   const screenOptions = ({
-    route
+    route,
+    navigation
   }: {
     route: RouteProp<ParamListBase, string>;
     navigation: any;
   }) => ({
     headerShown: false,
     tabBarButton: (props: any) => (
-      <TabBarButton {...props} label={route.name} focused={props.accessibilityState.selected} />
+      <TabBarButton
+        {...props}
+        label={route.name}
+        focused={props?.accessibilityState?.selected || false}
+        navigation={navigation}
+      />
     ),
     tabBarStyle: {
       ...Platform.select({
@@ -172,19 +201,154 @@ const Route = () => {
     }
   };
 
-  const MapDrawer = createDrawerNavigator();
+  const BottomTabNavigator = () => (
+    <BottomTab.Navigator screenOptions={screenOptions}>
+      <BottomTab.Screen name={NAVIGATION_PAGES.IN_APP_MAP_TAB}>
+        {() => (
+          <ScreenStack.Navigator screenOptions={screenOptions}>
+            <ScreenStack.Screen name={NAVIGATION_PAGES.MAP_TAB} component={MapScreen} />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW}
+              component={ProfileScreen}
+            />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.USERS_MAP} component={UsersMapScreen} />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.REGION_PREVIEW}
+              component={RegionViewScreen}
+              options={regionViewScreenOptions}
+            />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.USERS_LIST}
+              component={UsersListScreen}
+              options={regionViewScreenOptions}
+            />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.FRIENDS_LIST}
+              component={UsersListScreen}
+              options={regionViewScreenOptions}
+            />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.COUNTRY_PREVIEW}
+              component={CountryViewScreen}
+              options={regionViewScreenOptions}
+            />
 
-  function MapDrawerNavigator() {
-    return (
-      <MapDrawer.Navigator drawerContent={(props) => <MenuDrawer {...props} />}>
-        <MapDrawer.Screen
-          options={{ headerShown: false }}
-          name="MapDrawerScreen"
-          component={MapScreen}
-        />
-      </MapDrawer.Navigator>
-    );
-  }
+            <ScreenStack.Screen name={NAVIGATION_PAGES.PROFILE_TAB} component={ProfileScreen} />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.EDIT_PERSONAL_INFO}
+              component={EditPersonalInfo}
+            />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.SETTINGS} component={Settings} />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.MY_FRIENDS}
+              component={MyFriendsScreen}
+              options={regionViewScreenOptions}
+            />
+          </ScreenStack.Navigator>
+        )}
+      </BottomTab.Screen>
+      <BottomTab.Screen name={NAVIGATION_PAGES.IN_APP_TRAVELS_TAB}>
+        {() => (
+          <ScreenStack.Navigator screenOptions={screenOptions}>
+            <ScreenStack.Screen name={NAVIGATION_PAGES.TRAVELS_TAB} component={TravelsScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.SERIES} component={SeriesScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.SERIES_ITEM} component={SeriesItemScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.EARTH} component={EarthScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.PHOTOS} component={PhotosScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.MORE_PHOTOS} component={MorePhotosScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.ADD_PHOTO} component={AddPhotoScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.TRIPS} component={TripsScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.ADD_TRIP} component={AddNewTripScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.ADD_REGIONS} component={AddRegionsScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.COUNTRIES} component={CountriesScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.REGIONS} component={RegionsScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.DARE} component={DareScreen} />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.REGION_PREVIEW}
+              component={RegionViewScreen}
+              options={regionViewScreenOptions}
+            />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.USERS_LIST}
+              component={UsersListScreen}
+              options={regionViewScreenOptions}
+            />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW}
+              component={ProfileScreen}
+            />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.USERS_MAP} component={UsersMapScreen} />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.SUGGEST_SERIES}
+              component={SuggestSeriesScreen}
+            />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.FRIENDS_LIST}
+              component={UsersListScreen}
+              options={regionViewScreenOptions}
+            />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.COUNTRY_PREVIEW}
+              component={CountryViewScreen}
+              options={regionViewScreenOptions}
+            />
+          </ScreenStack.Navigator>
+        )}
+      </BottomTab.Screen>
+      <BottomTab.Screen name={NAVIGATION_PAGES.IN_APP_TRAVELLERS_TAB}>
+        {() => (
+          <ScreenStack.Navigator screenOptions={screenOptions}>
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.TRAVELLERS_TAB}
+              component={TravellersScreen}
+            />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.MASTER_RANKING}
+              component={MasterRankingScreen}
+            />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.LPI_RANKING} component={LPIRanking} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.IN_MEMORIAM} component={InMemoriamScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.IN_HISTORY} component={InHistoryScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.UN_MASTERS} component={UNMastersScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.STATISTICS} component={StatisticsScreen} />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW}
+              component={ProfileScreen}
+            />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.STATISTICS_LIST_DATA}
+              component={StatisticsListScreen}
+            />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.TRIUMPHS} component={TriumphsScreen} />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.SERIES_RANKING}
+              component={SeriesRankingScreen}
+            />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.SERIES_RANKING_LIST}
+              component={SeriesRankingListScreen}
+            />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.USERS_MAP} component={UsersMapScreen} />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.FRIENDS_LIST}
+              component={UsersListScreen}
+              options={regionViewScreenOptions}
+            />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.MY_FRIENDS}
+              component={MyFriendsScreen}
+              options={regionViewScreenOptions}
+            />
+          </ScreenStack.Navigator>
+        )}
+      </BottomTab.Screen>
+      <BottomTab.Screen name={NAVIGATION_PAGES.MENU_DRAWER}>
+        {() => {
+          return null;
+        }}
+      </BottomTab.Screen>
+    </BottomTab.Navigator>
+  );
 
   return (
     <ScreenStack.Navigator
@@ -215,213 +379,13 @@ const Route = () => {
       <ScreenStack.Screen name={NAVIGATION_PAGES.EARTH_INFO} component={EarthInfoScreen} />
       <ScreenStack.Screen name={NAVIGATION_PAGES.IN_APP}>
         {() => (
-          <BottomTab.Navigator screenOptions={screenOptions}>
-            <BottomTab.Screen name={NAVIGATION_PAGES.IN_APP_MAP_TAB}>
-              {() => (
-                <ScreenStack.Navigator screenOptions={screenOptions}>
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.MAP_TAB}
-                    component={MapDrawerNavigator}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW}
-                    component={ProfileScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.USERS_MAP}
-                    component={UsersMapScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.REGION_PREVIEW}
-                    component={RegionViewScreen}
-                    options={regionViewScreenOptions}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.USERS_LIST}
-                    component={UsersListScreen}
-                    options={regionViewScreenOptions}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.FRIENDS_LIST}
-                    component={UsersListScreen}
-                    options={regionViewScreenOptions}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.COUNTRY_PREVIEW}
-                    component={CountryViewScreen}
-                    options={regionViewScreenOptions}
-                  />
-                </ScreenStack.Navigator>
-              )}
-            </BottomTab.Screen>
-            <BottomTab.Screen name={NAVIGATION_PAGES.IN_APP_TRAVELS_TAB}>
-              {() => (
-                <ScreenStack.Navigator screenOptions={screenOptions}>
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.TRAVELS_TAB}
-                    component={TravelsScreen}
-                  />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.SERIES} component={SeriesScreen} />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.SERIES_ITEM}
-                    component={SeriesItemScreen}
-                  />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.EARTH} component={EarthScreen} />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.PHOTOS} component={PhotosScreen} />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.MORE_PHOTOS}
-                    component={MorePhotosScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.ADD_PHOTO}
-                    component={AddPhotoScreen}
-                  />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.TRIPS} component={TripsScreen} />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.ADD_TRIP}
-                    component={AddNewTripScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.ADD_REGIONS}
-                    component={AddRegionsScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.COUNTRIES}
-                    component={CountriesScreen}
-                  />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.REGIONS} component={RegionsScreen} />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.DARE} component={DareScreen} />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.REGION_PREVIEW}
-                    component={RegionViewScreen}
-                    options={regionViewScreenOptions}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.USERS_LIST}
-                    component={UsersListScreen}
-                    options={regionViewScreenOptions}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW}
-                    component={ProfileScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.USERS_MAP}
-                    component={UsersMapScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.SUGGEST_SERIES}
-                    component={SuggestSeriesScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.FRIENDS_LIST}
-                    component={UsersListScreen}
-                    options={regionViewScreenOptions}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.COUNTRY_PREVIEW}
-                    component={CountryViewScreen}
-                    options={regionViewScreenOptions}
-                  />
-                </ScreenStack.Navigator>
-              )}
-            </BottomTab.Screen>
-            <BottomTab.Screen name={NAVIGATION_PAGES.IN_APP_TRAVELLERS_TAB}>
-              {() => (
-                <ScreenStack.Navigator screenOptions={screenOptions}>
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.TRAVELLERS_TAB}
-                    component={TravellersScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.MASTER_RANKING}
-                    component={MasterRankingScreen}
-                  />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.LPI_RANKING} component={LPIRanking} />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.IN_MEMORIAM}
-                    component={InMemoriamScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.IN_HISTORY}
-                    component={InHistoryScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.UN_MASTERS}
-                    component={UNMastersScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.STATISTICS}
-                    component={StatisticsScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW}
-                    component={ProfileScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.STATISTICS_LIST_DATA}
-                    component={StatisticsListScreen}
-                  />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.TRIUMPHS} component={TriumphsScreen} />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.SERIES_RANKING}
-                    component={SeriesRankingScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.SERIES_RANKING_LIST}
-                    component={SeriesRankingListScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.USERS_MAP}
-                    component={UsersMapScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.FRIENDS_LIST}
-                    component={UsersListScreen}
-                    options={regionViewScreenOptions}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.MY_FRIENDS}
-                    component={MyFriendsScreen}
-                    options={regionViewScreenOptions}
-                  />
-                </ScreenStack.Navigator>
-              )}
-            </BottomTab.Screen>
-            <BottomTab.Screen name={NAVIGATION_PAGES.IN_APP_PROFILE}>
-              {() => (
-                <ScreenStack.Navigator screenOptions={screenOptions}>
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.PROFILE_TAB}
-                    component={ProfileScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.EDIT_PERSONAL_INFO}
-                    component={EditPersonalInfo}
-                  />
-                  <ScreenStack.Screen name={NAVIGATION_PAGES.SETTINGS} component={Settings} />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.FRIENDS_LIST}
-                    component={UsersListScreen}
-                    options={regionViewScreenOptions}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW}
-                    component={ProfileScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.USERS_MAP}
-                    component={UsersMapScreen}
-                  />
-                  <ScreenStack.Screen
-                    name={NAVIGATION_PAGES.MY_FRIENDS}
-                    component={MyFriendsScreen}
-                    options={regionViewScreenOptions}
-                  />
-                </ScreenStack.Navigator>
-              )}
-            </BottomTab.Screen>
-          </BottomTab.Navigator>
+          <MapDrawer.Navigator drawerContent={(props) => <MenuDrawer {...props} />}>
+            <MapDrawer.Screen
+              name="DrawerApp"
+              component={BottomTabNavigator}
+              options={{ headerShown: false }}
+            />
+          </MapDrawer.Navigator>
         )}
       </ScreenStack.Screen>
     </ScreenStack.Navigator>

assets/icons/menu.svg

@@ -1,3 +1,3 @@
 <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.00005 0.800049C1.33731 0.800049 0.800049 1.33731 0.800049 2.00005C0.800049 2.66279 1.33731 3.20005 2.00005 3.20005H18C18.6628 3.20005 19.2001 2.66279 19.2001 2.00005C19.2001 1.33731 18.6628 0.800049 18 0.800049H2.00005ZM0.800049 8.00005C0.800049 7.33731 1.33731 6.80005 2.00005 6.80005H18C18.6628 6.80005 19.2001 7.33731 19.2001 8.00005C19.2001 8.66279 18.6628 9.20005 18 9.20005H2.00005C1.33731 9.20005 0.800049 8.66279 0.800049 8.00005ZM0.800049 14C0.800049 13.3373 1.33731 12.8 2.00005 12.8H18C18.6628 12.8 19.2001 13.3373 19.2001 14C19.2001 14.6628 18.6628 15.2 18 15.2H2.00005C1.33731 15.2 0.800049 14.6628 0.800049 14Z" fill="#0F3F4F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.00005 0.800049C1.33731 0.800049 0.800049 1.33731 0.800049 2.00005C0.800049 2.66279 1.33731 3.20005 2.00005 3.20005H18C18.6628 3.20005 19.2001 2.66279 19.2001 2.00005C19.2001 1.33731 18.6628 0.800049 18 0.800049H2.00005ZM0.800049 8.00005C0.800049 7.33731 1.33731 6.80005 2.00005 6.80005H18C18.6628 6.80005 19.2001 7.33731 19.2001 8.00005C19.2001 8.66279 18.6628 9.20005 18 9.20005H2.00005C1.33731 9.20005 0.800049 8.66279 0.800049 8.00005ZM0.800049 14C0.800049 13.3373 1.33731 12.8 2.00005 12.8H18C18.6628 12.8 19.2001 13.3373 19.2001 14C19.2001 14.6628 18.6628 15.2 18 15.2H2.00005C1.33731 15.2 0.800049 14.6628 0.800049 14Z"/>
 </svg>

src/components/MenuDrawer/index.tsx

@@ -14,6 +14,8 @@ import MailIcon from '../../../assets/icons/mail.svg';
 import DocumentIcon from '../../../assets/icons/document.svg';
 import ExitIcon from '../../../assets/icons/exit.svg';
 import UserXMark from '../../../assets/icons/user-xmark.svg';
+import InfoIcon from 'assets/icons/info-solid.svg';
+
 import { APP_VERSION, FASTEST_MAP_HOST } from 'src/constants';
 import { useNotification } from 'src/contexts/NotificationContext';
 
@@ -45,6 +47,7 @@ export const MenuDrawer = (props: any) => {
   const handleLogout = () => {
     storage.remove('token');
     storage.remove('uid');
+    storage.remove('currentUserData');
     updateNotificationStatus();
     navigation.dispatch(
       CommonActions.reset({
@@ -65,6 +68,12 @@ export const MenuDrawer = (props: any) => {
           <View style={styles.logoContainer}>
             <Image source={require('../../../assets/logo-ua.png')} style={styles.logo} />
           </View>
+          <MenuButton
+            label="Info"
+            icon={<InfoIcon fill={Colors.DARK_BLUE} width={20} height={20} />}
+            red={false}
+            buttonFn={() => navigation.navigate(NAVIGATION_PAGES.INFO as never)}
+          />
           <MenuButton
             label="Contact Us"
             icon={<MailIcon fill={Colors.DARK_BLUE} width={20} height={20} />}

src/components/TabBarButton/index.tsx

@@ -6,7 +6,7 @@ import { NAVIGATION_PAGES } from '../../types';
 import MapIcon from '../../../assets/icons/bottom-navigation/map.svg';
 import TravellersIcon from '../../../assets/icons/bottom-navigation/travellers.svg';
 import GlobeIcon from '../../../assets/icons/bottom-navigation/globe-solid.svg';
-import ProfileIcon from '../../../assets/icons/bottom-navigation/profile.svg';
+import MenuIcon from '../../../assets/icons/menu.svg';
 
 import { Colors } from '../../theme';
 import { styles } from './style';
@@ -21,8 +21,8 @@ const getTabIcon = (routeName: string) => {
       return TravellersIcon;
     case NAVIGATION_PAGES.IN_APP_TRAVELS_TAB:
       return GlobeIcon;
-    case NAVIGATION_PAGES.IN_APP_PROFILE:
-      return ProfileIcon;
+    case NAVIGATION_PAGES.MENU_DRAWER:
+      return MenuIcon;
     default:
       return null;
   }
@@ -31,11 +31,13 @@ const getTabIcon = (routeName: string) => {
 const TabBarButton = ({
   label,
   onPress,
-  focused
+  focused,
+  navigation
 }: {
   label: string;
   onPress: () => void;
   focused: boolean;
+  navigation: any;
 }) => {
   const IconComponent: React.FC<SvgProps> | null = getTabIcon(label);
   const { isNotificationActive } = useNotification();
@@ -43,7 +45,11 @@ const TabBarButton = ({
   let currentColor = focused ? Colors.DARK_BLUE : Colors.LIGHT_GRAY;
 
   return (
-    <TouchableWithoutFeedback onPress={onPress}>
+    <TouchableWithoutFeedback
+      onPress={() =>
+        label === NAVIGATION_PAGES.MENU_DRAWER ? (navigation as any)?.openDrawer() : onPress()
+      }
+    >
       <View style={styles.buttonStyle}>
         <View style={{ alignItems: 'center' }}>
           {IconComponent && <IconComponent width={24} height={24} fill={currentColor} />}

src/screens/InAppScreens/MapScreen/UniversalSearch/index.tsx

@@ -53,7 +53,7 @@ const SearchModal = ({
             navigation.navigate(
               ...([
                 NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW,
-                { userId: item.id, hideTabBar: true }
+                { userId: item.id }
               ] as never)
             );
           }

src/screens/InAppScreens/MapScreen/index.tsx

@@ -6,7 +6,8 @@ import {
   Text,
   TextInput,
   TouchableOpacity,
-  View
+  View,
+  Image
 } from 'react-native';
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import MapView, { Geojson, Marker, UrlTile } from 'react-native-maps';
@@ -15,11 +16,11 @@ import * as FileSystem from 'expo-file-system';
 import * as Location from 'expo-location';
 import { storage, StoreType } from '../../../storage';
 
-import MenuIcon from '../../../../assets/icons/menu.svg';
 import SearchIcon from '../../../../assets/icons/search.svg';
 import LocationIcon from '../../../../assets/icons/location.svg';
 import CloseSvg from '../../../../assets/icons/close.svg';
 import FilterIcon from 'assets/icons/filter.svg';
+import ProfileIcon from 'assets/icons/bottom-navigation/profile.svg';
 
 import regions from '../../../../assets/geojson/nm2022.json';
 import jsonData, { fetchJsonData } from '../../../database/geojsonService';
@@ -30,7 +31,7 @@ import {
   getSecondDatabase,
   refreshDatabases
 } from '../../../db';
-import { LocationPopup, WarningModal, EditNmModal } from '../../../components';
+import { LocationPopup, WarningModal, EditNmModal, AvatarWithInitials } from '../../../components';
 
 import { styles } from './style';
 import {
@@ -129,6 +130,8 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
   const [type, setType] = useState(0);
 
   const { handleUpdateNM, handleUpdateDare, handleUpdateSlow, userData, setUserData } = useRegion();
+  const userInfo = storage.get('currentUserData', StoreType.STRING) as string;
+  const [userInfoData, setUserInfoData] = useState<any>(null);
 
   useFocusEffect(
     useCallback(() => {
@@ -153,6 +156,12 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
     }, [userData])
   );
 
+  useEffect(() => {
+    if (userInfo) {
+      setUserInfoData(JSON.parse(userInfo));
+    }
+  }, [userInfo]);
+
   useEffect(() => {
     if (!dareData) {
       const fetchData = async () => {
@@ -225,31 +234,9 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
     ).start();
   }, [strokeWidthAnim]);
 
-  useEffect(() => {
-    navigation.addListener('state', (state) => {
-      navigation
-        .getParent()
-        ?.getParent()
-        ?.setOptions({
-          tabBarStyle: {
-            display:
-              (state.data.state.history[1] as { status?: string })?.status === 'open' ||
-              regionPopupVisible
-                ? 'none'
-                : 'flex',
-            position: 'absolute',
-            ...Platform.select({
-              android: {
-                height: 58
-              }
-            })
-          }
-        });
-    });
-    navigation
-      .getParent()
-      ?.getParent()
-      ?.setOptions({
+  useFocusEffect(
+    useCallback(() => {
+      navigation.getParent()?.setOptions({
         tabBarStyle: {
           display: regionPopupVisible ? 'none' : 'flex',
           position: 'absolute',
@@ -260,7 +247,8 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
           })
         }
       });
-  }, [regionPopupVisible, navigation]);
+    }, [regionPopupVisible, navigation])
+  );
 
   useEffect(() => {
     (async () => {
@@ -824,19 +812,28 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
           {!isExpanded ? (
             <TouchableOpacity
               style={[styles.cornerButton, styles.topRightButton]}
-              onPress={() => (navigation as any)?.openDrawer()}
+              onPress={() => navigation.navigate(NAVIGATION_PAGES.PROFILE_TAB)}
             >
-              <MenuIcon />
+              {token ? (
+                userInfoData?.avatar ? (
+                  <Image
+                    style={styles.avatar}
+                    source={{ uri: API_HOST + '/img/avatars/' + userInfoData?.avatar }}
+                  />
+                ) : (
+                  <AvatarWithInitials
+                    text={`${userInfoData?.first_name[0] ?? ''}${userInfoData?.last_name[0] ?? ''}`}
+                    flag={API_HOST + '/img/flags_new/' + userInfoData?.homebase_flag}
+                    size={48}
+                    borderColor={Colors.WHITE}
+                  />
+                )
+              ) : (
+                <ProfileIcon fill={Colors.DARK_BLUE} />
+              )}
             </TouchableOpacity>
           ) : null}
 
-          <TouchableOpacity
-            style={[styles.cornerButton, { top: 115, right: 16 }]}
-            onPress={() => navigation.navigate(NAVIGATION_PAGES.INFO)}
-          >
-            <InfoIcon />
-          </TouchableOpacity>
-
           <Animated.View
             style={[
               styles.searchContainer,

src/screens/InAppScreens/MapScreen/style.tsx

@@ -93,4 +93,11 @@ export const styles = StyleSheet.create({
     color: Colors.DARK_BLUE,
     fontWeight: '600'
   },
+  avatar: {
+    borderRadius: 48 / 2,
+    width: 48,
+    height: 48,
+    borderWidth: 2,
+    borderColor: Colors.WHITE
+  },
 });

src/screens/InAppScreens/ProfileScreen/Profile/edit-personal-info.tsx

@@ -104,6 +104,7 @@ export const EditPersonalInfo = () => {
   const handleLogout = () => {
     storage.remove('token');
     storage.remove('uid');
+    storage.remove('currentUserData');
     updateNotificationStatus();
     navigation.dispatch(
       CommonActions.reset({

src/screens/InAppScreens/ProfileScreen/index.tsx

@@ -88,6 +88,16 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
 
   useEffect(() => {
     setIsFriend(userData?.data?.is_friend ?? 0);
+
+    if (!isPublicView) {
+      const userInfo = {
+        avatar: userData?.data?.user_data.avatar ?? '',
+        first_name: userData?.data?.user_data.first_name,
+        last_name: userData?.data?.user_data.last_name,
+        homebase_flag: userData?.data?.user_data.flag1
+      };
+      storage.set('currentUserData', JSON.stringify(userInfo));
+    }
   }, [userData]);
 
   if (!userData?.data || !lastUpdates?.data || isFetching) return <Loading />;

src/screens/LoginScreen/index.tsx

@@ -14,6 +14,7 @@ import { useLoginMutation } from '@api/auth';
 import { fetchAndSaveStatistics } from 'src/database/statisticsService';
 import { useNetInfo } from '@react-native-community/netinfo';
 import { useNotification } from 'src/contexts/NotificationContext';
+import { usePostGetProfileInfoDataQuery } from '@api/user';
 
 type Props = {
   navigation: NavigationProp<any>;
@@ -30,6 +31,11 @@ const LoginScreen: FC<Props> = ({ navigation }) => {
 
   const { data, mutate: userLogin } = useLoginMutation();
   const { updateNotificationStatus } = useNotification();
+  const { data: profileData } = usePostGetProfileInfoDataQuery(
+    data?.token || '',
+    data?.uid ? +data.uid : 0,
+    data?.token ? true : false
+  );
 
   const updateLocalData = async (token: string) => {
     await fetchAndSaveStatistics(token);
@@ -45,6 +51,18 @@ const LoginScreen: FC<Props> = ({ navigation }) => {
       storage.set('isFirstLaunch', false);
       updateNotificationStatus();
       updateLocalData(data.token);
+    }
+  }, [data]);
+
+  useEffect(() => {
+    if (profileData) {
+      const userInfo = {
+        avatar: profileData?.data?.user_data.avatar ?? '',
+        first_name: profileData?.data?.user_data.first_name,
+        last_name: profileData?.data?.user_data.last_name,
+        homebase_flag: profileData?.data?.user_data.flag1
+      };
+      storage.set('currentUserData', JSON.stringify(userInfo));
 
       isFirstLaunch
         ? dispatch(
@@ -60,7 +78,7 @@ const LoginScreen: FC<Props> = ({ navigation }) => {
             })
           );
     }
-  }, [data]);
+  }, [profileData]);
 
   return (
     <PageWrapper>

src/screens/RegisterScreen/EditAccount/index.tsx

@@ -14,6 +14,7 @@ import { storage } from '../../../storage';
 import store from '../../../storage/zustand';
 import { NAVIGATION_PAGES } from '../../../types';
 import { fetchAndSaveStatistics } from 'src/database/statisticsService';
+import { usePostGetProfileInfoDataQuery } from '@api/user';
 
 const SignUpSchema = yup.object({
   first_name: yup.string().required(),
@@ -31,6 +32,11 @@ const EditAccount = () => {
   const [user] = store((state) => [state.registration.user]);
 
   const { data, error, mutate: userRegister } = useRegisterMutation();
+  const { data: profileData } = usePostGetProfileInfoDataQuery(
+    data?.token || '',
+    data?.uid ? +data.uid : 0,
+    data?.token ? true : false
+  );
   const [isLoading, setIsLoading] = useState(true);
 
   useFocusEffect(
@@ -43,6 +49,25 @@ const EditAccount = () => {
     }, [])
   );
 
+  useEffect(() => {
+    if (profileData) {
+      const userInfo = {
+        avatar: profileData?.data?.user_data.avatar ?? '',
+        first_name: profileData?.data?.user_data.first_name,
+        last_name: profileData?.data?.user_data.last_name,
+        homebase_flag: profileData?.data?.user_data.flag1
+      };
+      storage.set('currentUserData', JSON.stringify(userInfo));
+
+      dispatch(
+        CommonActions.reset({
+          index: 1,
+          routes: [{ name: NAVIGATION_PAGES.INFO }]
+        })
+      );
+    }
+  }, [profileData]);
+
   const updateLocalData = async (token: string) => {
     await fetchAndSaveStatistics(token);
   };
@@ -82,15 +107,17 @@ const EditAccount = () => {
                     homebase: values.homebase,
                     homebase2: values.homebase2
                   },
-                  photo: values.photo.uri ? {
-                    type: values.photo.type,
-                    uri: values.photo.uri,
-                    name: values.photo.uri.split('/').pop()!
-                  } : {
-                    type: undefined,
-                    uri: undefined,
-                    name: undefined
-                  }
+                  photo: values.photo.uri
+                    ? {
+                        type: values.photo.type,
+                        uri: values.photo.uri,
+                        name: values.photo.uri.split('/').pop()!
+                      }
+                    : {
+                        type: undefined,
+                        uri: undefined,
+                        name: undefined
+                      }
                 };
 
                 userRegister(data, {
@@ -99,13 +126,6 @@ const EditAccount = () => {
                       storage.set('token', data.token);
                       storage.set('uid', data.uid.toString());
                       updateLocalData(data.token);
-                
-                      dispatch(
-                        CommonActions.reset({
-                          index: 1,
-                          routes: [{ name: NAVIGATION_PAGES.INFO }]
-                        })
-                      );
                     }
                   }
                 });

src/types/navigation.ts

@@ -56,4 +56,5 @@ export enum NAVIGATION_PAGES {
   FRIENDS_LIST = 'inAppFriendsList',
   MY_FRIENDS = 'inAppMyFriends',
   COUNTRY_PREVIEW = 'inAppCountryPreview',
+  MENU_DRAWER = 'Menu',
 }