AnswerBun.com

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 shopsFiltered.map((shop) => {
      
      const isInWallet = cards.data.filter(card => {
        return card.hasOwnProperty('company') && shop.hasOwnProperty('company') && card.company.objectId === shop.company.objectId;
      }).length;
      const isCurrentMarker = shop.company.objectId === currentMarkerCardId;
      const latLng = { latitude: shop.latitude, longitude: shop.longitude };
      return <Marker  
        key={shop.objectId}
        coordinate={latLng}
        onPress={() => onMarkerPress(shop.company.objectId)}
      >
        {isCurrentMarker && // I had to do this, since the dimensions weren't updated using style prop...
          <Image
            source={isInWallet ? require('../assets/images/explorer/pin-on.png'):require('../assets/images/explorer/pin-off.png')}
            style={styles.mapMarkerCurrent }
            resizeMode="cover"
            resizeMethod="resize"
          />
        }
        {!isCurrentMarker &&
          <Image
            source={isInWallet ? require('../assets/images/explorer/pin-on.png'):require('../assets/images/explorer/pin-off.png')}
            style={styles.mapMarker}
            resizeMode="cover"
            resizeMethod="resize"
          />
        }

      </Marker>
    });
  }

When I press a marker:

function onMarkerPress(id) {
  setBottomBoxOpacity(1);
  setCurrentMarkerCardId(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?

EDIT:

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

function onMarkerPress(id, coordinate) {
    setBottomBoxOpacity(1);
    setCurrentMarkerCardId(id);
    setMapState({
      ...mapState,
      region: {
        ...mapState.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 AnswerBun.com. All rights reserved.