react-native-maps: Extremely slow map custom markers

Summary

I have a custom marker with a Component and Image, am using react-native-map-clustering when the markers and inside the cluster the map runs faster, when zoom in if have 20+ markers i start the a hunge decrease on the performance.

I already tried to set tracksViewChanges to false but after that the images doesn’t load, only the Views and text render.

Reproducible sample code

<MapView
            ref={mapRef}
            mapType={mapType}
            tracksViewChanges={false}
            showsIndoors={false}
            loadingEnabled
            customMapStyle={[
              {
                featureType: 'poi',
                elementType: 'label',
                stylers: [{visibility: 'off'}],
              },
            ]}
            showsPointsOfInterest={false}
            provider={PROVIDER_GOOGLE}
            showsUserLocation={true}
            showsCompass={false}
            showsMyLocationButton
            toolbarEnabled={false}>
            {locals !== null || locals !== undefined
              ? locals?.map(element => {
                  return (
                    <Marker
                      // icon={
                      //   element.isToCollect
                      //     ? require('../assets/marker_1_80x80.png')
                      //     : require('../assets/marker_2_80x80.png')
                      // }
                      key={element?.description}
                      coordinate={{
                        latitude: element.latitude,
                        longitude: element.longitude,
                      }}
                      onPress={() =>
                        handleMarkerClick(element, 'local-1')
                      }>
                      <View
                        style={{
                          justifyContent: 'center',
                          alignItems: 'center',
                          opacity: element.pressed ? 0.7 : 1,
                        }}>
                        {element?.distance &&
                        element?.time &&
                        !showRoute.show ? (
                          <TimeDistanceInfo
                            image={require('../assets/pedestrian.png')}
                            time={element?.time}
                            distance={element?.distance}
                          />
                        ) : null}
                        <Image
                          source={
                            element.isToCollect
                              ? require('../assets/marker_1_80x80.png')
                              : require('../assets/marker_2_80x80.png')
                          }
                          resizeMode={'contain'}
                          style={{height: 60}}
                        />
                      </View>
                    </Marker>
                  );
                })
              : null}
</MapView>

Steps to reproduce

Expected result

The map running fast with custom markers

Actual result

The map start freezing , and is almost impossible to zoom out.

React Native Maps Version

1.7.1

What platforms are you seeing the problem on?

Android, iOS (Google Maps)

React Native Version

0.71.6

What version of Expo are you using?

Not using Expo

Device(s)

Android and IOS devices

Additional information

No response

About this issue

Original URL
State: closed
Created a year ago
Reactions: 1
Comments: 15

Most upvoted comments

Please follow the steps https://youtu.be/VOCRBdzHEqM

umarnsisar021 on Aug 19, 2023

@0xcD3v instead of dynamically changing tracksViewChanges prop you can try to set it to false, create a ref to Marker component and manually redraw the marker after the image is loaded, so you would have something like this:

import type { MapMarker } from 'react-native-maps';
...

const markerRef = useRef<MapMarker>(null);
...

<Marker
    ref={markerRef}
    tracksViewChanges={false}
    ... >
    <Image
        fadeDuration={0}
        onLoad={
            Platform.OS === 'android'
		? markerRef.current?.redraw
		: undefined
	}
        ...
    />
</Marker>

I think redraw wasn’t implemented on iOS (at least on Apple Maps as it’s unnecessary) and can crash the app, so use it only on Android. It probably won’t resolve problems with occasional improper rendering (to resolve it you can try manually redraw marker using redraw function after child of Marker component was changed - adding some delay/timeout before executing redraw also could help), but it should improve performance a bit.

kuczi55 on Sep 22, 2023