refactor(map): change map & clustering package

app.json

@@ -93,6 +93,7 @@
       "expo-font",
       "expo-localization",
       "expo-secure-store",
+      "@maplibre/maplibre-react-native",
       "./config-plugins/withAndroidMailQueriesAndWhatsappPackage"
     ]
   }

package.json

@@ -19,8 +19,7 @@
     "lint": "./node_modules/.bin/eslint __tests__ src --ext .js,.jsx,.ts,.tsx",
     "test": "./node_modules/.bin/jest",
     "test:debug": "node --inspect-brk node_modules/jest/bin/jest.js --runInBand",
-    "test:coverage": "node_modules/.bin/jest --coverage",
-    "postinstall": "patch-package"
+    "test:coverage": "node_modules/.bin/jest --coverage"
   },
   "jest": {
     "preset": "jest-expo",
@@ -37,6 +36,7 @@
   "dependencies": {
     "@apollo/react-hooks": "~3.1.5",
     "@expo/vector-icons": "14.0.0",
+    "@maplibre/maplibre-react-native": "^10.0.0-alpha.5",
     "@native-html/iframe-plugin": "^2.6.1",
     "@native-html/table-plugin": "^5.3.1",
     "@react-native-async-storage/async-storage": "1.23.1",
@@ -93,7 +93,6 @@
     "matomo-tracker-react-native": "^0.3.0",
     "moment": "~2.29.4",
     "moment-range": "^4.0.2",
-    "patch-package": "^8.0.0",
     "postinstall-postinstall": "^2.1.0",
     "qs": "^6.10.3",
     "react": "18.2.0",
@@ -111,8 +110,6 @@
     "react-native-gesture-handler": "~2.16.1",
     "react-native-get-random-values": "~1.11.0",
     "react-native-gifted-chat": "^2.0.1",
-    "react-native-map-clustering": "^3.4.2",
-    "react-native-maps": "1.14.0",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal-dropdown": "https://github.com/donni106/react-native-modal-dropdown#feature/search-options",
     "react-native-progress": "^5.0.0",
@@ -129,7 +126,8 @@
     "react-native-web": "~0.19.10",
     "react-native-webview": "13.8.6",
     "react-query": "^3.34.14",
-    "styled-components": "~4.4.1"
+    "styled-components": "~4.4.1",
+    "supercluster": "^8.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -165,4 +163,4 @@
     "@expo/config-plugins": "^8.0.4",
     "markdown-it": "^12.3.2"
   }
-}
+}

src/components/LoadingContainer.js

@@ -4,8 +4,10 @@ import { StyleSheet, View } from 'react-native';
 
 import { normalize } from '../config';
 
-export const LoadingContainer = ({ children, web }) => (
-  <View style={[styles.loadingContainer, web && styles.webPosition]}>{children}</View>
+export const LoadingContainer = ({ children, containerStyle, web }) => (
+  <View style={[styles.loadingContainer, web && styles.webPosition, containerStyle]}>
+    {children}
+  </View>
 );
 
 const styles = StyleSheet.create({
@@ -26,5 +28,6 @@ const styles = StyleSheet.create({
 
 LoadingContainer.propTypes = {
   children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  containerStyle: PropTypes.object,
   web: PropTypes.bool
 };

src/components/LoadingSpinner.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
-import { ActivityIndicator } from 'react-native';
+import { ActivityIndicator, ViewStyle } from 'react-native';
 
 import { colors } from '../config';
 
 import { LoadingContainer } from './LoadingContainer';
 
 type Props = {
   loading?: boolean;
+  containerStyle?: ViewStyle;
 };
 
-export const LoadingSpinner = ({ loading }: Props) => {
+export const LoadingSpinner = ({ loading, containerStyle }: Props) => {
   return loading ? (
-    <LoadingContainer>
+    <LoadingContainer containerStyle={containerStyle}>
       <ActivityIndicator color={colors.refreshControl} />
     </LoadingContainer>
   ) : null;

src/components/SUE/report/SueReportLocation.tsx

@@ -80,6 +80,7 @@ export const SueReportLocation = ({
   const currentPosition = position || lastKnownPosition;
 
   const [updatedRegion, setUpdatedRegion] = useState(false);
+  const [selectedMarker, setSelectedMarker] = useState<string | undefined>();
 
   useEffect(() => {
     if (updateRegionFromImage) {
@@ -248,8 +249,9 @@ export const SueReportLocation = ({
           locations={locations}
           mapCenterPosition={mapCenterPosition}
           mapStyle={styles.map}
-          onMyLocationButtonPress={onMyLocationButtonPress}
           onMapPress={onMapPress}
+          onMarkerPress={(id) => setSelectedMarker(id)}
+          onMyLocationButtonPress={onMyLocationButtonPress}
           onMaximizeButtonPress={() =>
             navigation.navigate(ScreenName.SueReportMapView, {
               calloutTextEnabled: true,
@@ -263,6 +265,7 @@ export const SueReportLocation = ({
               showsUserLocation: true
             })
           }
+          selectedMarker={selectedMarker}
           updatedRegion={
             !!selectedPosition && (updatedRegion || updateRegionFromImage)
               ? { ...selectedPosition, latitudeDelta: 0.01, longitudeDelta: 0.01 }

src/components/map/LocationOverview.tsx

@@ -125,7 +125,6 @@ export const LocationOverview = ({ filterByOpeningTimes, navigation, queryVariab
   return (
     <>
       <Map
-        isMultipleMarkersMap
         locations={mapMarkers}
         mapStyle={styles.map}
         onMarkerPress={setSelectedPointOfInterest}
@@ -155,19 +154,18 @@ const styles = StyleSheet.create({
   listItemContainer: {
     backgroundColor: colors.surface,
     borderRadius: normalize(12),
+    elevation: normalize(2),
     left: '4%',
     position: 'absolute',
     right: '4%',
     width: '92%',
-    // shadow:
-    elevation: 2,
     shadowColor: colors.shadowRgba,
     shadowOffset: {
-      height: 5,
+      height: normalize(5),
       width: 0
     },
-    shadowOpacity: 0.5,
-    shadowRadius: 3
+    shadowOpacity: normalize(0.5),
+    shadowRadius: normalize(3)
   },
   map: {
     height: '100%',