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

Layout animation does not work with Google Provider #188

Open
vavdoshka opened this issue Sep 22, 2020 · 3 comments
Open

Layout animation does not work with Google Provider #188

vavdoshka opened this issue Sep 22, 2020 · 3 comments

Comments

@vavdoshka
Copy link

vavdoshka commented Sep 22, 2020

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
standard_maps google_maps

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

I've reproduced that using the underlying MapView component
react-native-maps/react-native-maps#3557

@vavdoshka vavdoshka reopened this Sep 22, 2020
@Joonas16
Copy link

This problem still exists, any workarounds?

@MarcHbb
Copy link

MarcHbb commented Oct 5, 2023

Having the same issue, any news ??

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

3 participants