Add markers to map

app/(tabs)/map.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
-import {Image, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, View} from 'react-native';
-import Mapbox, {MapView} from "@rnmapbox/maps";
+import {Image, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, View, Dimensions} from 'react-native';
+import Mapbox, {Callout, Camera, MapView, PointAnnotation} from "@rnmapbox/maps";
 
 Mapbox.setAccessToken("pk.eyJ1IjoibWFhcnRlbnZyOTgiLCJhIjoiY2x6ZDFqMGp1MGVyejJrczhqcXpvYm9iYiJ9.XvYcL62dWiJQiFmG6mOoug");
 
@@ -12,7 +12,6 @@ import List from '@/components/List';
 import {Request} from '@/services/request';
 
 
-
 export default function MapScreen() {
   const colorScheme = useColorScheme() ?? 'light';
 
@@ -75,7 +74,7 @@ export default function MapScreen() {
   return (
     <SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background}}>
       <ThemedView style={styles.container}>
-        <ScrollView>
+        <ThemedView>
           <ThemedView style={styles.titleContainer}>
             <ThemedText type="title">Afvalcontainers</ThemedText>
           </ThemedView>
@@ -87,24 +86,33 @@ export default function MapScreen() {
           <ThemedView style={styles.mapContainer}>
             <MapView
               style={styles.map}
+              logoEnabled={false}
+              scaleBarEnabled={false}
+              attributionEnabled={false}
             >
-              {/*{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}*/}
-              {/*  />*/}
-              {/*))}*/}
+              <Camera
+                centerCoordinate={[5.630960, 52.043420]}
+                zoomLevel={13}
+                animationMode={'none'}
+              />
+              {activeMarkers().map((marker: any, index: any) => (
+                <PointAnnotation
+                  key={marker.id.toString()}
+                  id={marker.id.toString()}
+                  coordinate={marker.coordinate}
+                >
+                  <Callout title={marker.number}>
+                    <ThemedView style={styles.callout}>
+                      <ThemedText>{marker.description + ' - ' + marker.street}</ThemedText>
+                    </ThemedView>
+                  </Callout>
+                </PointAnnotation>
+              ))}
             </MapView>
           </ThemedView>
+        </ThemedView>
 
-          <ThemedView style={styles.listContainer}>
+        <ScrollView style={styles.listContainer}>
           <List
             data={types}
             renderItem={(item: any, index: any) => (
@@ -122,7 +130,6 @@ export default function MapScreen() {
                 />
               </ThemedView>
             )}/>
-          </ThemedView>
         </ScrollView>
       </ThemedView>
     </SafeAreaView>
@@ -133,6 +140,7 @@ const styles = StyleSheet.create({
   container: {
     marginTop: StatusBar.currentHeight,
     paddingTop: 25,
+    flex: 1,
   },
   titleContainer: {
     paddingLeft: 25,
@@ -144,14 +152,16 @@ const styles = StyleSheet.create({
   },
   mapContainer: {
     marginTop: 15,
+    height: 400,
   },
   map: {
-    width: '100%',
-    height: 500,
+    width: Dimensions.get('window').width,
+    height: 400,
     flex: 1,
   },
   listContainer: {
-    marginTop: 10,
+    flex: 1,
+    marginTop: 20,
     paddingLeft: 25,
     paddingRight: 25,
   },
@@ -176,5 +186,9 @@ const styles = StyleSheet.create({
     height: 30,
     borderRadius: 5,
     marginRight: 8,
-  }
+  },
+  callout: {
+    width: 200,
+    padding: 5,
+  },
 });

services/request.tsx

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 const API_URL = 'https://kliko.maartenvr98.nl/api/v1/';
 const CONFIG = {
-  timeout: 3000,
+  timeout: 30000,
 };
 
 export class Request {