events tab button

Route.tsx

@@ -337,24 +337,10 @@ const Route = () => {
             <ScreenStack.Screen name={NAVIGATION_PAGES.DARE} component={DareScreen} />
             <ScreenStack.Screen name={NAVIGATION_PAGES.FIXERS} component={FixersScreen} />
             <ScreenStack.Screen name={NAVIGATION_PAGES.ADD_FIXER} component={AddNewFixerScreen} />
-            <ScreenStack.Screen name={NAVIGATION_PAGES.EVENTS} component={EventsScreen} />
-            <ScreenStack.Screen name={NAVIGATION_PAGES.EVENT} component={EventScreen} />
             <ScreenStack.Screen
               name={NAVIGATION_PAGES.EDIT_COUNTRY_DATA}
               component={EditCountryDataScreen}
             />
-            <ScreenStack.Screen
-              name={NAVIGATION_PAGES.PARTICIPANTS_LIST}
-              component={ParticipantsListScreen}
-            />
-            <ScreenStack.Screen
-              name={NAVIGATION_PAGES.CREATE_EVENT}
-              component={CreateEventScreen}
-            />
-            <ScreenStack.Screen
-              name={NAVIGATION_PAGES.ALL_EVENT_PHOTOS}
-              component={AllEventPhotosScreen}
-            />
             <ScreenStack.Screen
               name={NAVIGATION_PAGES.FIXERS_COMMENTS}
               component={FixersCommentsScreen}
@@ -458,6 +444,40 @@ const Route = () => {
           </ScreenStack.Navigator>
         )}
       </BottomTab.Screen>
