Custom Callout disappearing on map move about react-native-map-clustering

[xjebediahx]

Hello, I can confirm that. Plus the Callout is below the markers on iOS.

[liqueflies]

Anyone solved this?

[vhoen]

Nope, still hoping someone will come up with a fix :)

[vhoen]

I came up with some sort of hack that I am not so proud of but it seems to do the job. If anyone has a better solution, I would be glad to use it :

constructor(props) {
  super(props);
  this.showCallout = this.showCallout.bind(this);

  this.state = {
    selectedMarker: null,
    selectedMarkersList: [],
  };
}

getMarkers() {
  return this.state.parks.map((park, i) => (
    <Marker
      key={park.code}
      coordinate={{
        latitude: parseFloat(park.lat),
        longitude: parseFloat(park.lng),
      }}
      ref={(c) => {
        this[`marker_${i}`] = c;
      }}
      onPress={() => {
        if (Platform.OS === 'android') {
          const markerId = `marker_${i}`;
          if (!isUndefined(this[markerId])) {
            this.setState({
              selectedMarker: markerId,
              // Needed to keep a list of already used callout, so that they
              // are removed by react-native-maps
              // prevents this kind of error : https://stackoverflow.com/questions/41819759/trying-to-remove-a-view-index-above-child-count-error
              selectedMarkersList: [...this.state.selectedMarkersList, markerId],
            }, () => setTimeout(() => this.showCallout(i), 250));
          }
        } else {
          this[`marker_${i}`].showCallout();
        }
      }}
      style={{ zIndex: 10 }}
    >
      {(() => {
        if (Platform.OS === 'android') {
          const markerId = `marker_${i}`;
          if (
            this.state.selectedMarker === markerId
            || this.state.selectedMarkersList.indexOf(markerId) !== -1
          ) {
            return this.renderCallout(park, i);
          }

          return null;
        }

        return this.renderCallout(park, i);
      })()}
    </Marker>
  ));
}

showCallout(i) {
  if (!isUndefined(this[`marker_${i}`]) && this[`marker_${i}`].showCallout) {
    this[`marker_${i}`].showCallout();
  }
}

renderMap() {
  return (
    <MapView
      region={MAP_REGION}
      ref={(c) => { this.mapView = c; }}
      style={{ flex: 1, zIndex: 10 }}
      clusterTextColor={PVCPTheme.colors.PV_BLUE_DARK}
      clusterTextSize={15}
      clusterBorderColor="transparent"
      clusterBorderWidth={0}
      customClusterMarkerDesign={this.getCustomClusterMarkerDesign()}
      onClusterPress={(coordinates) => this.onClusterPress(coordinates)}
      rotateEnabled={false}
    >
      {this.getMarkers()}
    </MapView>
  );
}

Long story short : Callout is never rendered unless marker has been clicked.

[venits]

I released new version of this library. If this issue will be still relevant please let me know 👍

[gustavodev90]

This issue is still relevant today.
After tapping on the map marker, callout pops up and immediately disappears. It requires second time tap to work properly.

"react-native-map-clustering": "^3.4.2"
"react-native": "0.64.2"