split map component

Route.tsx

@@ -4,7 +4,7 @@ import * as SplashScreen from 'expo-splash-screen';
 import { Platform } from 'react-native';
 
 import { createStackNavigator } from '@react-navigation/stack';
-import { BottomTabNavigationProp, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 import WelcomeScreen from './src/screens/WelcomeScreen';
 import LoginScreen from './src/screens/LoginScreen';
@@ -12,11 +12,10 @@ import ResetPasswordScreen from './src/screens/ResetPasswordScreen';
 import ResetPasswordDeepScreen from './src/screens/ResetPasswordDeepScreen';
 import JoinUsScreen from './src/screens/RegisterScreen/JoinUs';
 import EditAccount from './src/screens/RegisterScreen/EditAccount';
-import HomeScreen from './src/screens/HomeScreen';
 
+import MapScreen from './src/screens/InAppScreens/MapScreen';
 import TravelsScreen from './src/screens/InAppScreens/TravelsScreen';
 import ProfileScreen from './src/screens/InAppScreens/ProfileScreen';
-import MapScreen from './src/screens/InAppScreens/MapScreen';
 import TravellersScreen from './src/screens/InAppScreens/TravellersScreen';
 
 import { NAVIGATION_PAGES } from './src/types';
@@ -49,20 +48,14 @@ const Route = () => {
   }, []);
   
   useEffect(() => {
-    if (fontsLoaded && dbLoaded) {
-      SplashScreen.hideAsync();
-    }
-  }, [fontsLoaded, dbLoaded]); 
-
-  // useEffect(() => {
-  //   const hideSplashScreen = async () => {
-  //     if (fontsLoaded) {
-  //       await SplashScreen.hideAsync();
-  //     }
-  //   };
+    const hideSplashScreen = async () => {
+      if (fontsLoaded && dbLoaded) {
+        await SplashScreen.hideAsync();
+      }
+    };
 
-  //   hideSplashScreen();
-  // }, [fontsLoaded]);
+    hideSplashScreen();
+  }, [fontsLoaded, dbLoaded]); 
 
   if (!fontsLoaded) {
     return null;
@@ -108,10 +101,10 @@ const Route = () => {
           <BottomTab.Navigator
             screenOptions={screenOptions}
           >
-            <BottomTab.Screen name={NAVIGATION_PAGES.MAP_TAB} component={HomeScreen} />
-            <BottomTab.Screen name={NAVIGATION_PAGES.TRAVELLERS_TAB} component={WelcomeScreen} />
-            <BottomTab.Screen name={NAVIGATION_PAGES.TRAVELS_TAB} component={WelcomeScreen} />
-            <BottomTab.Screen name={NAVIGATION_PAGES.PROFILE_TAB} component={WelcomeScreen} />
+            <BottomTab.Screen name={NAVIGATION_PAGES.MAP_TAB} component={MapScreen} />
+            <BottomTab.Screen name={NAVIGATION_PAGES.TRAVELLERS_TAB} component={TravellersScreen} />
+            <BottomTab.Screen name={NAVIGATION_PAGES.TRAVELS_TAB} component={TravelsScreen} />
+            <BottomTab.Screen name={NAVIGATION_PAGES.PROFILE_TAB} component={ProfileScreen} />
           </BottomTab.Navigator>
         )}
       </ScreenStack.Screen>

assets/icons/map.svg

@@ -1,4 +0,0 @@
-<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6.29167C8.42267 6.29167 6.33333 8.381 6.33333 10.9583C6.33333 13.5357 8.42267 15.625 11 15.625C13.5773 15.625 15.6667 13.5357 15.6667 10.9583C15.6667 8.381 13.5773 6.29167 11 6.29167ZM8.66667 10.9583C8.66667 9.66967 9.71134 8.625 11 8.625C12.2887 8.625 13.3333 9.66967 13.3333 10.9583C13.3333 12.247 12.2887 13.2917 11 13.2917C9.71134 13.2917 8.66667 12.247 8.66667 10.9583Z" />
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5 11.25C21.5 17.6667 13.3333 25.8333 11 25.8333C8.66667 25.8333 0.5 17.6667 0.5 11.25C0.5 5.45101 5.20101 0.75 11 0.75C16.799 0.75 21.5 5.45101 21.5 11.25ZM19.1667 11.25C19.1667 13.6239 17.5632 16.7354 15.3212 19.4678C14.2442 20.7804 13.1214 21.8797 12.1767 22.6276C11.702 23.0034 11.3134 23.2577 11.0315 23.4066L11 23.423L10.9685 23.4066C10.6866 23.2577 10.298 23.0034 9.82331 22.6276C8.8786 21.8797 7.75581 20.7804 6.67884 19.4678C4.43684 16.7354 2.83333 13.6239 2.83333 11.25C2.83333 6.73967 6.48967 3.08333 11 3.08333C15.5103 3.08333 19.1667 6.73967 19.1667 11.25Z" fill="#0F3F4F"/>
-</svg>

assets/icons/peoples.svg

