React native maps rerender on marker press

I’m encountering an issue with React native maps. I try to put markers on my maps, and highlight the pressed marker. I wouldn’t think this would be that tricky 🙂

Here’s how I render my markers:

function renderMarkers() {
    const shopsFiltered = shops.filter((shop) => {      
      return shop.hasOwnProperty('latitude') && shop.hasOwnProperty('longitude') && shop.latitude && shop.longitude
    return => {
      const isInWallet = => {
        return card.hasOwnProperty('company') && shop.hasOwnProperty('company') && ===;
      const isCurrentMarker = === currentMarkerCardId;
      const latLng = { latitude: shop.latitude, longitude: shop.longitude };
      return <Marker  
        onPress={() => onMarkerPress(}
        {isCurrentMarker && // I had to do this, since the dimensions weren't updated using style prop...
            source={isInWallet ? require('../assets/images/explorer/pin-on.png'):require('../assets/images/explorer/pin-off.png')}
            style={styles.mapMarkerCurrent }
        {!isCurrentMarker &&
            source={isInWallet ? require('../assets/images/explorer/pin-on.png'):require('../assets/images/explorer/pin-off.png')}


When I press a marker:

function onMarkerPress(id) {

setCurrentMarkerCardId is a useState hook, and therefore rerender the view. That’s a problem in my case, because the whole map rerender (= it recenter the map on the user’s position) and causes the map to be laggy.

However, I see the issue, but I don’t know how to update the pressed marker value without rerendering the whole map.

Any ideas?


Still using my component state, I’m able to hack this map:

function onMarkerPress(id, coordinate) {
      region: {
        latitude: coordinate.latitude,
        longitude: coordinate.longitude

And I had to set moveOnMarkerPress={false} on the MapView component.

So, basically, on each Marker press, I’m updating state with Marker’s latlng, and rerendering the map with the pressed Marker’s latlng used as the center of the map.

It feels hacky, and it’s not perfect. I can’t use animatetoregion method : as I updated the state, the MapView rerenders and cut the anim.

Stack Overflow Asked by enguerranws on January 28, 2021

1 Answers

One Answer

Ok, I'm feeling really silly.

The answer was just there the whole time. I made a mistake using region prop, when I should use initialRegion on the MapView component (that I didn't include in the question :/), which, according to the doc is only used when the component has mounted:

Changing this prop after the component has mounted will not result in a region change.

Correct answer by enguerranws on January 28, 2021

Add your own answers!

Related Questions

How to determine the number of negation words per sentence

2  Asked on January 3, 2021 by user14289862


Scala getClass.getResource() returning null

4  Asked on January 3, 2021 by tower


Use background image instead of border

1  Asked on January 2, 2021 by user3808307


Appended messages collides with previous data

1  Asked on January 2, 2021 by nancy-mooree


My gRPC-Test Project just work on localhost

1  Asked on January 2, 2021 by blindmeis


URL constructor appends ‘/’ at the end of the url

0  Asked on January 2, 2021 by ayusch-jain


Using the AWS EC2 Query API

1  Asked on January 2, 2021 by xliff


guidata not updating in MATLAB GUI

3  Asked on January 2, 2021 by matias-andina


Change long click delay

7  Asked on January 1, 2021 by fhucho


Dynamic parameters startWith Rxjs

1  Asked on January 1, 2021 by luden


Passing variables from a HTML form to PHP

2  Asked on January 1, 2021 by jim-r


Ask a Question

Get help from others!

© 2022 All rights reserved.