Android Mapview really slow without markers

[sercaneryaz]

Summary

Hello, we were experiencing a slowdown issue on our map-based application that runs on iOS and Android when the number of markers on the map approached 20. Later, to test the issue, we removed the markers, but we realized that the slowdown was actually due to the map itself, not the markers. When scrolling the map right-left or zooming in and out, it becomes almost unusable.

Reproducible sample code

import React, {useCallback, useEffect, useRef, useState} from 'react';
import MapView, {Circle, Marker, PROVIDER_GOOGLE} from 'react-native-maps';
 <MapView
        ref={mapRef}
        style={styles.f1}
        camera={initialCamera}
        showsUserLocation={mapEnabled}
        showsCompass={false}
        showsMyLocationButton
        showsBuildings={false}
        userInterfaceStyle="light"
        tintColor="#6d00ff"
        customMapStyle={MAP_STYLE}
        provider={PROVIDER_GOOGLE}
        toolbarEnabled={false}
        userLocationUpdateInterval={10000}
        showsPointsOfInterest={false}
        showsIndoors={false}
        onUserLocationChange={e => {
          setMockCheck(true);
        }}
        onRegionChangeComplete={location => {
          if (getDistance(userLocation, location) > 60000) {
            setUserLocation(location);
          }
        }}
        onTouchStart={() => {
          if (target !== null) {
            onTimeLeftEnd();
          }
        }}>
        {targetList.map(t => (
          <Circle
            key={`circle-${t.targetID}`}
            center={{
              latitude: t.targetLocation.latitude,
              longitude: t.targetLocation.longitude,
            }}
            radius={t.radius}
            fillColor={t.color}
          />
        ))}
        {targetList.map(x => (
          <Marker
            key={`marker-${x.targetID}`}
            coordinate={{
              latitude: x.targetLocation.latitude,
              longitude: x.targetLocation.longitude,
            }}
            onPress={async () => {
              mapRef.current.animateCamera(
                {
                  center: {
                    latitude: x.targetLocation.latitude,
                    longitude: x.targetLocation.longitude,
                  },
                  pitch: 72, // Eğim değeri
                  heading: 0, // Yön değeri
                  zoom: 20, // Yakınlaştırma seviyesi
                },
                {duration: 500},
              );
              setTimeLeft(
                moment(x.endDate, 'YYYY-MM-DDThh:mm:ssZ').diff(
                  Date.now(),
                  'seconds',
                ),
              );
              setTargetAmount(isPremium ? x.pricePool : null);
              setTarget(x);
              try {
                await httpPost('/api/pk/settargetclick', {
                  UID: userId,
                  TargetId: x.targetID,
                });
                const response = await httpGet(
                  '/api/pk/gettargetclickers/' + x.targetID,
                );
                setClickCount(response.data);
              } catch (error) {}
            }}>
            {x.isCrowdedZone ? (
              <Image source={crowdedMarker} style={styles.crowdedMarkerStyle} />
            ) : !x.isExpreienceTarget ? (
              <Image
                source={userPlaceholderMarker}
                style={styles.userPlaceholderMarkerStyle}
              />
            ) : (
              <View style={styles.starMarkerContainer}>
                <Ionicons
                  name="star"
                  size={15}
                  color="white"
                  style={styles.starMarkerStyle}
                />
              </View>
            )}
          </Marker>
        ))}
      </MapView>

Steps to reproduce

Just open map on android its really slow

Expected result

work with good performance

Actual result

android app unusable

React Native Maps Version

1.8.0

What platforms are you seeing the problem on?

Android

React Native Version

0.68.2

What version of Expo are you using?

SDK 45

Device(s)

Any android device

Additional information

No response

[salah-ghanim]

@sercaneryaz in your code you're including lots of details about API calls, and even animation of camera among other things.... based on your description the bug is with an empty map... so can you please share an example that represents an empty map and see if it still is slow ? my assumption is that there is something else in your code slowing down the app not the map tiself

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If the issue remains relevant, simply comment Still relevant and the issue will remain open. Thank you for your contributions.