@@ -1,6 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.64491 1.54857C5.53402 1.54857 3.83543 3.25521 3.83543 5.35805C3.83543 7.40528 5.43467 9.06634 7.4538 9.15602C7.57625 9.1475 7.70561 9.14708 7.82765 9.15593C9.84479 9.0653 11.445 7.40534 11.4544 5.35647C11.4535 3.25549 9.74609 1.54857 7.64491 1.54857ZM2.28687 5.35805C2.28687 2.40223 4.6765 0 7.64491 0C10.6019 0 13.003 2.40109 13.003 5.35805L13.003 5.36127C12.9909 8.25234 10.7121 10.6087 7.83611 10.7053C7.80172 10.7065 7.76729 10.7054 7.73305 10.7019C7.68327 10.697 7.60887 10.6963 7.53951 10.7026C7.50756 10.7055 7.47546 10.7064 7.4434 10.7053C4.56801 10.6087 2.28687 8.25219 2.28687 5.35805Z" />
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5203 2.83898C14.5203 2.41136 14.8669 2.0647 15.2945 2.0647C17.7264 2.0647 19.6822 4.03363 19.6822 6.45231C19.6822 8.82209 17.8021 10.7516 15.4577 10.8394C15.416 10.8409 15.3742 10.8391 15.3327 10.8339C15.3172 10.832 15.2857 10.8308 15.2458 10.8352C14.8208 10.8824 14.438 10.5762 14.3908 10.1511C14.3436 9.72613 14.6498 9.34331 15.0748 9.29609C15.1964 9.28258 15.3238 9.27945 15.4495 9.2896C16.943 9.20773 18.1336 7.96815 18.1336 6.45231C18.1336 4.886 16.8683 3.61327 15.2945 3.61327C14.8669 3.61327 14.5203 3.26661 14.5203 2.83898Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.82285 11.5498C9.81349 11.5498 11.8434 12.0494 13.4122 13.0971C14.8223 14.0357 15.6302 15.3514 15.6302 16.7672C15.6302 18.1829 14.8224 19.5009 13.4129 20.4445L13.4127 20.4446C11.8392 21.4975 9.80666 22.0001 7.81511 22.0001C5.82395 22.0001 3.79184 21.4977 2.2184 20.4452C0.808052 19.5067 0 18.1909 0 16.7749C0 15.3592 0.807777 14.0412 2.21733 13.0976L2.22017 13.0957L2.22018 13.0957C3.7981 12.0495 5.83197 11.5498 7.82285 11.5498ZM3.07735 14.3854C1.98959 15.1141 1.54857 15.9946 1.54857 16.7749C1.54857 17.5551 1.9894 18.4329 3.07693 19.1564L3.07863 19.1576C4.3441 20.0043 6.05912 20.4515 7.81511 20.4515C9.57103 20.4515 11.286 20.0043 12.5514 19.1577C13.6403 18.4288 14.0817 17.5479 14.0817 16.7672C14.0817 15.987 13.6408 15.1092 12.5533 14.3857L12.5521 14.3849C11.2922 13.5434 9.57976 13.0984 7.82285 13.0984C6.06685 13.0984 4.34866 13.543 3.07735 14.3854Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5629 12.9924C16.6569 12.5753 17.0713 12.3133 17.4884 12.4073C18.3034 12.591 19.1033 12.9186 19.778 13.4331C20.7495 14.1628 21.2929 15.1799 21.2929 16.2546C21.2929 17.329 20.7498 18.3458 19.7788 19.0755C19.0959 19.5989 18.2838 19.9402 17.4452 20.1149C17.0265 20.2021 16.6165 19.9335 16.5292 19.5148C16.442 19.0962 16.7107 18.6861 17.1293 18.5989C17.7759 18.4642 18.3665 18.2076 18.8392 17.8446L18.8461 17.8393L18.8461 17.8393C19.4834 17.3613 19.7443 16.7791 19.7443 16.2546C19.7443 15.7301 19.4834 15.1479 18.8461 14.6699L18.8408 14.6659L18.8408 14.6659C18.3805 14.3143 17.7979 14.0644 17.148 13.918C16.7308 13.824 16.4689 13.4096 16.5629 12.9924Z" />
-</svg>

assets/icons/profile.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6449 2.54857C9.53402 2.54857 7.83543 4.25521 7.83543 6.35805C7.83543 8.40528 9.43467 10.0663 11.4538 10.156C11.5762 10.1475 11.7056 10.1471 11.8276 10.1559C13.8448 10.0653 15.445 8.40534 15.4544 6.35647C15.4535 4.25549 13.7461 2.54857 11.6449 2.54857ZM6.28687 6.35805C6.28687 3.40223 8.6765 1 11.6449 1C14.6019 1 17.003 3.40109 17.003 6.35805L17.003 6.36127C16.9909 9.25234 14.7121 11.6087 11.8361 11.7053C11.8017 11.7065 11.7673 11.7054 11.733 11.7019C11.6833 11.697 11.6089 11.6963 11.5395 11.7026C11.5076 11.7055 11.4755 11.7064 11.4434 11.7053C8.56801 11.6087 6.28687 9.25219 6.28687 6.35805Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8229 12.5498C13.8135 12.5498 15.8434 13.0494 17.4122 14.0971C18.8223 15.0357 19.6302 16.3514 19.6302 17.7672C19.6302 19.1829 18.8224 20.5009 17.4129 21.4445L17.4127 21.4446C15.8392 22.4975 13.8067 23.0001 11.8151 23.0001C9.82395 23.0001 7.79184 22.4977 6.2184 21.4452C4.80805 20.5067 4 19.1909 4 17.7749C4 16.3592 4.80778 15.0412 6.21733 14.0976L6.22017 14.0957L6.22018 14.0957C7.7981 13.0495 9.83197 12.5498 11.8229 12.5498ZM7.07735 15.3854C5.98959 16.1141 5.54857 16.9946 5.54857 17.7749C5.54857 18.5551 5.9894 19.4329 7.07693 20.1564L7.07863 20.1576C8.3441 21.0043 10.0591 21.4515 11.8151 21.4515C13.571 21.4515 15.286 21.0043 16.5514 20.1577C17.6403 19.4288 18.0817 18.5479 18.0817 17.7672C18.0817 16.987 17.6408 16.1092 16.5533 15.3857L16.5521 15.3849C15.2922 14.5434 13.5798 14.0984 11.8229 14.0984C10.0669 14.0984 8.34866 14.543 7.07735 15.3854Z"/>
-</svg>

src/components/RegionPopup/index.tsx

@@ -1,5 +1,13 @@
 import { useEffect, useRef } from 'react';
