CODEWITHSUNDEEP
react-nativereact-native-mapsreact-native-map-clustering
Nikhil
Nikhil

Reputation: 785

React native map markers flicker on state update

We've multiple coordinates that we need to display on the map using markers. The marker clicked by the user has to be marked as active and have some operations performed for some other functionality.

When I update the state in onPress method of the marker all the markers flickers, probably due to re-rendering. I've added the unique key as well but it doesn't seem to work.

I've an array named markers which is used to render the markers on the map.

return markers.map(marker => (
      <Marker
        tracksViewChanges={false}
        tracksInfoWindowChanges={false}
        animationEnabled={false}
        identifier={marker.id}
        key={marker.id}
        coordinate={{
          latitude: marker.location.latitude,
          longitude: marker.location.longitude,
        }}
        onPress={() => {
          setActiveMarker(marker.id);  // State update using hook
        }}>
        //Rendering the custom marker image here
        {if(activeMarker === marker.id)
        (<Icon
          width={22}
          height={32}
          source={require('../../assets/images/marker.png')})
        else
         (<Icon
          width={22}
          height={32}
          source={require('../../assets/images/activeMarker.png')})
         }
        />
      </Marker>
));

The react-native-map version: 0.27.1

Upvotes: 2

Views: 6374

Answers (3)

Sarang Chaudhary
Sarang Chaudhary

Reputation: 467

For me it happened on Android:

Just add this param: tracksViewChanges={false} to Marker and it should work.

Also this issue is closed, please refer https://github.com/react-native-maps/react-native-maps/issues/3098

Upvotes: 0

Nino Bouchedid
Nino Bouchedid

Reputation: 91

For anyone seeing their markers flicker upon selection (if you change its style when selecting it), make sure you don't have two markers overlapped at the same exact position. I had this weird flickering issue and spent an hour trying to figure out what was going on, turns out I duplicated my dummy data and had two markers overlapped in every position 😂

Upvotes: 0

kkk
kkk

Reputation: 129

You can use React.memo to avoid expensive rendering.

https://reactjs.org/docs/react-api.html#reactmemo

const Markers = React.memo(({markers}) => {
  return markers.map( ... );
})

Upvotes: 0

Related Questions