maplibre deprecations fix

src/database/tilesService/index.ts

@@ -1,5 +1,5 @@
 import * as FileSystem from 'expo-file-system';
-import MapLibreGL from '@maplibre/maplibre-react-native';
+import * as MapLibreRN from '@maplibre/maplibre-react-native';
 
 import { VECTOR_MAP_HOST } from 'src/constants';
 
@@ -27,7 +27,7 @@ async function setupOfflineRegion(): Promise<void> {
     const minZoom = 0;
     const maxZoom = 6;
 
-    const existingPacks = await MapLibreGL.offlineManager.getPacks();
+    const existingPacks = await MapLibreRN.OfflineManager.getPacks();
     const pack = existingPacks.find((pack) => pack.name === PACK_NAME);
 
     if (pack) {
@@ -36,7 +36,7 @@ async function setupOfflineRegion(): Promise<void> {
         pack.resume();
       }
     } else {
-      await MapLibreGL.offlineManager.createPack(
+      await MapLibreRN.OfflineManager.createPack(
         {
           name: PACK_NAME,
           bounds,

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

@@ -5,7 +5,7 @@ import { styles } from './styles';
 import { Colors } from 'src/theme';
 
 import CheckSvg from 'assets/icons/mark.svg';
-import MapLibreGL, { PointAnnotationRef } from '@maplibre/maplibre-react-native';
+import * as MapLibreRN from '@maplibre/maplibre-react-native';
 import { Position } from '@turf/turf';
 
 const MarkerItem = ({
@@ -17,7 +17,7 @@ const MarkerItem = ({
   toggleSeries: (item: any) => void;
   token: string;
 }) => {
-  const calloutRef = useRef<PointAnnotationRef>(null);
+  const calloutRef = useRef<MapLibreRN.PointAnnotationRef>(null);
   useEffect(() => {
     if (Platform.OS === 'android' && calloutRef.current) {
       calloutRef.current?.refresh();
@@ -26,7 +26,7 @@ const MarkerItem = ({
   return (
     <>
       {Platform.OS === 'ios' ? (
-        <MapLibreGL.PointAnnotation
+        <MapLibreRN.PointAnnotation
           id="selected_marker_callout"
           coordinate={marker.coordinates}
           anchor={{ x: 0.5, y: 1 }}
@@ -70,9 +70,9 @@ const MarkerItem = ({
               </TouchableOpacity>
             </View>
           </View>
-        </MapLibreGL.PointAnnotation>
+        </MapLibreRN.PointAnnotation>
       ) : (
-        <MapLibreGL.PointAnnotation
+        <MapLibreRN.PointAnnotation
           id="selected_marker_callout"
           coordinate={marker.coordinates}
           anchor={{ x: 0.5, y: 0.9 }}
@@ -119,7 +119,7 @@ const MarkerItem = ({
               </TouchableOpacity>
             </View>
           </View>
-        </MapLibreGL.PointAnnotation>
+        </MapLibreRN.PointAnnotation>
       )}
     </>
   );

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

@@ -3,14 +3,14 @@ import { View, Image, Text, TouchableOpacity, Platform } from 'react-native';
 
 import { Colors } from 'src/theme';
 
-import MapLibreGL, { PointAnnotationRef } from '@maplibre/maplibre-react-native';
+import * as MapLibreRN from '@maplibre/maplibre-react-native';
 import { useNavigation } from '@react-navigation/native';
 import { NAVIGATION_PAGES } from 'src/types';
 import moment from 'moment';
 import { styles } from '../MarkerItem/styles';
 
 const UserItem = ({ marker }: { marker: any }) => {
-  const calloutUserRef = useRef<PointAnnotationRef>(null);
+  const calloutUserRef = useRef<MapLibreRN.PointAnnotationRef>(null);
   const navigation = useNavigation();
 
   useEffect(() => {
@@ -37,7 +37,7 @@ const UserItem = ({ marker }: { marker: any }) => {
   return (
     <>
       {Platform.OS === 'ios' ? (
-        <MapLibreGL.PointAnnotation
+        <MapLibreRN.PointAnnotation
           id={marker.id.toString()}
           coordinate={marker.coordinates}
           anchor={{ x: 0.5, y: 0 }}
@@ -98,9 +98,9 @@ const UserItem = ({ marker }: { marker: any }) => {
               </TouchableOpacity>
             </View>
           </View>
-        </MapLibreGL.PointAnnotation>
+        </MapLibreRN.PointAnnotation>
       ) : (
-        <MapLibreGL.PointAnnotation
+        <MapLibreRN.PointAnnotation
           id="selected_user_callout"
           coordinate={marker.coordinates}
           anchor={{ x: 0.5, y: 1.1 }}
@@ -158,7 +158,7 @@ const UserItem = ({ marker }: { marker: any }) => {
               </TouchableOpacity>
             </View>
           </View>
-        </MapLibreGL.PointAnnotation>
+        </MapLibreRN.PointAnnotation>
       )}
     </>
   );

src/screens/InAppScreens/MapScreen/index.tsx

@@ -13,7 +13,7 @@ import {
 } from 'react-native';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 
-import MapLibreGL, { CameraRef, MapViewRef, ShapeSourceRef } from '@maplibre/maplibre-react-native';
+import * as MapLibreRN from '@maplibre/maplibre-react-native';
 import { styles } from './style';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Colors } from 'src/theme';
@@ -88,8 +88,7 @@ const defaultUserAvatar = require('assets/icon-user-share-location-solid.png');
 const logo = require('assets/logo-ua.png');
 const defaultSeriesIcon = require('assets/series-default.png');
 
-MapLibreGL.setAccessToken(null);
-MapLibreGL.Logger.setLogLevel('error');
+MapLibreRN.Logger.setLogLevel('error');
 
 const generateFilter = (ids: number[]) => {
   return ids?.length ? ['any', ...ids.map((id) => ['==', 'id', id])] : ['==', 'id', -1];
@@ -670,9 +669,9 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
     }, [regionPopupVisible, navigation])
   );
 
-  const mapRef = useRef<MapViewRef>(null);
-  const cameraRef = useRef<CameraRef>(null);
-  const shapeSourceRef = useRef<ShapeSourceRef>(null);
+  const mapRef = useRef<MapLibreRN.MapViewRef>(null);
+  const cameraRef = useRef<MapLibreRN.CameraRef>(null);
+  const shapeSourceRef = useRef<MapLibreRN.ShapeSourceRef>(null);
 
   useEffect(() => {
     if (userInfo) {
@@ -1164,7 +1163,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
     <SafeAreaView style={{ height: '100%' }}>
       <StatusBar translucent backgroundColor="transparent" />
 
-      <MapLibreGL.MapView
+      <MapLibreRN.MapView
         ref={mapRef}
         style={styles.map}
         mapStyle={VECTOR_MAP_HOST + '/nomadmania-maps.json'}
@@ -1175,7 +1174,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         onRegionIsChanging={handleMapChange}
         onRegionWillChange={_.debounce(handleMapChange, 200)}
       >
-        <MapLibreGL.Images
+        <MapLibreRN.Images
           images={images}
           onImageMissing={(image) => {
             if (processedImages.current.has(image)) {
@@ -1190,11 +1189,11 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
           }}
         >
           <View />
-        </MapLibreGL.Images>
+        </MapLibreRN.Images>
 
         {type === 'regions' && (
           <>
-            <MapLibreGL.LineLayer
+            <MapLibreRN.LineLayer
               id="nm-regions-line-layer"
               sourceID={regions.source}
               sourceLayerID={regions['source-layer']}
@@ -1207,7 +1206,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
               }}
               belowLayerID="waterway-name"
             />
-            <MapLibreGL.FillLayer
+            <MapLibreRN.FillLayer
               id={regions.id}
               sourceID={regions.source}
               sourceLayerID={regions['source-layer']}
@@ -1216,7 +1215,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
               maxZoomLevel={regions.maxzoom}
               belowLayerID={regions_visited.id}
             />
-            <MapLibreGL.FillLayer
+            <MapLibreRN.FillLayer
               id={regions_visited.id}
               sourceID={regions_visited.source}
               sourceLayerID={regions_visited['source-layer']}
@@ -1229,7 +1228,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         )}
         {type === 'countries' && (
           <>
-            <MapLibreGL.LineLayer
+            <MapLibreRN.LineLayer
               id="countries-line-layer"
               sourceID={countries.source}
               sourceLayerID={countries['source-layer']}
@@ -1242,7 +1241,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
               }}
               belowLayerID="waterway-name"
             />
-            <MapLibreGL.FillLayer
+            <MapLibreRN.FillLayer
               id={countries.id}
               sourceID={countries.source}
               sourceLayerID={countries['source-layer']}
@@ -1251,7 +1250,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
               maxZoomLevel={countries.maxzoom}
               belowLayerID={countries_visited.id}
             />
-            <MapLibreGL.FillLayer
+            <MapLibreRN.FillLayer
               id={countries_visited.id}
               sourceID={countries_visited.source}
               sourceLayerID={countries_visited['source-layer']}
@@ -1264,7 +1263,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         )}
         {type === 'dare' && (
           <>
-            <MapLibreGL.FillLayer
+            <MapLibreRN.FillLayer
               id={dare.id}
               sourceID={dare.source}
               sourceLayerID={dare['source-layer']}
@@ -1273,7 +1272,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
               maxZoomLevel={dare.maxzoom}
               belowLayerID={dare_visited.id}
             />
-            <MapLibreGL.FillLayer
+            <MapLibreRN.FillLayer
               id={dare_visited.id}
               sourceID={dare_visited.source}
               sourceLayerID={dare_visited['source-layer']}
@@ -1285,7 +1284,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
           </>
         )}
         {selectedRegion && type && (
-          <MapLibreGL.FillLayer
+          <MapLibreRN.FillLayer
             id={selected_region.id}
             sourceID={type}
             sourceLayerID={type}
@@ -1296,13 +1295,13 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
           />
         )}
 
-        <MapLibreGL.VectorSource
+        <MapLibreRN.VectorSource
           id="nomadmania_series"
           tileUrlTemplates={[VECTOR_MAP_HOST + '/tiles/series/{z}/{x}/{y}.pbf']}
           onPress={handleMarkerPress}
         >
           {seriesFilter.status !== 1 && Object.keys(images).length > 0 ? (
-            <MapLibreGL.SymbolLayer
+            <MapLibreRN.SymbolLayer
               id={series_layer.id}
               sourceID={series_layer.source}
               sourceLayerID={series_layer['source-layer']}
@@ -1329,7 +1328,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
           )}
 
           {seriesFilter.status !== 0 && Object.keys(images).length > 0 ? (
-            <MapLibreGL.SymbolLayer
+            <MapLibreRN.SymbolLayer
               id={series_visited.id}
               sourceID={series_visited.source}
               sourceLayerID={series_visited['source-layer']}
@@ -1354,10 +1353,10 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
           ) : (
             <></>
           )}
-        </MapLibreGL.VectorSource>
+        </MapLibreRN.VectorSource>
 
         {nomads && showNomads && (
-          <MapLibreGL.ShapeSource
+          <MapLibreRN.ShapeSource
             ref={shapeSourceRef}
             tolerance={20}
             id="nomads"
@@ -1388,7 +1387,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
             cluster={true}
             clusterRadius={50}
           >
-            <MapLibreGL.CircleLayer
+            <MapLibreRN.CircleLayer
               id="nomads_circle"
               filter={['has', 'point_count']}
               aboveLayerID={Platform.OS === 'android' ? 'place-continent' : undefined}
@@ -1416,7 +1415,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                 circleOpacity: 1
               }}
             />
-            <MapLibreGL.SymbolLayer
+            <MapLibreRN.SymbolLayer
               id="nomads_count"
               filter={['has', 'point_count']}
               aboveLayerID={Platform.OS === 'android' ? 'nomads_circle' : undefined}
@@ -1442,7 +1441,7 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                 textAllowOverlap: true
               }}
             />
-            <MapLibreGL.SymbolLayer
+            <MapLibreRN.SymbolLayer
               id="nomads_symbol"
               filter={['!', ['has', 'point_count']]}
               aboveLayerID={Platform.OS === 'android' ? 'place-continent' : undefined}
@@ -1465,8 +1464,8 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
                 ],
                 iconAllowOverlap: true
               }}
-            ></MapLibreGL.SymbolLayer>
-          </MapLibreGL.ShapeSource>
+            ></MapLibreRN.SymbolLayer>
+          </MapLibreRN.ShapeSource>
         )}
 
         {selectedUser && <UserItem marker={selectedUser} />}
@@ -1474,9 +1473,9 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
         {selectedMarker && (
           <MarkerItem marker={selectedMarker} toggleSeries={toggleSeries} token={token} />
         )}
-        <MapLibreGL.Camera ref={cameraRef} />
+        <MapLibreRN.Camera ref={cameraRef} />
         {location && (
-          <MapLibreGL.UserLocation
+          <MapLibreRN.UserLocation
             animated={true}
             showsUserHeadingIndicator={true}
             onPress={async () => {
@@ -1492,9 +1491,9 @@ const MapScreen: any = ({ navigation, route }: { navigation: any; route: any })
             }}
           >
             {/* to do custom user location */}
-          </MapLibreGL.UserLocation>
+          </MapLibreRN.UserLocation>
         )}
-      </MapLibreGL.MapView>
+      </MapLibreRN.MapView>
 
       {center ? (
         <ScaleBar

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

@@ -35,7 +35,7 @@ import { useGetUniversalSearch } from '@api/search';
 import { storage, StoreType } from 'src/storage';
 import { NAVIGATION_PAGES } from 'src/types';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import MapLibreGL, { CameraRef, MapViewRef } from '@maplibre/maplibre-react-native';
+import * as MapLibreRN from '@maplibre/maplibre-react-native';
 import {
   usePostGetVisitedCountriesIdsQuery,
   usePostGetVisitedDareIdsQuery,
@@ -49,8 +49,6 @@ import ScaleBar from 'src/components/ScaleBar';
 import _ from 'lodash';
 const defaultUserAvatar = require('assets/icon-user-share-location-solid.png');
 
-MapLibreGL.setAccessToken(null);
-
 const generateFilter = (ids: number[]) => {
   return ids.length ? ['any', ...ids.map((id) => ['==', 'id', id])] : ['==', 'id', -1];
 };
@@ -155,8 +153,8 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
     year: moment().year()
   });
 
-  const mapRef = useRef<MapViewRef>(null);
-  const cameraRef = useRef<CameraRef>(null);
+  const mapRef = useRef<MapLibreRN.MapViewRef>(null);
+  const cameraRef = useRef<MapLibreRN.CameraRef>(null);
   const [isFilterVisible, setIsFilterVisible] = useState<string | null>(null);
   const [tilesType, setTilesType] = useState({ label: 'NM regions', value: 0 });
   const tilesTypes = [
@@ -365,10 +363,10 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
     <SafeAreaView style={{ height: '100%' }}>
       <StatusBar translucent backgroundColor="transparent" />
 
-      <MapLibreGL.MapView
+      <MapLibreRN.MapView
         ref={mapRef}
         style={styles.map}
-        styleJSON={VECTOR_MAP_HOST + '/nomadmania-maps.json'}
+        mapStyle={VECTOR_MAP_HOST + '/nomadmania-maps.json'}
         rotateEnabled={false}
         attributionEnabled={false}
         onRegionDidChange={() => {
@@ -381,7 +379,7 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
       >
         {type === 'regions' && (
           <>
-            <MapLibreGL.LineLayer
+            <MapLibreRN.LineLayer
               id="nm-regions-line-layer"
               sourceID={regions.source}
               sourceLayerID={regions['source-layer']}
@@ -394,7 +392,7 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
               }}
               belowLayerID="waterway-name"
             />
-            <MapLibreGL.FillLayer
+            <MapLibreRN.FillLayer
               id={regions.id}
               sourceID={regions.source}
               sourceLayerID={regions['source-layer']}
@@ -403,7 +401,7 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
               maxZoomLevel={regions.maxzoom}
               belowLayerID={regions_visited.id}
             />
-            <MapLibreGL.FillLayer
+            <MapLibreRN.FillLayer
               id={regions_visited.id}
               sourceID={regions_visited.source}
               sourceLayerID={regions_visited['source-layer']}
@@ -416,7 +414,7 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
         )}
         {type === 'countries' && (
           <>
-            <MapLibreGL.LineLayer
+            <MapLibreRN.LineLayer
               id="countries-line-layer"
               sourceID={countries.source}
               sourceLayerID={countries['source-layer']}
@@ -429,7 +427,7 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
               }}
               belowLayerID="waterway-name"
             />
-            <MapLibreGL.FillLayer
+            <MapLibreRN.FillLayer
               id={countries.id}
               sourceID={countries.source}
               sourceLayerID={countries['source-layer']}
@@ -438,7 +436,7 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
               maxZoomLevel={countries.maxzoom}
               belowLayerID={countries_visited.id}
             />
-            <MapLibreGL.FillLayer
+            <MapLibreRN.FillLayer
               id={countries_visited.id}
               sourceID={countries_visited.source}
               sourceLayerID={countries_visited['source-layer']}
@@ -451,7 +449,7 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
         )}
         {type === 'dare' && (
           <>
-            <MapLibreGL.FillLayer
+            <MapLibreRN.FillLayer
               id={dare.id}
               sourceID={dare.source}
               sourceLayerID={dare['source-layer']}
@@ -460,7 +458,7 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
               maxZoomLevel={dare.maxzoom}
               belowLayerID={dare_visited.id}
             />
-            <MapLibreGL.FillLayer
+            <MapLibreRN.FillLayer
               id={dare_visited.id}
               sourceID={dare_visited.source}
               sourceLayerID={dare_visited['source-layer']}
@@ -473,8 +471,8 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
         )}
 
         {data.location_sharing && data.location_last_seen_location && data.own_profile !== 1 && (
-          <MapLibreGL.ShapeSource id="user_location" shape={locationFeature}>
-            <MapLibreGL.SymbolLayer
+          <MapLibreRN.ShapeSource id="user_location" shape={locationFeature}>
+            <MapLibreRN.SymbolLayer
               id="user_symbol"
               filter={['!', ['has', 'point_count']]}
               aboveLayerID={Platform.OS === 'android' ? 'place-continent' : undefined}
@@ -498,17 +496,17 @@ const UsersMapScreen: FC<Props> = ({ navigation, route }) => {
                 iconAllowOverlap: true
               }}
             />
-          </MapLibreGL.ShapeSource>
+          </MapLibreRN.ShapeSource>
         )}
 
-        <MapLibreGL.Camera ref={cameraRef} />
+        <MapLibreRN.Camera ref={cameraRef} />
         {location && (
-          <MapLibreGL.UserLocation
+          <MapLibreRN.UserLocation
             animated={true}
             showsUserHeadingIndicator={true}
-          ></MapLibreGL.UserLocation>
+          ></MapLibreRN.UserLocation>
         )}
-      </MapLibreGL.MapView>
+      </MapLibreRN.MapView>
 
       {center ? (
         <ScaleBar zoom={zoom} latitude={center[1]} isVisible={isZooming} bottom={80} />

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

@@ -3,7 +3,7 @@ import { View, Text, TouchableOpacity } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useNavigation } from '@react-navigation/native';
 import * as turf from '@turf/turf';
-import MapLibreGL, { CameraRef, MapViewRef } from '@maplibre/maplibre-react-native';
+import * as MapLibreRN from '@maplibre/maplibre-react-native';
 
 import { Header, Modal, FlatList as List } from 'src/components';
 
@@ -18,8 +18,6 @@ import { styles } from './styles';
 import SearchSvg from '../../../../../assets/icons/search.svg';
 import SaveSvg from '../../../../../assets/icons/travels-screens/save.svg';
 
-MapLibreGL.setAccessToken(null);
-
 const generateFilter = (ids: number[]) => {
   return ids?.length ? ['any', ...ids.map((id) => ['==', 'id', id])] : ['==', 'id', -1];
 };
@@ -59,8 +57,8 @@ const AddRegionsScreen = ({ route }: { route: any }) => {
   const [regionsToSave, setRegionsToSave] = useState<RegionAddData[]>([]);
   const [regionData, setRegionData] = useState<RegionAddData | null>(null);
   const [regionPopupVisible, setRegionPopupVisible] = useState(false);
-  const mapRef = useRef<MapViewRef>(null);
-  const cameraRef = useRef<CameraRef>(null);
+  const mapRef = useRef<MapLibreRN.MapViewRef>(null);
+  const cameraRef = useRef<MapLibreRN.CameraRef>(null);
 
   const [filterSelectedRegions, setFilterSelectedRegions] = useState<any[]>(generateFilter([]));
 
@@ -215,17 +213,17 @@ const AddRegionsScreen = ({ route }: { route: any }) => {
       </View>
 
       <View style={styles.container}>
-        <MapLibreGL.MapView
+        <MapLibreRN.MapView
           ref={mapRef}
           style={styles.map}
-          styleJSON={VECTOR_MAP_HOST + '/nomadmania-maps.json'}
+          mapStyle={VECTOR_MAP_HOST + '/nomadmania-maps.json'}
           rotateEnabled={false}
           attributionEnabled={false}
           onPress={handleMapPress}
         >
-          <MapLibreGL.Camera ref={cameraRef} />
+          <MapLibreRN.Camera ref={cameraRef} />
 
-          <MapLibreGL.LineLayer
+          <MapLibreRN.LineLayer
             id="nm-regions-line-layer"
             sourceID={nm_regions.source}
             sourceLayerID={nm_regions['source-layer']}
@@ -238,7 +236,7 @@ const AddRegionsScreen = ({ route }: { route: any }) => {
             }}
             belowLayerID="waterway-name"
           />
-          <MapLibreGL.FillLayer
+          <MapLibreRN.FillLayer
             id={nm_regions.id}
             sourceID={nm_regions.source}
             sourceLayerID={nm_regions['source-layer']}
@@ -249,7 +247,7 @@ const AddRegionsScreen = ({ route }: { route: any }) => {
           />
 
           {selectedRegions && selectedRegions.length > 0 ? (
-            <MapLibreGL.FillLayer
+            <MapLibreRN.FillLayer
               id={selected_region.id}
               sourceID={nm_regions.source}
               sourceLayerID={nm_regions['source-layer']}
@@ -259,7 +257,7 @@ const AddRegionsScreen = ({ route }: { route: any }) => {
               belowLayerID="nm-regions-line-layer"
             />
           ) : null}
-        </MapLibreGL.MapView>
+        </MapLibreRN.MapView>
       </View>
       {regionPopupVisible && regionData && (
         <View style={styles.popupWrapper}>

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

@@ -9,9 +9,7 @@ import { StoreType, storage } from 'src/storage';
 
 import { VECTOR_MAP_HOST } from 'src/constants';
 import { styles } from './styles';
-import MapLibreGL, { MapViewRef } from '@maplibre/maplibre-react-native';
-
-MapLibreGL.setAccessToken(null);
+import * as MapLibreRN from '@maplibre/maplibre-react-native';
 
 let kye_fill = {
   id: 'kye_fill',
@@ -66,7 +64,7 @@ const EarthScreen = () => {
 
   const [filter, setFilter] = useState<any[]>(generateFilter([]));
 
-  const mapRef = useRef<MapViewRef>(null);
+  const mapRef = useRef<MapLibreRN.MapViewRef>(null);
 
   useEffect(() => {
     if (!data || !data.regions) return;
@@ -192,38 +190,38 @@ const EarthScreen = () => {
           { paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 }
         ]}
       >
-        <MapLibreGL.MapView
+        <MapLibreRN.MapView
           ref={mapRef}
           style={styles.map}
-          styleJSON={VECTOR_MAP_HOST + '/nomadmania-maps.json'}
+          mapStyle={VECTOR_MAP_HOST + '/nomadmania-maps.json'}
           rotateEnabled={false}
           attributionEnabled={false}
           onPress={onMapPress}
         >
-          <MapLibreGL.ShapeSource id="kye" shape={kye as any}>
-            <MapLibreGL.LineLayer
+          <MapLibreRN.ShapeSource id="kye" shape={kye as any}>
+            <MapLibreRN.LineLayer
               id={kye_line.id}
               filter={kye_line.filter as any}
               maxZoomLevel={kye_line.maxzoom}
               style={kye_line.style as any}
               belowLayerID="waterway-name"
             />
-            <MapLibreGL.FillLayer
+            <MapLibreRN.FillLayer
               id={kye_fill.id}
               filter={['==', 'tt', '1']}
               style={kye_fill.style}
               maxZoomLevel={kye_fill.maxzoom}
               belowLayerID={kye_fill_visited.id}
             />
-            <MapLibreGL.FillLayer
+            <MapLibreRN.FillLayer
               id={kye_fill_visited.id}
               filter={filter as any}
               style={kye_fill_visited.style}
               maxZoomLevel={kye_fill_visited.maxzoom}
               belowLayerID={kye_line.id}
             />
-          </MapLibreGL.ShapeSource>
-        </MapLibreGL.MapView>
+          </MapLibreRN.ShapeSource>
+        </MapLibreRN.MapView>
       </View>
     </SafeAreaView>
   );