-import { Text, TouchableOpacity, View, StyleSheet, Image, Animated } from 'react-native';
+import {
+  Text,
+  TouchableOpacity,
+  View,
+  Image,
+  Animated
+} from 'react-native';
+
+import { styles } from './style';
 
 interface Region {
   id: number;
@@ -63,15 +71,23 @@ const RegionPopup: React.FC<RegionPopupProps> = ({ region, userAvatars, onMarkVi
         <View style={styles.userContainer}>
           <View style={styles.userImageContainer}>
             {userAvatars?.map((avatar, index) => (
-              <Image key={index} source={{ uri: avatar }} style={styles.userImage} />
+              <Image
+                key={index}
+                source={{ uri: avatar }}
+                style={styles.userImage}
+              />
             ))}
             <View style={styles.userCountContainer}>
-              <Text style={styles.userCount}>{formattedCount}</Text>
+              <Text style={styles.userCount}>
+                {formattedCount}
+              </Text>
             </View>
           </View>
         </View>
         <TouchableOpacity style={styles.markVisitedButton} onPress={onMarkVisited}>
-          <Text style={styles.markVisitedText}>Mark Visited</Text>
+          <Text style={styles.markVisitedText}>
+            Mark Visited
+          </Text>
         </TouchableOpacity>
       </View>
     </Animated.View>
@@ -79,110 +95,3 @@ const RegionPopup: React.FC<RegionPopupProps> = ({ region, userAvatars, onMarkVi
 };
 
 export default RegionPopup;
-
-const styles = StyleSheet.create({
-  popupContainer: {
-    position: 'absolute',
-    bottom: 22,
-    left: 0,
-    right: 0,
-    backgroundColor: 'white',
-    padding: 16,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 152,
-    marginHorizontal: 24,
-    shadowColor: 'rgba(33, 37, 41, 0.12)',
-    shadowOffset: { width: 0, height: 4 },
-    shadowRadius: 8,
-    elevation: 5,
-    zIndex: 2,
-  },
-  regionInfoContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    width: '100%',
-  },
-  regionImage: {
-    width: 60,
-    height: 60,
-    borderRadius: 6,
-    marginRight: 10,
-  },
-  regionTextContainer: {
-    justifyContent: 'center',
-    flex: 1,
-  },
-  regionTitle: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: '#0F3F4F'
-  },
-  regionSubtitle: {
-    fontSize: 13,
-    color: '#3E6471',
-  },
-  separator: {
-    borderBottomWidth: 1,
-    borderBottomColor: '#E5E5E5',
-    width: '100%',
-    marginVertical: 16,
-  },
-  bottomContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-  },
-  userContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginLeft: 6,
-  },
-  userImageContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginRight: 10,
-  },
-  userImage: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    marginLeft: -6,
-    borderWidth: 1,
-    borderColor: '#E6E6E6',
-    resizeMode: 'cover',
-  },
-  userCountContainer: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    backgroundColor: '#E5E5E5',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: -6,
-  },
-  userCount: {
-    fontSize: 12,
-    color: '#0F3F4F',
-    lineHeight: 24,
-  },
-  markVisitedButton: {
-    backgroundColor: '#ED9334',
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 6,
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 32,
-  },
-  markVisitedText: {
-    fontSize: 12,
-    color: 'white',
-    fontWeight: '700',
-    letterSpacing: 0.01,
-    lineHeight: 16,
-  },
-});

src/components/RegionPopup/style.tsx

@@ -0,0 +1,109 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../theme';
+
+export const styles = StyleSheet.create({
+  popupContainer: {
+    position: 'absolute',
+    bottom: 22,
+    left: 0,
+    right: 0,
+    backgroundColor: Colors.WHITE,
+    padding: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 152,
+    marginHorizontal: 24,
+    shadowColor: 'rgba(33, 37, 41, 0.12)',
+    shadowOffset: { width: 0, height: 4 },
+    shadowRadius: 8,
+    elevation: 5,
+    zIndex: 2,
+  },
+  regionInfoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    width: '100%',
+  },
+  regionImage: {
+    width: 60,
+    height: 60,
+    borderRadius: 6,
+    marginRight: 10,
+  },
+  regionTextContainer: {
+    justifyContent: 'center',
+    flex: 1,
+  },
+  regionTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: Colors.DARK_BLUE,
+  },
+  regionSubtitle: {
+    fontSize: 13,
+    color: Colors.TEXT_GRAY,
+  },
+  separator: {
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.DARK_LIGHT,
+    width: '100%',
+    marginVertical: 16,
+  },
+  bottomContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  userContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 6,
+  },
+  userImageContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginRight: 10,
+  },
+  userImage: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    marginLeft: -6,
+    borderWidth: 1,
+    borderColor: Colors.DARK_LIGHT,
+    resizeMode: 'cover',
+  },
+  userCountContainer: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: Colors.DARK_LIGHT,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: -6,
+  },
+  userCount: {
+    fontSize: 12,
+    color: Colors.DARK_BLUE,
+    lineHeight: 24,
+  },
+  markVisitedButton: {
+    backgroundColor: Colors.ORANGE,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 32,
+  },
+  markVisitedText: {
+    fontSize: 12,
+    color: Colors.WHITE,
+    fontWeight: '700',
+    letterSpacing: 0.01,
+    lineHeight: 16,
+  },
+});

src/components/TabBarButton/index.tsx

@@ -1,13 +1,15 @@
-import { Text, TouchableOpacity, StyleSheet, View, TouchableWithoutFeedback, Platform } from 'react-native';
+import { Text, View, TouchableWithoutFeedback } from 'react-native';
 import { SvgProps } from 'react-native-svg';
 
 import { NAVIGATION_PAGES } from '../../types';
 
 import MapIcon from '../../../assets/icons/bottom-navigation/map.svg';
 import TravellersIcon from '../../../assets/icons/bottom-navigation/travellers.svg';
-import TravelsIcon from '../../../assets/icons/bottom-navigation/travels.svg';
+import GlobeIcon from '../../../assets/icons/bottom-navigation/globe.svg';
 import ProfileIcon from '../../../assets/icons/bottom-navigation/profile.svg';
