android tabbar fix

Route.tsx

@@ -254,7 +254,7 @@ const Route = () => {
     tabBarStyle: {
       ...Platform.select({
         android: {
-          height: 58
+          // height: 58
         }
       })
     },

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

@@ -1,11 +1,12 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
-import { View, Text, Image, TouchableOpacity, Platform } from 'react-native';
+import { View, Text, Image, TouchableOpacity, Platform, FlatList } from 'react-native';
 import ImageView from 'better-react-native-image-viewing';
 import { styles } from '../RegionViewScreen/styles';
 import { Button, HorizontalTabView, Loading, Modal as ReactModal } from 'src/components';
 import { CommonActions, useFocusEffect } from '@react-navigation/native';
 import { Colors } from 'src/theme';
 import { ScrollView } from 'react-native-gesture-handler';
+import { TabView, TabBar } from 'react-native-tab-view';
 
 import { styles as ButtonStyles } from 'src/components/RegionPopup/style';
 import { usePostSetToggleItem } from '@api/series';
@@ -18,7 +19,7 @@ import formatNumber from '../../TravelsScreen/utils/formatNumber';
 import { PhotosData, Props, SeriesData, SeriesGroup, SeriesItem } from '../RegionViewScreen/types';
 import ImageCarousel from '../RegionViewScreen/ImageCarousel';
 import TravelSeriesList from '../RegionViewScreen/TravelSeriesList';
-import { useGetCountryDataQuery } from '@api/countries';
+import { fetchCountryUserData, useGetCountryDataQuery } from '@api/countries';
 import EditModal from '../../TravelsScreen/Components/EditSlowModal';
 
 import MarkIcon from 'assets/icons/mark.svg';
@@ -29,6 +30,7 @@ import EditSvg from 'assets/icons/travels-screens/pen-to-square.svg';
 import CheckSvg from 'assets/icons/travels-screens/circle-check.svg';
 import CheckRegularSvg from 'assets/icons/travels-screens/circle-check-regular.svg';
 import MapSvg from 'assets/icons/travels-screens/map-location.svg';
+import { useGetRegionQeQuery } from '@api/myRegions';
 
 const CountryViewScreen: FC<Props> = ({ navigation, route }) => {
   const countryId = route.params?.regionId;
@@ -44,10 +46,21 @@ const CountryViewScreen: FC<Props> = ({ navigation, route }) => {
   const [photos, setPhotos] = useState<PhotosData[]>([]);
   const [name, setName] = useState('');
   const { data } = useGetCountryDataQuery(countryId, true, token && token);
+  const { mutateAsync: mutateCountriesData } = fetchCountryUserData();
+  const { data: regionsQe } = useGetRegionQeQuery(undefined, countryId, String(token), true);
   const { mutate: updateSeriesItem } = usePostSetToggleItem();
   const [isInfoModalVisible, setIsInfoModalVisible] = useState<boolean>(false);
   const [infoItem, setInfoItem] = useState<SeriesItem | null>(null);
   const [isEditSlowModalVisible, setIsEditSlowModalVisible] = useState<boolean>(false);
+  const [regionsData, setRegionsData] = useState<any>(null);
+  const [daresData, setDaresData] = useState<any>(null);
+
+  const [index, setIndex] = useState<number>(0);
+  const [countryRoutes] = useState([
+    { key: 'regions', title: 'NM regions' },
+    { key: 'dare', title: 'DARE places' },
+    { key: 'series', title: 'Series' }
+  ]);
 
   const {
     handleUpdateSlow: updateSlow,
@@ -62,7 +75,7 @@ const CountryViewScreen: FC<Props> = ({ navigation, route }) => {
         display: 'flex',
         ...Platform.select({
           android: {
-            height: 58
+            // height: 58
           }
         })
       }
@@ -101,12 +114,31 @@ const CountryViewScreen: FC<Props> = ({ navigation, route }) => {
         setIsLoading(false);
       };
 
+      const fetchCountryData = async () => {
+        await mutateCountriesData(
+          { id: countryId, token },
+          {
+            onSuccess: (data) => {
+              setRegionData({ type: 'countries', id: countryId, ...data.data });
+            }
+          }
+        );
+      };
+
       if (data && data.result === 'OK') {
         fetchGroups();
+        fetchCountryData();
       }
     }, [data])
   );
 
+  useEffect(() => {
+    if (regionsQe && regionsQe.result === 'OK') {
+      setRegionsData(regionsQe.data.out_regs);
+      setDaresData(regionsQe.data.out_dare);
+    }
+  }, [regionsQe]);
+
   const handleCheckboxChange = useCallback(
     async (item: SeriesItem, double: boolean, seriesId: number) => {
       setSeries((currentData) => {
@@ -209,6 +241,10 @@ const CountryViewScreen: FC<Props> = ({ navigation, route }) => {
     });
   };
 
+  const renderScene = ({ route }: { route: any }) => {
+    return <View style={{ height: 0 }} />;
+  };
+
   const renderDurationIcon = (condition: 0 | 1) =>
     condition ? <CheckSvg fill={Colors.DARK_BLUE} /> : <CheckRegularSvg />;
 
@@ -451,29 +487,180 @@ const CountryViewScreen: FC<Props> = ({ navigation, route }) => {
             )}
           </View>
 
-          <View style={[styles.divider, { marginBottom: 8 }]} />
+          <View style={[styles.divider]} />
+
+          <TabView
+            navigationState={{ index, routes: countryRoutes }}
+            renderScene={renderScene}
+            onIndexChange={(i) => {
+              setIndex(i);
+            }}
+            lazy={true}
+            renderTabBar={(props) => (
+              <TabBar
+                {...props}
+                indicatorStyle={{ backgroundColor: Colors.DARK_BLUE }}
+                style={styles.tabBar}
+                tabStyle={styles.tabStyle}
+                pressColor={'transparent'}
+                renderLabel={({ route, focused }) => (
+                  <Text
+                    style={[
+                      styles.tabLabel,
+                      { color: Colors.DARK_BLUE, opacity: focused ? 1 : 0.4 }
+                    ]}
+                  >
+                    {route.title}
+                  </Text>
+                )}
+              />
+            )}
+          />
 
-          {series.length > 0 ? (
+          {index === 0 && (
             <>
-              <Text style={styles.travelSeriesTitle}>TRAVEL SERIES</Text>
-              <HorizontalTabView
-                index={indexSeries}
-                setIndex={setIndexSeries}
-                routes={routes}
-                renderScene={({ route }: { route: SeriesGroup }) => <View style={{ height: 0 }} />}
-              />
-              <TravelSeriesList
-                series={series}
-                indexSeries={indexSeries}
-                routes={routes}
-                handleCheckboxChange={handleCheckboxChange}
-                setIsInfoModalVisible={setIsInfoModalVisible}
-                setInfoItem={setInfoItem}
-                disabled={disabled}
-                includeAll={false}
-              />
+              {regionsData && regionsData.length > 0 ? (
+                <FlatList
+                  data={regionsData}
+                  keyExtractor={(item) => `region-${item.id}`}
+                  showsVerticalScrollIndicator={false}
+                  initialNumToRender={15}
+                  contentContainerStyle={{ paddingBottom: 16, gap: 10 }}
+                  scrollEnabled={false}
+                  renderItem={({ item }) => {
+                    const [regionName, ...rest] = item.region_name?.split(/ – | - /);
+                    const subname = rest?.join(' - ');
+
+                    return (
+                      <TouchableOpacity
+                        style={styles.regionContainer}
+                        onPress={() =>
+                          navigation.navigate(
+                            ...([
+                              NAVIGATION_PAGES.REGION_PREVIEW,
+                              {
+                                regionId: item.id,
+                                type: 'nm',
+                                disabled
+                              }
+                            ] as never)
+                          )
+                        }
+                      >
+                        {item.flag_1 && (
+                          <Image
+                            source={{ uri: API_HOST + '/img/flags_new/' + item.flag_1 }}
+                            style={styles.img}
+                          />
+                        )}
+                        {item.flag_2 && (
+                          <Image
+                            source={{ uri: API_HOST + '/img/flags_new/' + item.flag_2 }}
+                            style={[
+                              styles.img,
+                              {
+                                marginLeft: -20
+                              }
+                            ]}
+                          />
+                        )}
+                        <View style={styles.textContainer}>
+                          <Text style={styles.regionTitle}>{regionName}</Text>
+                          <Text style={styles.subTitle}>{subname}</Text>
+                        </View>
+                      </TouchableOpacity>
+                    );
+                  }}
+                />
+              ) : null}
+            </>
+          )}
+
+          {index === 1 && (
+            <>
+              {daresData && daresData.length > 0 ? (
+                <FlatList
+                  data={daresData}
+                  keyExtractor={(item) => `dare-${item.id}`}
+                  showsVerticalScrollIndicator={false}
+                  initialNumToRender={15}
+                  contentContainerStyle={{ paddingBottom: 16, gap: 10 }}
+                  scrollEnabled={false}
+                  renderItem={({ item }) => {
+                    const [regionName, ...rest] = item.name?.split(/ – | - /);
+                    const subname = rest?.join(' - ');
+
+                    return (
+                      <TouchableOpacity
+                        style={styles.regionContainer}
+                        onPress={() =>
+                          navigation.navigate(
+                            ...([
+                              NAVIGATION_PAGES.REGION_PREVIEW,
+                              {
+                                regionId: item.id,
+                                type: 'dare',
+                                disabled
+                              }
+                            ] as never)
+                          )
+                        }
+                      >
+                        {item.flag1 && (
+                          <Image
+                            source={{ uri: API_HOST + '/img/flags_new/' + item.flag1 }}
+                            style={styles.img}
+                          />
+                        )}
+                        {item.flag2 && (
+                          <Image
+                            source={{ uri: API_HOST + '/img/flags_new/' + item.flag2 }}
+                            style={[
+                              styles.img,
+                              {
+                                marginLeft: -20
+                              }
+                            ]}
+                          />
+                        )}
+                        <View style={styles.textContainer}>
+                          <Text style={styles.regionTitle}>{regionName}</Text>
+                          <Text style={styles.subTitle}>{subname}</Text>
+                        </View>
+                      </TouchableOpacity>
+                    );
+                  }}
+                />
+              ) : null}
+            </>
+          )}
+
+          {index === 2 && (
+            <>
+              {series.length > 0 ? (
+                <>
+                  <HorizontalTabView
+                    index={indexSeries}
+                    setIndex={setIndexSeries}
+                    routes={routes}
+                    renderScene={({ route }: { route: SeriesGroup }) => (
+                      <View style={{ height: 0 }} />
+                    )}
+                  />
+                  <TravelSeriesList
+                    series={series}
+                    indexSeries={indexSeries}
+                    routes={routes}
+                    handleCheckboxChange={handleCheckboxChange}
+                    setIsInfoModalVisible={setIsInfoModalVisible}
+                    setInfoItem={setInfoItem}
+                    disabled={disabled}
+                    includeAll={false}
+                  />
+                </>
+              ) : null}
             </>
-          ) : null}
+          )}
         </View>
 
         <ImageView

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

@@ -87,7 +87,7 @@ const RegionViewScreen: FC<Props> = ({ navigation, route }) => {
         display: 'flex',
         ...Platform.select({
           android: {
-            height: 58
+            // height: 58
           }
         })
       }

src/screens/InAppScreens/MapScreen/index.tsx

@@ -788,7 +788,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
           position: 'absolute',
           ...Platform.select({
             android: {
-              height: 58
+              // height: 58
             }
           })
         }

src/screens/InAppScreens/MessagesScreen/index.tsx

@@ -244,7 +244,7 @@ const MessagesScreen = () => {
         display: 'flex',
         ...Platform.select({
           android: {
-            height: 58
+            // height: 58
           }
         })
       }

src/screens/InAppScreens/ProfileScreen/index.tsx

@@ -95,7 +95,7 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
             display: 'flex',
             ...Platform.select({
               android: {
-                height: 58
+                // height: 58
               }
             })
           }

src/screens/InAppScreens/TravelsScreen/CountriesScreen/index.tsx

@@ -60,7 +60,7 @@ const CountriesScreen = () => {
             display: 'flex',
             ...Platform.select({
               android: {
-                height: 58
+                // height: 58
               }
             })
           }