Slow Performance Issue with Popup Markers on React Native Maps

Question

The issue I'm encountering is in my React Native application where I want to display a map with markers on it (3000 markers). I would like that when I select a marker, a popup appears. Currently, I have only added information to this popup, but in the future, I would like to add possible actions to it. My program works quite correctly, but the problem is that when I select a marker, the popup takes a very long time to appear (1 minute), and it takes just as long to close.

          {markers.map(marker => (
            <Marker
              key={marker.id}
              coordinate={marker.coordinate}
              title={marker.id}
              tracksViewChanges={false}
              image={getImageForStatus(marker.status, marker.flashed)}
              onPress={() => handleMarkerPress(marker)}
            />
          ))}
        </MapView>
      )}

      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(false);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text>ID: {selectedMarker && selectedMarker.key}</Text>
            <Text>Status: {selectedMarker && selectedMarker.status}</Text>
            <Text>Last Status Update: {selectedMarker && selectedMarker.lastStatusUpdate}</Text>
            <Text>Name: {selectedMarker && selectedMarker.title}</Text>
            <Text>Description: {selectedMarker && selectedMarker.description}</Text>
            <Button title="Close" onPress={() => setModalVisible(false)} />
          </View>
        </View>
      </Modal>
    </View>
  );
}

I would like for the popup to appear immediately when I press on a marker. Do you know where this problem might be coming from?

Answer 1

So the way you can solve this issue is without default react-native modal. From the example provided once you call setModalVisible you're re-rendering the whole map and the 3000 markers, I guess that react waits until the markers are drawn again on the screen and then it is displaying the popup.

Solution:

• Try to use clustering https://github.com/venits/react-native-map-clustering - This way you will have fewer markers to re-draw.

• Try to use a popup/modal that doesn't involve a change in the component state, which will not redraw the markers at all. https://github.com/gorhom/react-native-bottom-sheet. This library uses a reference to show the modal and it is blazingly fast.