-import { useState } from 'react';
+
+import { Colors } from '../../theme';
+import { styles } from './style';
 
 const getTabIcon = (routeName: string) => {
   switch (routeName) {
@@ -16,7 +18,7 @@ const getTabIcon = (routeName: string) => {
     case NAVIGATION_PAGES.TRAVELLERS_TAB:
       return TravellersIcon;
     case NAVIGATION_PAGES.TRAVELS_TAB:
-      return TravelsIcon;
+      return GlobeIcon;
     case NAVIGATION_PAGES.PROFILE_TAB:
       return ProfileIcon;
     default:
@@ -24,47 +26,24 @@ const getTabIcon = (routeName: string) => {
   }
 };
 
-const TabBarButton = ({ label, onPress, focused }: { label: string, onPress: () => void, focused: boolean }) => {
-  const [isPressed, setIsPressed] = useState(false);
-
-  const handlePressIn = () => {
-    setIsPressed(true);
-  };
-
-  const handlePressOut = () => {
-    setIsPressed(false);
-  };
-
-  const styles = StyleSheet.create({
-    buttonStyle: {
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'center',
-      overflow: 'hidden',
-    },
-    labelStyle: {
-      color: focused ? '#0F3F4F' : '#C8C8C8',
-      marginTop: 4,
-      fontSize: 10,
-      // lineHeight: 12,
-      // ...Platform.select({
-      //   android: {
-      //     marginBottom: 6,
-      //   },
-      // }),
-    },
-  });
-
+const TabBarButton = ({
+  label,
+  onPress,
+  focused,
+}: {
+  label: string;
+  onPress: () => void;
+  focused: boolean;
+}) => {
   const IconComponent: React.FC<SvgProps> | null = getTabIcon(label);
 
-  let currentColor = focused ? '#0F3F4F' : '#C8C8C8';
-
+  let currentColor = focused ? Colors.DARK_BLUE : Colors.LIGHT_GRAY;
 
   return (
-    <TouchableWithoutFeedback onPress={onPress} onPressIn={handlePressIn} onPressOut={handlePressOut} style={{}}>
+    <TouchableWithoutFeedback onPress={onPress}>
       <View style={styles.buttonStyle}>
-        {IconComponent && <IconComponent width={24} height={24} fill={focused ? '#0F3F4F' : '#C8C8C8'} />}
-        <Text style={styles.labelStyle}>{label}</Text>
+        {IconComponent && <IconComponent width={24} height={24} fill={currentColor} />}
+        <Text style={[styles.labelStyle, { color: currentColor }]}>{label}</Text>
       </View>
     </TouchableWithoutFeedback>
   );

src/components/TabBarButton/style.tsx

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  buttonStyle: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  labelStyle: {
+    marginTop: 4,
+    fontSize: 10,
+  },
+});

src/db/index.ts

@@ -11,8 +11,8 @@ async function copyDatabaseFile(dbName: string, dbAsset: Asset) {
     dbAsset.uri,
     FileSystem.documentDirectory + "SQLite/" + dbName
   );
+  
   const dbUri = FileSystem.documentDirectory + `SQLite/${dbName}`;
-  console.log('localUri:', dbAsset.localUri);
 
   await FileSystem.copyAsync({
     from: dbAsset.localUri ?? '',
@@ -23,23 +23,17 @@ async function copyDatabaseFile(dbName: string, dbAsset: Asset) {
 }
 
 export async function openDatabases() {
-  console.log('openDatabase - Start');
-
   try {
     const sqlDir = FileSystem.documentDirectory + "SQLite";
-    console.log('openDatabase - Checking SQLite directory');
     const fileInfo = await FileSystem.getInfoAsync(sqlDir);
 
     if (!fileInfo.exists) {
-      console.log('openDatabase - Creating SQLite directory');
       await FileSystem.makeDirectoryAsync(sqlDir, { intermediates: true });
       console.log('openDatabase - Downloading databases');
       await copyDatabaseFile('nmRegions.db', Asset.fromModule(require('../../assets/db/nmRegions.db')));
       await copyDatabaseFile('darePlaces.db', Asset.fromModule(require('../../assets/db/darePlaces.db')));
 
       console.log('openDatabase - Databases downloaded');
-    } else {
-      console.log('openDatabase - Databases already exist');
     }
 
     const openDatabase = (dbName: string) => SQLite.openDatabase(dbName);

src/modules/map/regionData.ts

@@ -0,0 +1,50 @@
+import { SQLiteDatabase } from 'expo-sqlite';
+
+export const getData = async (
+  db: SQLiteDatabase | null, 
+  regionId: number, 
+  name: string, 
+  callback: (data: any, avatars: string[]) => void
+) => {
+  return new Promise<void>((resolve, reject) => {
+    db?.transaction(tx => {
+      tx.executeSql(
+        `SELECT * FROM ${name} WHERE id = ${regionId};`,
+        [],
+        (_, { rows }) => {
+          const regionData = rows._array[0];
+  
+          const avatarPromises = JSON.parse(regionData.visitors_avatars)?.map((avatarId: number) => {
+            return new Promise<string>((resolveAvatar, rejectAvatar) => {
+              tx.executeSql(
+                `SELECT * FROM avatars WHERE id = ${avatarId};`,
+                [],
+                (_, { rows }) => resolveAvatar(rows._array[0].data),
+                (_, error) => {
+                  console.error('error', error);
+                  rejectAvatar(error);
+                  return false;
+                }
+              );
+            });
+          });
+  
+          Promise.all(avatarPromises)
+            .then(avatars => {
+              callback(regionData, avatars);
+              resolve();
+            })
+            .catch(error => {
+              console.error('Error processing avatars', error);
+              reject(error);
+            });
+        },
+        (_, error) => {
+          console.error('error', error);
+          reject(error);
+          return false;
+        }
+      );
+    });
+  });
+};

src/screens/HomeScreen/index.tsx

@@ -1,467 +0,0 @@
-import {
-  StyleSheet,
-  View,
-  Platform,
-  TouchableOpacity,
-  Text
-} from 'react-native';
-import React, { useEffect, useState, useRef, useMemo } from 'react';
-import MapView, { UrlTile, Geojson } from 'react-native-maps';
-import * as turf from '@turf/turf';
-import * as FileSystem from 'expo-file-system';
-import * as Location from 'expo-location';
-
-import MenuIcon from '../../../assets/icons/menu.svg';
-import SearchIcon from '../../../assets/icons/search.svg';
-import RadarIcon from '../../../assets/icons/radar.svg';
-import LocationIcon from '../../../assets/icons/location.svg';
-import CloseSvg from '../../../assets/icons/close.svg';
-
-import regions from '../../../assets/geojson/nm2022.json'
-import dareRegions from '../../../assets/geojson/mqp.json'
-
-import NetInfo from "@react-native-community/netinfo";
-import { getFirstDatabase, getSecondDatabase } from '../../db';
-import RegionPopup from '../../components/RegionPopup';
-
-import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
-import { SQLiteDatabase } from 'expo-sqlite';
-import { FeatureCollection } from '@turf/turf';
-
-const tilesBaseURL = 'https://maps.nomadmania.com/tiles_osm';
-const localTileDir = `${FileSystem.cacheDirectory}tiles`;
-
-const gridUrl = 'https://maps.nomadmania.com/tiles_nm/grid';
-const localGridDir = `${FileSystem.cacheDirectory}tiles/grid`;
-
-const visitedTiles = 'https://maps.nomadmania.com/tiles_nm/user_visited/51363';
-const localVisitedDir = `${FileSystem.cacheDirectory}tiles/user_visited`;
-
-const dareTiles = 'https://maps.nomadmania.com/tiles_nm/regions_mqp';
-const localDareDir = `${FileSystem.cacheDirectory}tiles/regions_mqp`;
-
-interface RegionData {
-  type?: string;
-  name?: string;
-  crs?: {
-    type: string;
-    properties: { name: string; };
-  };
-  features?: any;
-}
-
-interface Region {
-  id: number;
-  name: string;
-  region_photos: string;
-  visitors_count: number;
-}
-
-interface Feature {
-  geometry: turf.helpers.Geometry;
-  properties: {
-    id: number;
-    fill?: string;
-    stroke?: string;
-  };
-  type: 'Feature';
-}
-
-interface GeojsonRegion {
-  type: 'FeatureCollection';
-  features: Feature[];
-}
-
-type HomeScreenNavigationProp = BottomTabNavigationProp<any>;
-interface HomeScreenProps {
-  navigation: HomeScreenNavigationProp;
-}
-
-const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
-  const mapRef = useRef<MapView>(null);
-
-  const [isConnected, setIsConnected] = useState<boolean | null>(true);
-  const [selectedRegion, setSelectedRegion] = useState(null);
-  const [location, setLocation] = useState(null);
-  const [popupVisible, setPopupVisible] = useState<boolean | null>(false);
-  const [regionData, setRegionData] = useState<Region | null>(null);
-  const [userAvatars, setUserAvatars] = useState<string[]>([]);
-
-  useEffect(() => {
-    navigation.setOptions({
-      tabBarStyle: {
-        display: popupVisible ? 'none' : 'flex',
-        position: 'absolute',
-        ...Platform.select({
-          android: {
-            height: 58,
-          },
-        }),
-      }
-    });
-  }, [popupVisible, navigation]);
-
-  // useEffect(() => {
-  //   (async () => {
-      
-  //     let { status } = await Location.requestForegroundPermissionsAsync();
-  //     if (status !== 'granted') {
-  //       return;
-  //     }
-
-  //     let location = await Location.getCurrentPositionAsync({});
-  //     setLocation({
-  //       latitude: location.coords.latitude,
-  //       longitude: location.coords.longitude,
-  //       latitudeDelta: 5,
-  //       longitudeDelta: 5,
-  //     });
-  //   })();
-  // }, []);
-
-  const getData = async (db: SQLiteDatabase | null, regionId: number, name: string) => {
-    return new Promise<void>((resolve, reject) => {
-      db?.transaction(tx => {
-        tx.executeSql(
-          `SELECT * FROM ${name} WHERE id = ${regionId};`,
-          [],
-          (_, { rows }) => {
-            setRegionData(rows._array[0]);
-  
-            const avatarPromises = JSON.parse(rows._array[0].visitors_avatars)?.map((avatarId: number) => {
-              return new Promise((resolveAvatar, rejectAvatar) => {
-                tx.executeSql(
-                  `SELECT * FROM avatars WHERE id = ${avatarId};`,
-                  [],
-                  (_, { rows }) => {
-                    resolveAvatar(rows._array[0].data);
-                  },
-                  (_, error) => {
-                    console.error('error', error);
-                    reject(error);
-                    return false;
-                  }
-                );
-              });
-            });
-  
-            Promise.all(avatarPromises)
-              .then(avatars => {
-                setUserAvatars(avatars);
-                resolve();
-              })
-              .catch(error => {
-                console.error('Error processing avatars', error);
-                reject(error);
-              });
-          },
-          (_, error) => {
-            console.error('error', error);
-            reject(error);
-            return false;
-          }
-        );
-      });
-    });
-  }
-
-  const handleMapPress = async (event: { nativeEvent: { coordinate: { latitude: any; longitude: any; }; }; }) => {
-    const { latitude, longitude } = event.nativeEvent.coordinate;
-    const point = turf.point([longitude, latitude]);
-    setUserAvatars([]);
-
-    const findRegion = (dataset: RegionData) => {
-      return dataset.features.find((region: any) => {
-        const coordinates = region?.geometry?.coordinates;
-        const type = region?.geometry?.type;
-
-        if (!Array.isArray(coordinates) || coordinates.length === 0) {
-          return false;
-        }
-
-        try {
-          const polygon: any = type === 'Polygon'
-            ? turf.polygon(coordinates)
-            : turf.multiPolygon(coordinates);
-
-          return turf.booleanPointInPolygon(point, polygon);
-        } catch (error) {
-          console.error('Error creating polygon:', error);
-          return false;
-        }
-      });
-    };
-
-    let db = getSecondDatabase();
-    let tableName = 'places';
-
-    let foundRegion = findRegion(dareRegions);
-
-    if (!foundRegion) {
-      foundRegion = findRegion(regions);
-      db = getFirstDatabase();
-      tableName = 'regions';
-    }
-    if (foundRegion) {
-      const id = foundRegion.properties.id;
-
-
-      // console.log('foundRegion', foundRegion)
-  
-      setSelectedRegion({
-        type: 'FeatureCollection',
-        features: [{
-          geometry: foundRegion.geometry,
-          properties: {
-            ...foundRegion.properties,
-            fill: "rgba(57, 115, 172, 0.2)",
-            stroke: "#3973ac",
-          },
-          type: 'Feature',
-        }]
-      });
-
-      await getData(db, id, tableName).then(() => {
-        setPopupVisible(true)
-      });
-
-      const bounds = turf.bbox(foundRegion);
-      const padding = 1;
-
-      const region = {
-        latitude: (bounds[1] + bounds[3]) / 2,
-        longitude: (bounds[0] + bounds[2]) / 2,
-        latitudeDelta: Math.abs(bounds[3] - bounds[1]) + padding,
-        longitudeDelta: Math.abs(bounds[2] - bounds[0]) + padding,
-      };
-  
-      mapRef.current?.animateToRegion(region, 1000);
-    } else {
-      handleClosePopup();
-    }
-  };
-
-  useEffect(() => {
-    const unsubscribe = NetInfo.addEventListener(state => {
-      setIsConnected(state.isConnected);
-    });
-  
-    return () => unsubscribe();
-  }, []);
-
-  const renderLocalTiles = () => {
-    return (
-      <UrlTile
-        urlTemplate={`${tilesBaseURL}/{z}/{x}/{y}`}
-        maximumZ={15}
-        maximumNativeZ={13}
-        tileCachePath={`${localTileDir}`}
-        shouldReplaceMapContent
-        minimumZ={0}
-        offlineMode={!isConnected}
-        opacity={1}
-        zIndex={1}
-      />
-    );
-  };
-
-  const renderGridTiles = () => {
-    return (
-      <UrlTile
-        urlTemplate={`${gridUrl}/{z}/{x}/{y}`}
-        maximumZ={15}
-        maximumNativeZ={13}
-        tileCachePath={`${localGridDir}`}
-        shouldReplaceMapContent
-        minimumZ={0}
-        offlineMode={!isConnected}
-        opacity={1}
-        zIndex={2}
-      />
-    );
-  };
-
-  const renderVisitedTiles = () => {
-    return (
-      <UrlTile
-        urlTemplate={`${visitedTiles}/{z}/{x}/{y}`}
-        maximumZ={15}
-        maximumNativeZ={13}
-        tileCachePath={`${localVisitedDir}`}
-        shouldReplaceMapContent
-        minimumZ={0}
-        offlineMode={!isConnected}
-        opacity={0.5}
-        zIndex={2}
-      />
-    );
-  };
-
-  const renderDareTiles = () => {
-    return (
-      <UrlTile
-        urlTemplate={`${dareTiles}/{z}/{x}/{y}`}
-        maximumZ={15}
-        maximumNativeZ={13}
-        tileCachePath={`${localDareDir}`}
-        shouldReplaceMapContent
-        minimumZ={0}
-        offlineMode={!isConnected}
-        opacity={0.5}
-        zIndex={2}
-      />
-    );
-  };
-
-  function renderGeoJSON() {
-    if (!selectedRegion) return null;
-
-    return (
-        <Geojson
-          geojson={selectedRegion}
-          fillColor="rgba(57, 115, 172, 0.2)"
-          strokeColor="#3973ac"
-          strokeWidth={Platform.OS == 'android' ? 3 : 2}
-          zIndex={3}
-        />
-    );
-  };
-
-  const handleClosePopup = () => {
-    setPopupVisible(false);
-    setSelectedRegion(null);
-  }
-
-  const renderedGeoJSON = useMemo(() => renderGeoJSON(), [selectedRegion]);
-
-  return (
-    <View style={styles.container}>
-      <MapView
-        ref={mapRef}
-        // initialRegion={location}
-        // showsUserLocation={true}
-        showsMyLocationButton={false}
-        showsCompass={false}
-        zoomControlEnabled={false}
-        onPress={handleMapPress}
-        style={styles.map}
-        mapType={Platform.OS == 'android' ? 'none' : 'standard'}
-        offlineMode={!isConnected}
-        maxZoomLevel={15}
-        minZoomLevel={0}
-      >
-        {renderLocalTiles()}
-        {renderedGeoJSON}
-        {renderGridTiles()}
-        {renderVisitedTiles()}
-        {renderDareTiles()}
-      </MapView>
-
-      {!popupVisible ? (
-        <>
-          <TouchableOpacity style={[styles.cornerButton, styles.topLeftButton]}>
-            <MenuIcon />
-          </TouchableOpacity>
-
-          <TouchableOpacity style={[styles.cornerButton, styles.topRightButton]}>
-            <SearchIcon />
-          </TouchableOpacity>
-
-          <TouchableOpacity style={[styles.cornerButton, styles.bottomLeftButton]}>
-            <RadarIcon />
-          </TouchableOpacity>
-
-          <TouchableOpacity style={[styles.cornerButton, styles.bottomRightButton]}>
-            <LocationIcon />
-          </TouchableOpacity>
-        </>
-      ) : (
-        <>
-          <TouchableOpacity style={[styles.cornerButton, styles.topLeftButton, styles.closeLeftButton]} onPress={handleClosePopup}>
-            <CloseSvg fill="white" width={13} height={13} />
-            <Text style={{fontSize: 12, color: 'white', fontWeight: '500', lineHeight: 14}}>Close</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity style={[styles.cornerButton, styles.topRightButton, {width: 42, height: 42, borderRadius: 21,}]}>
-            <LocationIcon />
-          </TouchableOpacity>
-
-          <RegionPopup 
-            region={regionData}
-            userAvatars={userAvatars}
-            onMarkVisited={() => console.log('Mark as visited')} 
-          />
-        </>
-      )}
-    </View>
-  );
-}
-
-export default HomeScreen;
-
-const styles = StyleSheet.create({
-  container: {
-    ...StyleSheet.absoluteFillObject,
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-  },
-  map: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  btn: {
-    marginBottom: 5,
-  },
-  button: {
-    backgroundColor: '#007bff',
-    padding: 10,
-    borderRadius: 5,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  cornerButton: {
-    position: 'absolute',
-    backgroundColor: 'rgba(255, 255, 255, 1)',
-    padding: 12,
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: 'rgba(33, 37, 41, 0.12)',
-    shadowOffset: { width: 0, height: 4 },
-    shadowRadius: 8,
-    elevation: 5,
-  },
-  topLeftButton: {
-    top: 44,
-    left: 16,
-  },
-  closeLeftButton: {
-    backgroundColor: 'rgba(33, 37, 41, 0.78)',
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    width: 81,
-    height: 36,
-    borderRadius: 18,
-    flexDirection: 'row',
-    gap: 6,
-  },
-  topRightButton: {
-    top: 44,
-    right: 16,
-  },
-  bottomLeftButton: {
-    bottom: Platform.OS == 'android' ? 80 : 100,
-    left: 16,
-    width: 42,
-    height: 42,
-    borderRadius: 21,
-  },
-  bottomRightButton: {
-    bottom: Platform.OS == 'android' ? 80 : 100,
-    right: 16,
-    width: 42,
-    height: 42,
-    borderRadius: 21,
-  },
-});

src/screens/InAppScreens/MapScreen/index.tsx

@@ -1,12 +1,262 @@
-import React from 'react';
-import { View, Text } from 'react-native';
+import {
+  View,
+  Platform,
+  TouchableOpacity,
+  Text
+} from 'react-native';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
+import MapView, { UrlTile, Geojson } from 'react-native-maps';
+import * as turf from '@turf/turf';
+import * as FileSystem from 'expo-file-system';
+
+import MenuIcon from '../../../../assets/icons/menu.svg';
+import SearchIcon from '../../../../assets/icons/search.svg';
+import RadarIcon from '../../../../assets/icons/radar.svg';
+import LocationIcon from '../../../../assets/icons/location.svg';
+import CloseSvg from '../../../../assets/icons/close.svg';
+
+import regions from '../../../../assets/geojson/nm2022.json';
+import dareRegions from '../../../../assets/geojson/mqp.json';
+
+import NetInfo from "@react-native-community/netinfo";
+import { getFirstDatabase, getSecondDatabase } from '../../../db';
+import RegionPopup from '../../../components/RegionPopup';
+
+import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
+import { styles } from './style';
+import { findRegionInDataset, calculateMapRegion } from '../../../utils/mapHelpers';
+import { getData } from '../../../modules/map/regionData';
+
+
+const tilesBaseURL = 'https://maps.nomadmania.com/tiles_osm';
+const localTileDir = `${FileSystem.cacheDirectory}tiles`;
+
+const gridUrl = 'https://maps.nomadmania.com/tiles_nm/grid';
+const localGridDir = `${FileSystem.cacheDirectory}tiles/grid`;
+
+const visitedTiles = 'https://maps.nomadmania.com/tiles_nm/user_visited/51363';
+const localVisitedDir = `${FileSystem.cacheDirectory}tiles/user_visited`;
+
+const dareTiles = 'https://maps.nomadmania.com/tiles_nm/regions_mqp';
+const localDareDir = `${FileSystem.cacheDirectory}tiles/regions_mqp`;
+
+interface Region {
+  id: number;
+  name: string;
+  region_photos: string;
+  visitors_count: number;
+}
+
+interface Feature {
+  geometry: turf.helpers.Geometry;
+  properties: {
+    id: number;
+    fill?: string;
+    stroke?: string;
+  };
+  type: 'Feature';
+}
+
+interface GeojsonRegion {
+  type: 'FeatureCollection';
+  features: Feature[];
+}
+
+interface MapScreenProps {
+  navigation: BottomTabNavigationProp<any>;
+}
+
+const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
+  const mapRef = useRef<MapView>(null);
+
+  const [isConnected, setIsConnected] = useState<boolean | null>(true);
+  const [selectedRegion, setSelectedRegion] = useState(null);
+  const [popupVisible, setPopupVisible] = useState<boolean | null>(false);
+  const [regionData, setRegionData] = useState<Region | null>(null);
+  const [userAvatars, setUserAvatars] = useState<string[]>([]);
+
+  useEffect(() => {
+    navigation.setOptions({
+      tabBarStyle: {
+        display: popupVisible ? 'none' : 'flex',
+        position: 'absolute',
+        ...Platform.select({
+          android: {
+            height: 58,
+          },
+        }),
+      }
+    });
+  }, [popupVisible, navigation]);
+
+  const handleRegionData = (regionData: Region, avatars: string[]) => {
+    setRegionData(regionData);
+    setUserAvatars(avatars);
+  };
+
+  const handleMapPress = async (event: { nativeEvent: { coordinate: { latitude: any; longitude: any; }; }; }) => {
+    const { latitude, longitude } = event.nativeEvent.coordinate;
+    const point = turf.point([longitude, latitude]);
+    setUserAvatars([]);
+
+    let db = getSecondDatabase();
+    let tableName = 'places';
+
+    let foundRegion = findRegionInDataset(dareRegions, point);
+
+    if (!foundRegion) {
+      foundRegion = findRegionInDataset(regions, point);
+      db = getFirstDatabase();
+      tableName = 'regions';
+    }
+
+    if (foundRegion) {
+      const id = foundRegion.properties?.id;
+
+      setSelectedRegion({
+        type: 'FeatureCollection',
+        features: [{
+          geometry: foundRegion.geometry,
+          properties: {
+            ...foundRegion.properties,
+            fill: "rgba(57, 115, 172, 0.2)",
+            stroke: "#3973AC",
+          },
+          type: 'Feature',
+        }]
+      });
+
+      await getData(db, id, tableName, handleRegionData)
+      .then(() => {
+        setPopupVisible(true);
+      })
+      .catch(error => {
+        console.error("Error fetching data", error);
+      });
+
+      const bounds = turf.bbox(foundRegion);
+      const region = calculateMapRegion(bounds);
+
+      mapRef.current?.animateToRegion(region, 1000);
+    } else {
+      handleClosePopup();
+    }
+  };
+
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener(state => {
+      setIsConnected(state.isConnected);
+    });
+  
+    return () => unsubscribe();
+  }, []);
+
+  const renderMapTiles = (
+    url: string,
+    cacheDir: string,
+    zIndex: number,
+    opacity = 1
+  ) => (
+    <UrlTile
+      urlTemplate={`${url}/{z}/{x}/{y}`}
+      maximumZ={15}
+      maximumNativeZ={13}
+      tileCachePath={`${cacheDir}`}
+      shouldReplaceMapContent
+      minimumZ={0}
+      offlineMode={!isConnected}
+      opacity={opacity}
+      zIndex={zIndex}
+    />
+  );
+
+  function renderGeoJSON() {
+    if (!selectedRegion) return null;
+
+    return (
+        <Geojson
+          geojson={selectedRegion}
+          fillColor="rgba(57, 115, 172, 0.2)"
+          strokeColor="#3973ac"
+          strokeWidth={Platform.OS == 'android' ? 3 : 2}
+          zIndex={3}
+        />
+    );
+  };
+
+  const handleClosePopup = () => {
+    setPopupVisible(false);
+    setSelectedRegion(null);
+  }
+
+  const renderedGeoJSON = useMemo(() => renderGeoJSON(), [selectedRegion]);
 
-const MapScreen = () => {
   return (
-    <View>
-      <Text>Map Screen</Text>
+    <View style={styles.container}>
+      <MapView
+        ref={mapRef}
+        showsMyLocationButton={false}
+        showsCompass={false}
+        zoomControlEnabled={false}
+        onPress={handleMapPress}
+        style={styles.map}
+        mapType={Platform.OS == 'android' ? 'none' : 'standard'}
+        offlineMode={!isConnected}
+        maxZoomLevel={15}
+        minZoomLevel={0}
+      >
+        {renderedGeoJSON}
+        {renderMapTiles(tilesBaseURL, localTileDir, 1)}
+        {renderMapTiles(gridUrl, localGridDir, 2)}
+        {renderMapTiles(visitedTiles, localVisitedDir, 2, 0.5)}
+        {renderMapTiles(dareTiles, localDareDir, 2, 0.5)}
+      </MapView>
+
+      {popupVisible && regionData ? (
+        <>
+          <TouchableOpacity
+            style={[ styles.cornerButton, styles.topLeftButton, styles.closeLeftButton ]}
+            onPress={handleClosePopup}
+          >
+            <CloseSvg
+              fill="white"
+              width={13}
+              height={13}
+            />
+            <Text style={styles.textClose}>Close</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={[ styles.cornerButton, styles.topRightButton, styles.bottomButton ]}>
+            <LocationIcon />
+          </TouchableOpacity>
+
+          <RegionPopup 
+            region={regionData}
+            userAvatars={userAvatars}
+            onMarkVisited={() => console.log('Mark as visited')} 
+          />
+        </>
+      ) : (
+        <>
+          <TouchableOpacity style={[styles.cornerButton, styles.topLeftButton]}>
+            <MenuIcon />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={[styles.cornerButton, styles.topRightButton]}>
+            <SearchIcon />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={[styles.cornerButton, styles.bottomButton, styles.bottomLeftButton]}>
+            <RadarIcon />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={[styles.cornerButton, styles.bottomButton, styles.bottomRightButton]}>
+            <LocationIcon />
+          </TouchableOpacity>
+        </>
+      )}
     </View>
   );
-};
+}
 
 export default MapScreen;

src/screens/InAppScreens/MapScreen/style.tsx

@@ -0,0 +1,63 @@
+import { StyleSheet, Platform } from 'react-native';
+import { Colors } from '../../../theme';
+
+export const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+  map: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  cornerButton: {
+    position: 'absolute',
+    backgroundColor: Colors.WHITE,
+    padding: 12,
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: 'rgba(33, 37, 41, 0.12)',
+    shadowOffset: { width: 0, height: 4 },
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  topLeftButton: {
+    top: 44,
+    left: 16,
+  },
+  closeLeftButton: {
+    backgroundColor: 'rgba(33, 37, 41, 0.78)',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    width: 81,
+    height: 36,
+    borderRadius: 18,
+    flexDirection: 'row',
+    gap: 6,
+  },
+  topRightButton: {
+    top: 44,
+    right: 16,
+  },
+  bottomButton: {
+    bottom: Platform.OS == 'android' ? 80 : 100,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+  },
+  bottomLeftButton: {
+    left: 16,
+  },
+  bottomRightButton: {
+    right: 16,
+  },
+  textClose: {
+    fontSize: 12,
+    color: 'white',
+    fontWeight: '500',
+    lineHeight: 14,
+  },
+});

src/theme.ts

@@ -4,4 +4,6 @@ export enum Colors {
   WHITE = '#FFF',
   DARK_LIGHT = '#E5E5E5',
   RED = '#EF5B5B',
+  LIGHT_GRAY = '#C8C8C8',
+  TEXT_GRAY = '#3E6471',
 }

src/utils/mapHelpers.ts

@@ -0,0 +1,44 @@
+import * as turf from '@turf/turf';
+import { Feature } from '@turf/turf';
+
+interface RegionData {
+  type?: string;
+  name?: string;
+  crs?: {
+    type: string;
+    properties: { name: string; };
+  };
+  features?: any;
+}
+
+export const findRegionInDataset = (dataset: RegionData, point: turf.helpers.Position | turf.helpers.Point | turf.helpers.Feature<turf.helpers.Point, turf.helpers.Properties>): Feature | undefined => {
+  return dataset.features.find((region: any) => {
+    const coordinates = region?.geometry?.coordinates;
+    const type = region?.geometry?.type;
+
+    if (!Array.isArray(coordinates) || coordinates.length === 0) {
+      return false;
+    }
+
+    try {
+      const polygon: any = type === 'Polygon'
+        ? turf.polygon(coordinates)
+        : turf.multiPolygon(coordinates);
+
+      return turf.booleanPointInPolygon(point, polygon);
+    } catch (error) {
+      console.error('Error creating polygon:', error);
+      return false;
+    }
+  });
+};
+
+export const calculateMapRegion = (bounds: turf.BBox): any => {
+  const padding = 1;
+  return {
+    latitude: (bounds[1] + bounds[3]) / 2,
+    longitude: (bounds[0] + bounds[2]) / 2,
+    latitudeDelta: Math.abs(bounds[3] - bounds[1]) + padding,
+    longitudeDelta: Math.abs(bounds[2] - bounds[0]) + padding,
+  };
+};