Upgrade to mapbox

app/(tabs)/map.tsx

@@ -1,14 +1,18 @@
 import React, {useEffect, useState} from 'react';
 import {Image, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, View} from 'react-native';
+import Mapbox, {MapView} from "@rnmapbox/maps";
+
+Mapbox.setAccessToken("pk.eyJ1IjoibWFhcnRlbnZyOTgiLCJhIjoiY2x6ZDFqMGp1MGVyejJrczhqcXpvYm9iYiJ9.XvYcL62dWiJQiFmG6mOoug");
 
 import {ThemedText} from '@/components/ThemedText';
 import {ThemedView} from '@/components/ThemedView';
 import {Colors} from '@/constants/Colors';
 import {useColorScheme} from '@/hooks/useColorScheme';
-import MapView from '@/components/map/map';
 import List from '@/components/List';
 import {Request} from '@/services/request';
 
+
+
 export default function MapScreen() {
   const colorScheme = useColorScheme() ?? 'light';
 
@@ -17,6 +21,8 @@ export default function MapScreen() {
 
   // Load markers and types
   useEffect(() => {
+    Mapbox.setTelemetryEnabled(false);
+
     Request.get('locations').then((response) => {
       const {locations, types} = response;
 
@@ -81,27 +87,20 @@ export default function MapScreen() {
           <ThemedView style={styles.mapContainer}>
             <MapView
               style={styles.map}
-              provider={PROVIDER_GOOGLE}
-              initialRegion={{
-                latitude: 52.043420,
-                longitude: 5.630960,
-                latitudeDelta: 0.03,
-                longitudeDelta: 0.0421,
-              }}
             >
-              {activeMarkers().map((marker: any, index: any) => (
-                <Marker
-                  key={index}
-                  tracksViewChanges={false}
-                  coordinate={{
-                    latitude: parseFloat(marker.latitude),
-                    longitude: parseFloat(marker.longitude),
-                  }}
-                  title={marker.number}
-                  description={marker.description}
-                  pinColor={marker.marker_color}
-                />
-              ))}
+              {/*{activeMarkers().map((marker: any, index: any) => (*/}
+              {/*  <Marker*/}
+              {/*    key={index}*/}
+              {/*    tracksViewChanges={false}*/}
+              {/*    coordinate={{*/}
+              {/*      latitude: parseFloat(marker.latitude),*/}
+              {/*      longitude: parseFloat(marker.longitude),*/}
+              {/*    }}*/}
+              {/*    title={marker.number}*/}
+              {/*    description={marker.description}*/}
+              {/*    pinColor={marker.marker_color}*/}
+              {/*  />*/}
+              {/*))}*/}
             </MapView>
           </ThemedView>
 
@@ -149,6 +148,7 @@ const styles = StyleSheet.create({
   map: {
     width: '100%',
     height: 500,
+    flex: 1,
   },
   listContainer: {
     marginTop: 10,