Android custom map marker has bad performance

[RyanTG]

Right now we're using default markers on Android, since the custom ones we've tried really hurt performance. With the latest version 1.x of react-native-maps, this still seems to be the case. There have been various issues over the years about this, but no clear indication that it's been fixed. Recent one react-native-maps/react-native-maps#4161 (not entirely sure if that's our issue)

This person claims they solved it: https://dev.to/ajmal_hasan/react-native-map-optimisation-59na
But I haven't dug deep into that post. Almost seems like their solution is to merely add trackViewChanges={false} for Android, which is certainly something I've already tried.

Official docs: https://github.com/react-native-maps/react-native-maps#rendering-a-marker-with-a-custom-image
say that using <Image ...> is better than . I've tried both. But perhaps I didn't do it perfectly?

Another general note is that Expo Go performance is, overall, worse than using actual builds. That's because Expo Go is doing a bunch of bug monitoring and stuff. So sometimes you need actual builds to see true performance. But I'm sure that usage through Expo Go would give us an idea if some solution is working.

[RyanTG]

Update to this is that adding trackViewChanges={false} to the marker has helped a lot (I was previously adding it to the mapview, which was wrong).

There still seems to be an issue where the hearts don’t always render. Some have noted that you should track changes while the markers are loading then change to false after they’ve loaded. I’ll edit this comment later with the examples of that that I found.

[RyanTG]

The recommended use of tracksViewChanges is to enable when the marker
is being rendered or animated, then to disable it.

An example of use of tracksViewChanges would be to set it to false once
onMapReady has fired. This can be accomplished by toggling a state
property (e.g. initialized), and passing it to the child map markers
in their tracksViewChanges prop. Markers would then render correctly
on map load; CPU use falls off once the tracking ceases.

react-native-maps/react-native-maps#1705 (comment)

If you are loading an image inside the marker, you could start with tracksViewChanges={true}, listen to the load even on your image, and then change it to false.

Others use a timeout of like .4 seconds and then set it to false when the pins are first loading. Seems sketchy, though.

react-native-maps/react-native-maps#2082

[chanphiromsok]

I got a slow marker in android too but here is my solution set trackViewsChange={false} on Marker then call redraw
below are the example you can render with your own coordinate and check condition before rendering those marker in your own

Example for clusterMarker

const markerList = [1, 2, 3, 4, 5, 6];

const Cluster = () => {
    const markersRef = React.useRef({}) as MutableRefObject<{
        [MarkerIdentifier: string]: Marker;
    }>;
    return (
        <>
            {markerList.map(marker => {
                return (
                    <Marker
                        coordinate={{ latitude: 1, longitude: 1 }}
                        ref={ref => {
                            if (ref) markersRef.current[`${marker}`] = ref;
                        }}
                    >
                        <Image
                            source={{ uri: 'image' }}
                            style={{ width: 36, height: 36 }}
                            onLoad={() => {
                                markersRef.current[`${marker}`]?.redraw();
                            }}
                        />
                    </Marker>
                );
            })}
        </>
    );
};

Exmaple Single Marker

const CustomMarker = () => {
    const markersRef = React.useRef({}) as MutableRefObject<Marker>;
    return (
        <Marker
            coordinate={{ latitude: 1, longitude: 1 }}
            ref={ref => {
                if (ref) markersRef.current = ref;
            }}
        >
            <Image
                source={{ uri: 'image' }}
                style={{ width: 36, height: 36 }}
                onLoad={() => {
                    markersRef.current?.redraw();
                }}
            />
        </Marker>
    );
};

[RyanTG]

Resolved via switching to rnmapbox
#498