React Native Maps: Custom Markers cause extreme lag and slow down on android

Question

I load up to about 2000 markers on the map. It works fine for the first few seconds but then slows down sharply. To fix it I need to clear the app data, then it only works for a few seconds and again like before.

const mapMarkers = [
    {id: 1, code: "603778", lat: 35.761791, lng: 51.389438},
    {id: 2, code: "788621", lat: 35.712278, lng: 51.361785},
    {id: 3, code: "129667", lat: 35.674757, lng: 51.485328},
    {id: 4, code: "999646", lat: 35.772885, lng: 51.446735},
    {id: 5, code: "111524", lat: 35.755656, lng: 51.446774},
    //...
];

let markers = mapMarkers.map(marker => {
    return (<Marker
        key={marker.code}
        coordinate={{latitude: marker.lat, longitude: marker.lng}}
        image={require('./images/markers.png')}
        onPress={() => console.log("pressed")}
    />)
});

I tested on emulator and physical device and had problems with both.

tip: I use react-native-map-clustering package for marker cluster.

Mahdi Bashirpour · Accepted Answer · 2021-06-10T09:23:37.133

30

I tried two ways that would improve performance a bit

change key to index (key={index})

mapMarkers.map((marker, index) => {
    return (<Marker
        key={index}
        ...
    />)
 });

disable props tracksViewChanges={false} or add icon props instead of image

mapMarkers.map((marker, index) => {
    return (<Marker
        key={index}
        tracksViewChanges={false}
        icon={require('./images/markers.png')}
        ...
    />)
});

edited Jun 10 '21 at 09:23

answered Jan 13 '20 at 12:46

Mahdi Bashirpour

17,147
12
117
144

3

key with index is bad practice, there is no performance optimization on it, it has drawbacks – beka kokhodze Jun 12 '20 at 16:01
3

@beqakokhodze Unless you are mutating the list, it doesn't have any bad impact, however agree with you that it's not going to help in performing better. – Raushan Sep 18 '20 at 13:49
8

Setting `tracksViewChanges` is the winner, made a huge difference for me – koosa Dec 03 '20 at 19:18
Is there any way to solve [my problem](https://stackoverflow.com/questions/71124554/how-to-optimise-react-native-maps-performance)? tks so much – Zuet Feb 21 '22 at 10:01
tracksViewChanges={false} worked for me. Thanks – Kushal Desai Apr 29 '22 at 10:28
The "tacksViewChanges={false}" was the one for me, especially on android google maps. Thank you! – Dillion Cixx Apr 25 '23 at 14:11

Mafei · Answer 2 · 2021-04-06T20:27:45.503

1

if you use MapViewDirections you have to pass props as optimizeWaypoints=true the the issue will be gone. and fully re run the program.

<MapViewDirections optimizeWaypoints={true}/>

edited Apr 06 '21 at 20:27

answered Apr 06 '21 at 17:33

Mafei

3,063
2
15
37

React Native Maps: Custom Markers cause extreme lag and slow down on android

2 Answers2

Linked