react-native-map-clustering icon indicating copy to clipboard operation
react-native-map-clustering copied to clipboard

On iOS, after pressing a cluster and zooming the first time, pressing a marker shows it and then quickly hides it

Open findhumane opened this issue 2 years ago • 1 comments

Reproducible example: https://github.com/findhumane/testmapstouch2

  1. git clone https://github.com/findhumane/testmapstouch2
  2. cd testmapstouch2
  3. npm install
  4. npx expo start --tunnel
  5. Scan the QR code in Expo Go
  6. Tap on the "3" cluster
  7. Move the map over a bit to the left
  8. Tap on the left marker
  9. The callout shows very quickly and then disappears (this is the problem)
  10. Move over to another marker and tap it and the callout is persistent, as expected

bug2.webm

Any ideas?

import React from 'react';
import MapView from "react-native-map-clustering";
import { Marker } from "react-native-maps";
import { StyleSheet, View } from 'react-native';

const markers = [
  { id: 1, title: "Test1", description: "Hello World", location: { latitude: 30.270652526064772, longitude: -97.75368988587985 } },
  { id: 2, title: "Test2", description: "Hello World", location: { latitude: 30.269826083021613, longitude: -97.75316677471446 } },
  { id: 3, title: "Test3", description: "Hello World", location: { latitude: 30.270928005532998, longitude: -97.75273297521144 } },
];

export default function App() {
  renderMarker = (marker) => (
    <Marker
      identifier={marker.id}
      key={marker.id}
      coordinate={marker.location}
      title={marker.title}
      description={marker.description}
      tracksViewChanges={false}
    />
  );

  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 30.26714,
          longitude: -97.74259,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        { markers.map((marker) => renderMarker(marker)) }
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: '100%',
    height: '100%',
  },
});

findhumane avatar Dec 24 '22 23:12 findhumane

Proximate cause and workaround described here: https://github.com/react-native-maps/react-native-maps/issues/4573#issuecomment-1369146465

diff --git a/ios/AirMaps/AIRMapMarker.m b/ios/AirMaps/AIRMapMarker.m
index 65098aa..0d66061 100644
--- a/ios/AirMaps/AIRMapMarker.m
+++ b/ios/AirMaps/AIRMapMarker.m
@@ -267,7 +267,7 @@ NSInteger const AIR_CALLOUT_OPEN_ZINDEX_BASELINE = 999;
     _calloutIsOpen = NO;
     [self setZIndex:_zIndexBeforeOpen];
     // hide the callout view
-    [self.map.calloutView dismissCalloutAnimated:YES];
+    [self.map.calloutView dismissCalloutAnimated:NO];
 
     [self setSelected:NO animated:NO];
     [self.map deselectAnnotation:self animated:NO];

findhumane avatar Jan 02 '23 19:01 findhumane