Callout disappears after first click on marker

[dragonza]

I am having some trouble when displaying callout after clicking on single marker (after the cluster explode to single marker). The Callout sometimes flash for a second then disappear totally after clicking on single marker

I have a component called MyClusteredMap which will render ClusteredMapView.

renderCluster = (cluster, onPress) => {
    const pointCount = cluster.pointCount,
      coordinate = cluster.coordinate;

    return (
      <MapView.Marker coordinate={coordinate} onPress={onPress}>
        <View style={styles.myClusterStyle}>
          <Text style={styles.clusterText}>{pointCount > 99 ? '99+' : pointCount}</Text>
        </View>
      </MapView.Marker>
    );
  };

renderMarker will render my customer Marker include Callout build-in from react-native-maps

Sometimes it happened on some markers, other markers works fine. When it happens, the Callout seems to be present but it is hidden after the flash. It seems to only happen when I click on the first any cluster after the map first loaded.

[leolusoli]

@dragonza Are you sure that isn't related to this?

[dragonza]

@leolusoli I don't think it is related to my problem. I have recorded a demo below. Please have a look.

`

[lumenlunae]

Thanks for this video! It's exactly the same problem I'm experiencing.

[TRutte]

I had exactly the same problem with my custom markers. I saw that for some marker react fires a reload after loading the callout but not on all markers. I used a random value for the key prop. After setting a fixed unique value for each marker the problem is solved for me!

[39otrebla]

This is a long-living issue of react-native-maps, we experienced it as well. Could you please try your code using react-native-maps instead of this library, just to confirm?

[Balasnest]

when I click on a marker, will get a notification and reloads with new data and the callOut get disappear. Is there a way to show callout even after reloaded the makers?

[dragonza]

There is an on-going issue of react-native-maps about jumping callout if the pins are too close to each other. I had been experienced with that issue while using react-native-maps. There is no solution for now. That is why I switch to this package to reduce the numbers of pins on the UI. Not sure if that issue is related to this issue.

[Dhinesh-KS]

@dragonza

As per your demo the markers are not close in your case.

I am also facing the same issue. Any solutions for this?

Thanks.

[manishsainju]

+1

[Xplosive06]

For my part, I was using another marker in addition to my list of markers to show a custom marker for user's position.

I deleted it and added showsUserLocation ass a prop of .

This bug disappear but I now have a classic pin for user's position.

Maybe it will help some...

[39otrebla]

Callout flickering/lagging/disappearing/not-working-properly on Android is a known issue of react-native-maps. There's nothing we can do from this repository.