refactor(map): change map & clustering package

[d4v3d4vE]

• added maplibre-react-native through yarn add maplibre-react-native
  https://github.com/maplibre/maplibre-react-native
• updated app.json according to maplibre-react-native
• adjusted the code accordingly to keep all old map functionalities with the new map package '@maplibre/maplibre-react-native'
• implemented a calculation mechanism to always show a map with multiple markers with the perfect positioning & zoom settings to display all markers on the map
• ran yarn remove react-native-map-cluster to remove the package
• ran yarn add supercluster to add the package
• implemented new more efficient clustering via supercluster
• added translucentAccent to colors.js for the cluster design
• sorted imports
• formatted code
• removed prop isMultipleMarkersMap, since we calculate the exact camera positioning to show all markers on the map over the marker placements on the map to ensure always the perfect map view with all set markers
• added old cluster design with a adjustable hitbox, set to 80
• added the functionality to disable clustering, clustering is enabled by default
• added back prop functionality to all used props to ensure the same map behaviour as before
• added View to LocationSettings.js to ensure a reliable map behaviour
• added new LoadingSinnerMap.tsx for a compatible loading spinner overlay as the map is loading
• removed translucentAccent from colors.js as it's not needed anymore
• adjusted map styling all over the projects used map components to ensure a consistent map behaviour
• added normalize() throughout the files I worked in to ensure a consistent design
• updated styles in Map.tsx to prevent the app from crashing on some screens with maps
• added containerStyle prop to LoadingContainer
• deleted because LoadingSpinnerMap was replaced with LoadingSpinner
• added collapsable structure in LocationSettings again
• added map style to SueMapScreen and SueMapViewScreen to get full screen map view
• added onMarkerPress and selectedMarker to SueMapViewScreen and SueReportLocation to show callout text when marker is pressed
• removed setTimouts because they caused unnecessary waiting while loading the map
• unused props removed
• added blank lines to the code to increase readability
• corrected sorting errors
• corrected some minor spelling errors
• added setSelectedMarker(undefined) to onMapPress function in SueReportLocation and SueMapViewScreen to remove callout text from the screen
• added calculateBoundsToFitAllMarkers helper to prevent the Map.tsx component from growing larger
• updated the name of the calculateBounds helper to calculateBoundsToFitAllMarkers for clarity
• added comment line to understand values in bounds array
• increased the animationDuration value from 0 to 1000 to solve the problem of the map updating itself according to the desired location after a certain period of time
• updated or deleted unnecessary codes

To test this changes run yarn prebuild and yarn android -d for Android or yarn ios -d for iOS DevBuild installations.

SVA-1365

[donni106]

why is this set to undefined if there is a selected position a line before?

[ardasnturk]

I don't know why. This code is copied and pasted into the handleSave function. The previous version of the code is protected.

[donni106]

@d4v3d4vE do you know?

[d4v3d4vE]

ChatGPT's explanation:

The line setSelectedPosition(undefined); is setting selectedPosition to undefined to reset or clear the selected position after the user saves or aborts the operation. This is a common practice to ensure that the state is reset, preventing any residual state from interfering with subsequent operations.

personally I couldn't explain it on the fly

[donni106]

so it is used first for alternative position and cleared afterwards, right? maybe the collapsible is closed with unsetting selected position? what happens if we do not set it to undefined?

[d4v3d4vE]

yes, you are correct. the selectedPosition is used to update the alternativePosition in the location settings and is then cleared to reset the state

the collapsible component's visibility is controlled by showMap, which is set to false immediately after clearing the selected position

but I also just checked manually various cases and I couldn't finde any error wich should appear when we are not setting setSelectedPosition(undefined);, therefore I'd say that we can get rid of it