blank map/screen jumps fix

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

@@ -127,7 +127,14 @@ const FilterModal = ({
     if (isLogged && !isPublicView) {
       try {
         const filterSettings = {
-          type: tilesType.value === 2 ? 'dare' : tilesType.value === 1 ? 'countries' : 'regions',
+          type:
+            tilesType.value === 2
+              ? 'dare'
+              : tilesType.value === 1
+                ? 'countries'
+                : tilesType.value === -1
+                  ? 'blank'
+                  : 'regions',
           tilesType,
           selectedYear,
           selectedVisible,
@@ -230,7 +237,7 @@ const FilterModal = ({
             </View>
           </View>
 
-          {tilesType.value !== 2 && allYears.length && isLogged ? (
+          {tilesType.value !== 2 && tilesType.value !== -1 && allYears.length && isLogged ? (
             <View style={styles.rowWrapper}>
               <View style={styles.dropdownWrapper}>
                 <Dropdown
@@ -275,7 +282,13 @@ const FilterModal = ({
               saveFilterSettings();
               handleApplyFilter();
               setType(
-                tilesType.value === 2 ? 'dare' : tilesType.value === 1 ? 'countries' : 'regions'
+                tilesType.value === 2
+                  ? 'dare'
+                  : tilesType.value === 1
+                    ? 'countries'
+                    : tilesType.value === -1
+                      ? 'blank'
+                      : 'regions'
               );
               handleCloseFilter();
             }}

src/screens/InAppScreens/MapScreen/index.tsx

@@ -18,7 +18,6 @@ import { styles } from './style';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Colors } from 'src/theme';
 import { storage, StoreType } from 'src/storage';
-import { RegionPayload } from '@maplibre/maplibre-react-native/javascript/components/MapView';
 import * as turf from '@turf/turf';
 import * as Location from 'expo-location';
 import { Image as ExpoImage } from 'expo-image';
@@ -275,11 +274,12 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
 
   const [tilesType, setTilesType] = useState({ label: 'NM regions', value: 0 });
   const tilesTypes = [
+    { label: 'Blank', value: -1 },
     { label: 'NM regions', value: 0 },
     { label: 'UN countries', value: 1 },
     { label: 'DARE places', value: 2 }
   ];
-  const [type, setType] = useState<'regions' | 'countries' | 'dare'>('regions');
+  const [type, setType] = useState<'regions' | 'countries' | 'dare' | 'blank'>('regions');
   const [seriesFilter, setSeriesFilter] = useState<any>({
     visible: true,
     groups: [],
@@ -724,6 +724,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
       closeCallout();
       return;
     }
+    if (type === 'blank') return;
     try {
       const { screenPointX, screenPointY } = event.properties;
 
@@ -830,7 +831,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
     }
   };
 
-  const handleRegionDidChange = async (feature: GeoJSON.Feature<GeoJSON.Point, RegionPayload>) => {
+  const handleRegionDidChange = async (feature: GeoJSON.Feature<GeoJSON.Point, any>) => {
     if (!feature) return;
     const { zoomLevel } = feature.properties;
     const { coordinates } = feature.geometry;
@@ -1592,6 +1593,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                 }}
                 icon={TravelsIcon}
                 text="Travels"
+                active={type !== 'blank'}
               />
               <MapButton
                 onPress={() => {

src/screens/InAppScreens/MessagesScreen/index.tsx

@@ -13,7 +13,6 @@ import {
   AvatarWithInitials,
   HorizontalTabView,
   Input,
-  PageWrapper,
   WarningModal
 } from 'src/components';
 import { NAVIGATION_PAGES } from 'src/types';
@@ -44,6 +43,7 @@ import BellSlashIcon from 'assets/icons/messages/bell-slash.svg';
 import BanIcon from 'assets/icons/messages/ban.svg';
 import SwipeableBlockedRow from './Components/SwipeableBlockedRow';
 import { useMessagesStore } from 'src/stores/unreadMessagesStore';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const TypingIndicator = () => {
   const [dots, setDots] = useState('');
@@ -65,6 +65,7 @@ const TypingIndicator = () => {
 };
 
 const MessagesScreen = () => {
+  const insets = useSafeAreaInsets();
   const navigation = useNavigation();
   const token = storage.get('token', StoreType.STRING) as string;
   const [chats, setChats] = useState<Chat[]>([]);
@@ -420,7 +421,7 @@ const MessagesScreen = () => {
   };
 
   return (
-    <PageWrapper style={{ flex: 1, marginLeft: 0, marginRight: 0, gap: 12 }}>
+    <View style={{ paddingTop: insets.top, flex: 1, marginLeft: 0, marginRight: 0, gap: 12 }}>
       <View style={styles.header}>
         <View style={{ width: 30 }} />
         <Text style={styles.title}>Messages</Text>
@@ -489,7 +490,7 @@ const MessagesScreen = () => {
         message={isWarningModalVisible?.message}
         action={isWarningModalVisible?.action}
       />
-    </PageWrapper>
+    </View>
   );
 };
 

src/screens/InAppScreens/TravellersScreen/index.tsx

@@ -3,7 +3,6 @@ import { View, Text, FlatList, TouchableOpacity, StyleSheet, Dimensions } from '
 import { useNavigation } from '@react-navigation/native';
 
 import { Colors } from '../../../theme';
-import { PageWrapper } from '../../../components';
 import { NAVIGATION_PAGES } from 'src/types';
 import { StoreType, storage } from 'src/storage';
 
@@ -20,10 +19,12 @@ import FriendsIcon from 'assets/icons/friends.svg';
 import BlinkingDot from 'src/components/BlinkingDot';
 import { useNotification } from 'src/contexts/NotificationContext';
 import { getFontSize } from 'src/utils';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const TravellersScreen = () => {
   const navigation = useNavigation();
   const token = storage.get('token', StoreType.STRING);
+  const insets = useSafeAreaInsets();
   const { isNotificationActive } = useNotification();
 
   const buttons = [
@@ -61,7 +62,7 @@ const TravellersScreen = () => {
   );
 
   return (
-    <PageWrapper>
+    <View style={{ paddingTop: insets.top, marginLeft: '5%', marginRight: '5%', height: '100%' }}>
       <View style={styles.header}>
         <View style={{ width: 30 }} />
         <Text style={styles.title}>Nomads</Text>
@@ -82,7 +83,7 @@ const TravellersScreen = () => {
         style={{ flex: 1 }}
         columnWrapperStyle={{ justifyContent: 'space-between' }}
       />
-    </PageWrapper>
+    </View>
   );
 };
 

src/screens/InAppScreens/TravelsScreen/index.tsx

@@ -3,7 +3,7 @@ import { View, Text, FlatList, TouchableOpacity, StyleSheet, Dimensions } from '
 import { useNavigation } from '@react-navigation/native';
 
 import { Colors } from '../../../theme';
-import { PageWrapper, WarningModal } from '../../../components';
+import { WarningModal } from '../../../components';
 import { NAVIGATION_PAGES } from 'src/types';
 import { storage, StoreType } from '../../../storage';
 
@@ -17,9 +17,11 @@ import ImagesIcon from '../../../../assets/icons/travels-section/images.svg';
 import FixersIcon from '../../../../assets/icons/travels-section/fixers.svg';
 import InfoIcon from 'assets/icons/info-solid.svg';
 import { getFontSize } from 'src/utils';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const TravelsScreen = () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
+  const insets = useSafeAreaInsets();
   const token = storage.get('token', StoreType.STRING);
   const navigation = useNavigation();
 
@@ -61,7 +63,7 @@ const TravelsScreen = () => {
   );
 
   return (
-    <PageWrapper>
+    <View style={{ paddingTop: insets.top, marginLeft: '5%', marginRight: '5%', height: '100%' }}>
       <View style={styles.header}>
         <View style={{ width: 30 }} />
         <Text style={styles.title}>Travels</Text>
@@ -86,7 +88,7 @@ const TravelsScreen = () => {
         isVisible={isModalVisible}
         onClose={() => setIsModalVisible(false)}
       />
-    </PageWrapper>
+    </View>
   );
 };