+      <BottomTab.Screen name={NAVIGATION_PAGES.IN_APP_EVENTS_TAB}>
+        {() => (
+          <ScreenStack.Navigator screenOptions={screenOptions}>
+            <ScreenStack.Screen name={NAVIGATION_PAGES.EVENTS} component={EventsScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.EVENT} component={EventScreen} />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.PARTICIPANTS_LIST}
+              component={ParticipantsListScreen}
+            />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.CREATE_EVENT}
+              component={CreateEventScreen}
+            />
+            <ScreenStack.Screen
+              name={NAVIGATION_PAGES.ALL_EVENT_PHOTOS}
+              component={AllEventPhotosScreen}
+            />
+            <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.EDIT_PERSONAL_INFO}
+              component={EditPersonalInfo}
+            />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.USERS_MAP} component={UsersMapScreen} />
+          </ScreenStack.Navigator>
+        )}
+      </BottomTab.Screen>
       <BottomTab.Screen name={NAVIGATION_PAGES.IN_APP_MESSAGES_TAB}>
         {() => (
           <ScreenStack.Navigator screenOptions={screenOptions}>

src/components/TabBarButton/index.tsx

@@ -8,6 +8,7 @@ import TravellersIcon from '../../../assets/icons/bottom-navigation/travellers.s
 import GlobeIcon from '../../../assets/icons/bottom-navigation/globe-solid.svg';
 import MenuIcon from '../../../assets/icons/menu.svg';
 import MessagesIcon from '../../../assets/icons/bottom-navigation/messages.svg';
+import CalendarIcon from 'assets/icons/events/calendar-solid.svg';
 
 import { Colors } from '../../theme';
 import { styles } from './style';
@@ -26,6 +27,8 @@ const getTabIcon = (routeName: string) => {
       return TravellersIcon;
     case NAVIGATION_PAGES.IN_APP_TRAVELS_TAB:
       return GlobeIcon;
+    case NAVIGATION_PAGES.IN_APP_EVENTS_TAB:
+      return CalendarIcon;
     case NAVIGATION_PAGES.IN_APP_MESSAGES_TAB:
       return MessagesIcon;
     case NAVIGATION_PAGES.MENU_DRAWER:

src/contexts/NavigationContext.tsx

@@ -46,7 +46,7 @@ export const NavigationProvider = ({ children }: { children: React.ReactNode })
                 state: {
                   routes: [
                     {
-                      name: NAVIGATION_PAGES.IN_APP_TRAVELS_TAB,
+                      name: NAVIGATION_PAGES.IN_APP_EVENTS_TAB,
                       state: {
                         routes: [
                           { name: NAVIGATION_PAGES.EVENTS },

src/modules/api/myRegions/regions-api.tsx

@@ -36,6 +36,12 @@ export interface PostGetRegionsQeReturn extends ResponseType {
       name: string;
       visited: number;
     }[];
+    out_dare: {
+      id: number;
+      name: string;
+      flag1: string;
+      flag2: string | null;
+    }[];
   };
 }
 

src/screens/InAppScreens/MapScreen/RegionViewScreen/styles.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
 import { Colors } from '../../../../theme';
 import { getFontSize } from 'src/utils';
 
@@ -212,4 +212,42 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     zIndex: 2
   },
+  tabBar: {
+    backgroundColor: 'transparent',
+    elevation: 0,
+    shadowOpacity: 0,
+    marginTop: 0,
+    height: 42
+  },
+  tabLabel: {
+    color: 'grey',
+    fontSize: getFontSize(14),
+    fontWeight: '700',
+    padding: 8,
+    width: Dimensions.get('window').width / 3,
+    textAlign: 'center'
+  },
+  tabStyle: {
+    padding: 0,
+    marginHorizontal: 2
+  },
+  img: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: Colors.FILL_LIGHT
+  },
+  regionContainer: { flexDirection: 'row', gap: 8, alignItems: 'center' },
+  textContainer: { gap: 2, justifyContent: 'center', flex: 1 },
+  regionTitle: {
+    color: Colors.DARK_BLUE,
+    fontFamily: 'montserrat-700',
+    fontSize: 14
+  },
+  subTitle: {
+    color: Colors.DARK_BLUE,
+    fontWeight: '600',
+    fontSize: 11
+  }
 });

src/screens/InAppScreens/MessagesScreen/GroupSettingsScreen/index.tsx

@@ -491,7 +491,7 @@ const WebDisplay = React.memo(function WebDisplay({ html }: { html: string }) {
                       state: {
                         routes: [
                           {
-                            name: NAVIGATION_PAGES.IN_APP_TRAVELS_TAB,
+                            name: NAVIGATION_PAGES.IN_APP_EVENTS_TAB,
                             state: {
                               routes: [
                                 { name: NAVIGATION_PAGES.EVENTS },

src/screens/InAppScreens/TravelsScreen/EventsScreen/styles.tsx

@@ -58,7 +58,6 @@ export const styles = StyleSheet.create({
   title: {
     fontSize: getFontSize(16),
     fontFamily: 'montserrat-700',
-    lineHeight: 16,
     color: Colors.DARK_BLUE
   },
   dateAndLocation: {

src/screens/InAppScreens/TravelsScreen/index.tsx

@@ -15,7 +15,6 @@ import EarthIcon from '../../../../assets/icons/travels-section/earth.svg';
 import TripIcon from '../../../../assets/icons/travels-section/trip.svg';
 import ImagesIcon from '../../../../assets/icons/travels-section/images.svg';
 import FixersIcon from '../../../../assets/icons/travels-section/fixers.svg';
-import CalendarIcon from 'assets/icons/events/calendar-solid.svg';
 import InfoIcon from 'assets/icons/info-solid.svg';
 import { getFontSize } from 'src/utils';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -34,8 +33,7 @@ const TravelsScreen = () => {
     { label: 'Earth', icon: EarthIcon, page: NAVIGATION_PAGES.EARTH },
     { label: 'Trips', icon: TripIcon, page: NAVIGATION_PAGES.TRIPS },
     { label: 'Photos', icon: ImagesIcon, page: NAVIGATION_PAGES.PHOTOS },
-    { label: 'Fixers', icon: FixersIcon, page: NAVIGATION_PAGES.FIXERS },
-    { label: 'Events', icon: CalendarIcon, page: NAVIGATION_PAGES.EVENTS }
+    { label: 'Fixers', icon: FixersIcon, page: NAVIGATION_PAGES.FIXERS }
   ];
 
   const handlePress = (page: string) => {

src/types/navigation.ts

@@ -86,4 +86,5 @@ export enum NAVIGATION_PAGES {
   OFFLINE_SELECT_REGIONS = 'inAppOfflineSelectRegions',
   OFFLINE_DOWNLOAD_PROGRESS = 'inAppOfflineDownloadProgress',
   EDIT_COUNTRY_DATA = 'inAppEditCountryData',
+  IN_APP_EVENTS_TAB = 'Events'
 }