React native map markers flicker on state update

Question

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

score 0 · Answer 1 · answered Apr 12 '20 at 08:36

0

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( ... );
})

answered Apr 12 '20 at 08:36

kkk

109
6

I've updated the question. The reason it doesn't work with memoization is because the marker image needs to be updated if it becomes active. – Nikhil Apr 12 '20 at 10:44
@Nikhil If there is a conditional expression using `activeMarker` inside map funciton, there must be re-rendering in the ordinal React way, using `props` and `state`. – kkk Apr 13 '20 at 10:40
@Nikhil To avoid this, use [Animated API](https://reactnative.dev/docs/animated) (or [Reanimated](https://software-mansion.github.io/react-native-reanimated/) ) to animate the value of opacity of `Icon`. – kkk Apr 13 '20 at 10:49

score 0 · Answer 2 · answered Jan 30 '21 at 15:45

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

React native map markers flicker on state update

2 Answers2