No imploding/exploding animation in iOS

[PurnimaNaik]

The clusters just appear, its as if there is no animation. I am testing this out in iOS simulator and iOS device. I am assuming that react-native-maps-super-cluster comes with the spring animation out of the box. (Similar to the demo gif in README) All I have to do is add animateClusters={true}. Please correct me if I am wrong. @39otrebla @leolusoli

{(this.state.initialPosition!=null && this.state.arr.length > 0)?
  <ClusteredMapView
    provider={PROVIDER_GOOGLE}
    animateClusters={true}
    style={styles.mapContainer}
    data={this.state.clusterDataArray}
    renderMarker={this.renderMarker}
    renderCluster={this.renderCluster}
    initialRegion={this.state.initialPosition}
    ref={(element) => { this.mapRef = element }}
    showsUserLocation = {true}
    showsMyLocationButton={false}
    customMapStyle={CustomMapStyle}
    loadingEnabled={true}
    rotateEnabled={true}
    onRegionChangeComplete={this.onRegionChangeComplete}
    >
  </ClusteredMapView>
:
null}

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

    return (
      <MapView.Marker 
          coordinate={coordinate} 
          onPress={onPress} 
          animateClusters={true}>
        <View style={styles.clusterContainer}>
          <Text style={styles.clusterText}>
            {pointCount}
          </Text>
        </View>
      </MapView.Marker>
    )
  }

  renderMarker = (arrData) => {
    return (
      <MapView.Marker
        image={require('../../icons/blue-marker-pin.png')}
        identifier={(arrData.id).toString()}
        key={(arrData.id).toString()}
        coordinate={arrData.location}
        />
    )
  }

Tried layoutAnimationConf too

  <ClusteredMapView
    animateClusters={true}
    **layoutAnimationConf={LayoutAnimation.Presets.spring}**
    provider={PROVIDER_GOOGLE}
    style={styles.mapContainer}
    data={this.state.clusterDataArray}
    renderMarker={this.renderMarker}
    renderCluster={this.renderCluster}
    initialRegion={this.state.initialPosition}
    ref={(element) => { this.mapRef = element }}
    showsUserLocation = {true}
    showsMyLocationButton={false}
    customMapStyle={CustomMapStyle}
    loadingEnabled={true}
    rotateEnabled={true}
    >

If I use LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); in renderClusters(), every component other than the clusters & markers reacts to it i.e. the spring animation applies to every component except the clusters & markers.

I cut it down to a bare-bone ClusteredMapView-

  <ClusteredMapView
    data={this.state.clusterDataArray}
    animateClusters={true}
    renderMarker={this.renderMarker}
    renderCluster={this.renderCluster}
    initialRegion={this.state.initialPosition}
    ref={(element) => { this.mapRef = element }}
    >
  </ClusteredMapView>

This makes a fadeout effect not spring

[RWOverdijk]

👍 I'm currently fighting this myself as well. There are no animations happening.

[39otrebla]

We are planning to migrate from LayoutAnimation to Animated library. This will give to developers more control on animations, as well as fix the all-or-nothing behavior of LayoutAnimation.

[spyshower]

@39otrebla is this happening in the next few years or?

[vavdoshka]

anyone has an idea why this animation works on iOS built-in maps but not with PROVIDER_GOOGLE ?

[39otrebla]

We apologize for being unresponsive for so much time. We now have a major refactoring in progress to re-align with the latest React standards (like functional components & hooks). We'll try to include this as well.