Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
findhumane opened this issue Dec 24, 2022 · 1 comment

Comments

@findhumane
Copy link

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
Copy link
Author

Proximate cause and workaround described here: react-native-maps/react-native-maps#4573 (comment)

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];

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant