Im making an app using react native. It uses the google maps api and I wrote a good amount of code which displays a map, adds markers and highlights a route between markers. I wrote code so that when a user presses the screen they add a marker and the markers coords get added into a list. When they click the marker that was placed on the screen it gets removed. The problem is this only works on android. When I try on IOS i get this error
I tried many different variations of these 2 methods. The first is the onPress in Mapview to add a marker
const [markers, setMarker] = useState([]);
// this method is used to delete the marker
const onMarkerPress = (index) => {
setMarker((prevMarkers) => {
console.log("Marker Pressed!", index);
const updatedMarkers = [...markers];
updatedMarkers.splice(index, 1);
setMarker(updatedMarkers);
return updatedMarkers;
});
};
<MapView
ref={mapRef}
style={styles.map}
//Region={mapRegion}
initialRegion ={{
latitude: 50,
longitude: -70,
latitudeDelta: 0.25,
longitudeDelta: 0.25,
}}
zoomControlEnabled={true}
zoomEnabled={true}
onPress={(e) => {
setMarker((prevMarkers) => {
const newMarkers = [...prevMarkers, e.nativeEvent.coordinate];
console.log(newMarkers);
return newMarkers;
});
}}
>
// this markers method loops through the marker array and displays them on the map
{markers.map((marker, index) => (
marker && (<Marker
key={index}
coordinate={marker}
// this calls the above method to delete the markers when user clicks them
onPress={event => onMarkerPress(index)}
/>
</MapView>




