fixes

src/components/PageWrapper/index.tsx

@@ -10,5 +10,9 @@ type Props = {
 };
 
 export const PageWrapper: FC<Props> = ({ children, style }) => {
-  return <SafeAreaView style={[styles.wrapper, style]}>{children}</SafeAreaView>;
+  return (
+    <SafeAreaView style={[styles.wrapper, style]} edges={['top']}>
+      {children}
+    </SafeAreaView>
+  );
 };

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

@@ -486,10 +486,10 @@ const FilterModal = ({
     if (!isSharing) {
       handleGetLocation();
     } else {
+      setIsSharing(false);
       setSettings({ token, sharing: 0 });
       setShowNomads && setShowNomads(false);
       storage.set('showNomads', false);
-      setIsSharing(false);
     }
   };
 
@@ -506,16 +506,23 @@ const FilterModal = ({
   };
 
   const getLocation = async () => {
-    let currentLocation = await Location.getCurrentPositionAsync({
-      accuracy: Location.Accuracy.Balanced
-    });
-    setSettings({ token, sharing: 1 });
     setIsSharing(true);
-    updateLocation({
-      token,
-      lat: currentLocation.coords.latitude,
-      lng: currentLocation.coords.longitude
-    });
+    setSettings(
+      { token, sharing: 1 },
+      {
+        onSuccess: async () => {
+          let currentLocation = await Location.getCurrentPositionAsync({
+            accuracy: Location.Accuracy.Balanced
+          });
+
+          updateLocation({
+            token,
+            lat: currentLocation.coords.latitude,
+            lng: currentLocation.coords.longitude
+          });
+        }
+      }
+    );
   };
 
   const handleAcceptPermission = async () => {

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

@@ -53,10 +53,10 @@ const UserItem = ({ marker }: { marker: any }) => {
               </View>
               <View style={styles.calloutTextContainer}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                  <Image source={{ uri: marker.flag.uri }} style={styles.flag} resizeMode="cover" />
                   <Text style={styles.seriesName}>
                     {marker.first_name + ' ' + marker.last_name}
                   </Text>
-                  <Image source={{ uri: marker.flag.uri }} style={styles.flag} resizeMode="cover" />
                 </View>
                 <Text style={styles.markerName}>
                   Last seen: {formatDateToLocalTime(marker.last_seen)}
@@ -70,7 +70,7 @@ const UserItem = ({ marker }: { marker: any }) => {
                   )
                 }
               >
-                <Text style={styles.calloutButtonText}>Go to profile</Text>
+                <Text style={styles.calloutButtonText}>See profile</Text>
               </TouchableOpacity>
             </View>
           </View>
@@ -99,10 +99,10 @@ const UserItem = ({ marker }: { marker: any }) => {
               </View>
               <View style={styles.calloutTextContainer}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                  <Image source={{ uri: marker.flag.uri }} style={styles.flag} resizeMode="cover" />
                   <Text style={styles.seriesName}>
                     {marker.first_name + ' ' + marker.last_name}
                   </Text>
-                  <Image source={{ uri: marker.flag.uri }} style={styles.flag} resizeMode="cover" />
                 </View>
 
                 <Text style={styles.markerName}>
@@ -117,7 +117,7 @@ const UserItem = ({ marker }: { marker: any }) => {
                   )
                 }
               >
-                <Text style={styles.calloutButtonText}>Go to profile</Text>
+                <Text style={styles.calloutButtonText}>See profile</Text>
               </TouchableOpacity>
             </View>
           </View>

src/screens/InAppScreens/MapScreen/index.tsx

@@ -373,7 +373,14 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
 
   useEffect(() => {
     if (usersLocation) {
-      setNomads(usersLocation.geojson);
+      const filteredNomads: GeoJSON.FeatureCollection = {
+        type: 'FeatureCollection',
+        features: usersLocation.geojson.features.filter(
+          (feature: GeoJSON.Feature) => feature.properties?.id !== +userId
+        )
+      };
+
+      setNomads(filteredNomads);
     }
   }, [usersLocation]);
 
@@ -551,7 +558,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
   useEffect(() => {
     (async () => {
       let { status } = await Location.getForegroundPermissionsAsync();
-      if (status !== 'granted' || !token || !locationSettings || locationSettings.sharing === 0) {
+      if (status !== 'granted' || !token || (locationSettings && locationSettings.sharing === 0)) {
         setShowNomads(false);
         storage.set('showNomads', false);
         setNomads(null);
@@ -562,12 +569,14 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         accuracy: Location.Accuracy.Balanced
       });
       setLocation(currentLocation.coords);
-      updateLocation({
-        token,
-        lat: currentLocation.coords.latitude,
-        lng: currentLocation.coords.longitude
-      });
+
       if (showNomads && token) {
+        updateLocation({
+          token,
+          lat: currentLocation.coords.latitude,
+          lng: currentLocation.coords.longitude
+        });
+
         refetchUsersLocation();
       }
     })();
@@ -807,12 +816,14 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
       accuracy: Location.Accuracy.Balanced
     });
     setLocation(currentLocation.coords);
-    updateLocation({
-      token,
-      lat: currentLocation.coords.latitude,
-      lng: currentLocation.coords.longitude
-    });
+
     if (showNomads && token) {
+      updateLocation({
+        token,
+        lat: currentLocation.coords.latitude,
+        lng: currentLocation.coords.longitude
+      });
+
       refetchUsersLocation();
     }
     if (currentLocation.coords) {
@@ -1230,7 +1241,47 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         </MapLibreGL.VectorSource>
 
         {nomads && showNomads && (
-          <MapLibreGL.ShapeSource id="nomads" shape={nomads} onPress={handleUserPress}>
+          <MapLibreGL.ShapeSource
+            id="nomads"
+            shape={nomads}
+            onPress={(event) => {
+              const isCluster = event.features[0].properties?.cluster;
+
+              if (isCluster) {
+                return;
+              } else {
+                handleUserPress(event);
+              }
+            }}
+            cluster={true}
+            clusterRadius={20}
+          >
+            <MapLibreGL.CircleLayer
+              id="nomads_circle"
+              filter={['has', 'point_count']}
+              style={{
+                circleRadius: ['step', ['get', 'point_count'], 15, 10, 20, 30, 25],
+                circleColor: 'rgba(255, 126, 0, 1)',
+                circleStrokeWidth: 2,
+                circleStrokeColor: '#FFFFFF',
+                circleOpacity: 1
+              }}
+            />
+            <MapLibreGL.SymbolLayer
+              id="nomads_count"
+              filter={['has', 'point_count']}
+              style={{
+                textField: ['get', 'point_count'],
+                textFont: ['Noto Sans Bold'],
+                textSize: 12,
+                textColor: '#FFFFFF',
+                textHaloColor: '#000000',
+                textHaloWidth: 1,
+                textAnchor: 'center',
+                textOffset: [0, 0],
+                textAllowOverlap: true
+              }}
+            />
             <MapLibreGL.SymbolLayer
               id="nomads_symbol"
               style={{