Load markers on map by bounds instead of all

app/(tabs)/map.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Image, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, View, Dimensions } from 'react-native';
 import Mapbox, { Callout, Camera, MapView, PointAnnotation } from "@rnmapbox/maps";
 import { useSelector } from 'react-redux';
@@ -19,8 +19,10 @@ export default function MapScreen() {
     const isFocused = useIsFocused();
     const session = useSelector( (state: any) => state.data.session );
     const { t } = useTranslation();
+    const mapRef = useRef<MapView>( null );
 
     const [ types, setTypes ] = useState<any>( [] );
+    const [ typesSet, setTypesSet ] = useState( false );
     const [ coordinates, setCoordinates ] = useState<any>( [] );
     const [ markers, setMarkers ] = useState<any>( [] );
 
@@ -29,14 +31,24 @@ export default function MapScreen() {
         setCoordinates( [ session.coordinates.longitude, session.coordinates.latitude ] );
     }, [ session, isFocused ] );
 
-    // Load markers and types
+    // Setup mapbox
     useEffect( () => {
         Mapbox.setTelemetryEnabled( false );
+    }, [] );
 
-        Request.get( 'locations' ).then( (response) => {
+    // Load markers and types
+    const loadMarkers = () => {
+        mapRef.current?.getVisibleBounds().then( (bounds) => {
+            Request
+                .post( 'locations', {
+                    topLeft: bounds[ 0 ],
+                    bottomRight: bounds[ 1 ],
+                } )
+                .then( (response) => {
                     const { locations, types } = response;
 
                     // Set types
+                    if (!typesSet) {
                         const typesList: any[] = [];
                         types.forEach( (type: any) => {
                             typesList.push( {
@@ -47,11 +59,14 @@ export default function MapScreen() {
                             } );
                         } )
                         setTypes( typesList );
+                        setTypesSet( true );
+                    }
 
                     // Set markers
                     setMarkers( locations );
                 } )
-    }, [] );
+        } );
+    }
 
     // Enable/disable type
     const toggleSwitch = (index: any) => {
@@ -96,10 +111,12 @@ export default function MapScreen() {
 
                     <ThemedView style={styles.mapContainer}>
                         <MapView
+                            ref={mapRef}
                             style={styles.map}
                             logoEnabled={false}
                             scaleBarEnabled={false}
                             attributionEnabled={false}
+                            onMapIdle={loadMarkers}
                         >
                             <Camera
                                 centerCoordinate={coordinates.length == 2 ? coordinates : undefined}