scale bar fixes

src/components/ScaleBar/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { StyleSheet, Text, Dimensions } from 'react-native';
+import { StyleSheet, Text, Dimensions, View } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import { Colors } from 'src/theme';
 
@@ -39,29 +39,15 @@ const SCALE_STEPS_IN_FEET = [
 interface ScaleBarProps {
   zoom: number;
   latitude: number;
-  isVisible: boolean;
   bottom?: any;
 }
 
-const ScaleBar: React.FC<ScaleBarProps> = ({ zoom, latitude, isVisible, bottom = '21%' }) => {
+const ScaleBar: React.FC<ScaleBarProps> = ({ zoom, latitude, bottom = '21%' }) => {
   const metricWidth = useSharedValue(0);
   const imperialWidth = useSharedValue(0);
   const metricText = useSharedValue('');
   const imperialText = useSharedValue('');
   const screenWidth = Dimensions.get('window').width;
-  const opacity = useSharedValue(isVisible ? 1 : 0);
-
-  useEffect(() => {
-    if (isVisible) {
-      opacity.value = withTiming(1, { duration: 100 });
-    } else {
-      opacity.value = withTiming(0, { duration: 1500 });
-    }
-  }, [isVisible]);
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value
-  }));
 
   const getResolutionFromZoomAndLatitude = (zoom: number, latitude: number) =>
     (TILE_SIZE_METERS_AT_0_ZOOM * Math.cos((latitude * Math.PI) / 180)) / Math.pow(2, zoom);
@@ -117,7 +103,7 @@ const ScaleBar: React.FC<ScaleBarProps> = ({ zoom, latitude, isVisible, bottom =
   if (!metricText.value || !imperialText.value) return null;
 
   return (
-    <Animated.View style={[styles.container, { bottom }, animatedStyle]}>
+    <View style={[styles.container, { bottom }]}>
       <Text style={[styles.text, { bottom: 0 }]}>{metricText.value}</Text>
 
       <Animated.View style={[styles.scaleBar, animatedCombinedStyle]}>
@@ -126,7 +112,7 @@ const ScaleBar: React.FC<ScaleBarProps> = ({ zoom, latitude, isVisible, bottom =
       </Animated.View>
 
       <Text style={[styles.text, { top: 0 }]}>{imperialText.value}</Text>
-    </Animated.View>
+    </View>
   );
 };
 
@@ -152,7 +138,7 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: '500',
     textAlign: 'center',
-    color: Colors.TEXT_GRAY,
+    color: Colors.DARK_BLUE,
     marginVertical: 4,
     position: 'absolute',
     left: 0

src/screens/InAppScreens/MapScreen/index.tsx

@@ -394,8 +394,6 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
   const [selectedUser, setSelectedUser] = useState<any>(null);
   const [zoom, setZoom] = useState(0);
   const [center, setCenter] = useState<number[] | null>(null);
-  const [isZooming, setIsZooming] = useState(true);
-  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const isSmallScreen = Dimensions.get('window').width < 383;
   const processedImages = useRef(new Set<string>());
@@ -734,9 +732,6 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
 
   const handleMapChange = async () => {
     if (!mapRef.current) return;
-    if (hideTimer.current) clearTimeout(hideTimer.current);
-
-    setIsZooming(true);
 
     const currentZoom = await mapRef.current.getZoom();
     const currentCenter = await mapRef.current.getCenter();
@@ -859,10 +854,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
   };
 
   const handleRegionDidChange = async (feature: GeoJSON.Feature<GeoJSON.Point, any>) => {
-    hideTimer.current = setTimeout(() => {
-      setIsZooming(false);
-    }, 2000);
-    
+    handleMapChange();    
     if (!feature) return;
     const { zoomLevel } = feature.properties;
     const { coordinates } = feature.geometry;
@@ -1482,7 +1474,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
       </MapLibreGL.MapView>
 
       {center ? (
-        <ScaleBar zoom={zoom} latitude={center[1]} isVisible={isZooming} />
+        <ScaleBar zoom={zoom} latitude={center[1]} bottom={tabBarHeight + 80} />
       ) : null}
 
       {regionPopupVisible && regionData ? (
@@ -1642,6 +1634,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                 active={seriesFilter.visible}
               />
               {/* {isFeatureActive && isFeatureActive.active ? ( */}
+              {token ? (
                 <MapButton
                   onPress={() => {
                     setIsFilterVisible('nomads');
@@ -1651,7 +1644,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                   text="Nomads"
                   active={showNomads}
                 />
-              {/* ) : null} */}
+              ) : null}
             </ScrollView>
           </View>
 

src/screens/InAppScreens/ProfileScreen/UsersMap/index.tsx

@@ -179,8 +179,6 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
 
   const [zoom, setZoom] = useState(0);
   const [center, setCenter] = useState<number[] | null>(null);
-  const [isZooming, setIsZooming] = useState(true);
-  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const { data: visitedRegionIds } = usePostGetVisitedRegionsIdsQuery(
     token,
@@ -228,9 +226,6 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
 
   const handleMapChange = async () => {
     if (!mapRef.current) return;
-    if (hideTimer.current) clearTimeout(hideTimer.current);
-
-    setIsZooming(true);
 
     const currentZoom = await mapRef.current.getZoom();
     const currentCenter = await mapRef.current.getCenter();
@@ -347,11 +342,7 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
         styleJSON={VECTOR_MAP_HOST + '/nomadmania-maps.json'}
         rotateEnabled={false}
         attributionEnabled={false}
-        onRegionDidChange={() =>
-          (hideTimer.current = setTimeout(() => {
-            setIsZooming(false);
-          }, 2000))
-        }
+        onRegionDidChange={handleMapChange}
         onRegionIsChanging={handleMapChange}
         onRegionWillChange={_.debounce(handleMapChange, 200)}
       >
@@ -456,7 +447,7 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
       </MapLibreGL.MapView>
 
       {center ? (
-        <ScaleBar zoom={zoom} latitude={center[1]} bottom={'12%'} isVisible={isZooming} />
+        <ScaleBar zoom={zoom} latitude={center[1]} bottom={80} />
       ) : null}
 
       {!isExpanded ? (