Layout animation does not work with Google Provider

[vavdoshka]

The animation effect on appearing/disappearing clusters works fine on iOS simulator with standard maps but not with Google maps provider which I would like to use. Does anyone know the reason and know how to fix that?

Here is the demonstration

Standard iOS map	Google map

Here is the code to reproduce the issue:

App.js

import React, { useState } from 'react';
import MapView from 'react-native-map-clustering';
import { Marker, Region, PROVIDER_GOOGLE } from 'react-native-maps';
import { Dimensions, StyleSheet, View } from 'react-native';

export default function Map({navigation}) {
    const [markers, setMarkers] = useState([]);

    const initialRegion: Region = {
        latitude: 39.466667,
        longitude: -0.375,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
    };

    React.useEffect(() => {
      // generate a bunch of random coordinates near to initialRegion
        const markers = [ ...Array(1000).keys() ].map( i => {
          const min = 0.0001
          const max = 0.0500
          return {
            latitude: initialRegion.latitude + Math.random() * (max - min) + min,
            longitude: initialRegion.longitude - Math.random() * (max - min) + min
        }
        });
        setMarkers([...markers]);
    }, []);

    return (
        <View style={styles.container}>
            <MapView
                radius={50}
                provider={PROVIDER_GOOGLE} // comment this to see animation working
                style={styles.mapStyle}
                initialRegion={initialRegion}
            >
                {markers.map(
                    (marker, i) =>
                        <Marker key={i} coordinate={marker} />
                )}
            </MapView>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    mapStyle: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
    },
});

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~39.0.2",
    "expo-status-bar": "~1.0.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz",
    "react-native-map-clustering": "^3.3.9",
    "react-native-maps": "^0.27.1",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "private": true
}

[vavdoshka]

I've reproduced that using the underlying MapView component https://github.com/react-native-community/react-native-maps/issues/3557

[Joonas16]

This problem still exists, any workarounds?

[MarcHbb]

Having the same issue, any news ??