Android custom Markers with children content have sporadic flashing/glitches (see example video)

[trooperandz]

Summary

Beginning with react-native-maps version 1.9.0, map Markers composed of children content (described in the documentation as Children Content) are showing sporadic flashes/glitching on Android. This does not occur with versions 1.8.4 and below.

In this particular case, the Markers are being rendered from an iterable list via map, and they are of SVG format. The particular screen in question is only rendering one time (there are not multiple renders taking place).

The newest versions of react-native-maps were tried as well, with the same flashing occurring (1.10.0, 1.10.3).

Reproducible sample code

import * as React from 'react';
import { View } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import PinIcon from 'assets/icon-pin.svg';

<MapView>
  {markers.map((marker) => {
    return (
      <Marker
        identifier={`id-${marker.id}`}
        key={`key-id-${marker.id}`}
      >
        <View style={styles.pin}>
          <PinIcon
            fill={color}
            height={imageDimensions}
            width={imageDimensions}
          />
        </View>
      </Marker>
    );
  })}
</MapView>

const styles = StyleSheet.create({
  pin: {
    backgroundColor: 'rgba(0,0,0,0.1)',
    borderRadius: 13,
    height: 25,
    width: 25,
  },
})

Steps to reproduce

Create a map, and render a MapView which includes Markers with children content rendered from an iterable list. Observe the flashing/glitching of the markers.

Expected result

Expect no flashing/glitches in the Marker content to occur.

Actual result

See the flashing/glitches below:

marker-glitch.mp4

React Native Maps Version

1.9.0

What platforms are you seeing the problem on?

Android

React Native Version

0.73.4

What version of Expo are you using?

Not using Expo

Device(s)

Samsung Galaxy S21 (Android 13)

Additional information

No response

[pauladapptor]

Ran into a similar issue, if you remove the image as a child and set it as a prop, this should solve the flickering. Below is just some sudo code of your example, you may have to tweak it for your asset.

<MapView>
  {markers.map((marker) => {
    return (
      <Marker
        identifier={`id-${marker.id}`}
        key={`key-id-${marker.id}`} 
        image={PinIcon}/>
    );
  })}
</MapView>

[Jin-seop]

The problem is that the trackViewChanges function doesn't work properly.

const [tracksView, setTracksView] = useState(true); //add 

useEffect(() => { //add
  if(Platform.OS === 'android'){
    setTimeout(()=>{
      setTracksView(false);
    },100)
  }
},[])

<MapView>
  {markers.map((marker) => {
    return (
      <Marker
        identifier={`id-${marker.id}`}
        key={`key-id-${marker.id}`}
        tracksViewChanges={tracksView} //add
      >
        <View style={styles.pin}>
          <PinIcon
            fill={color}
            height={imageDimensions}
            width={imageDimensions}
          />
        </View>
      </Marker>
    );
  })}
</MapView>

[chanphiromsok]

try to custom marker and set trackView to false

import React, { ReactNode, useEffect, useState } from 'react';
import { StyleProp, ViewStyle } from 'react-native';
import { Marker, MarkerAnimated, MapMarkerProps } from 'react-native-maps';

interface Props extends MapMarkerProps {
  animate?: boolean;
  children: ReactNode;
  renderChangeTime?: number;
  style?: StyleProp<ViewStyle>;
}
export default function OptimizedMarker({
  animate = false,
  children,
  renderChangeTime = 2000,
  ...props
}: Props) {
  const [tracksViewChanges, setViewChanges] = useState(true);

  useEffect(() => {
    let timerId:NodeJS.Timeout

    if (tracksViewChanges) {
      timerId = setTimeout(() => {
        setViewChanges(false);
      }, renderChangeTime);
    }

    return () => {
      clearTimeout(timerId);
    };
  }, []);

  if (animate) {
    return (
      <MarkerAnimated {...props} tracksViewChanges={tracksViewChanges}>
        {children}
      </MarkerAnimated>
    );
  }

  return (
    <Marker tracksViewChanges={tracksViewChanges} {...props}>
      {children}
    </Marker>
  );
}

and try use png instead of svg

[andresvega-sourcetoad]

The issue ocurss when updated to 1.10.3 and the same behavior on 1.11.3 trackViewChanges on false doesn't solve the problem for me.

[jeffinhk]

The issue ocurss when updated to 1.10.3 and the same behavior on 1.11.3 trackViewChanges on false doesn't solve the problem for me.

In my case trackViewChanges on false solves the issue temporarily but instead stops the Marker to render when entering the app after closing. So now the custom marker performance is either flickering or not render at all

[salah-ghanim]

@jeffinhk in our application the usage of onMapReady on android solves the issue ...

@trooperandz have you tried using both onMapReady and tracksViewChanges to be false, it should solve the problem completely

[nahuelprinsich]

I'm facing the same issue. If I Take the last advice using tracksViewChanges with onMapReady the flickering stops but some markers get stuck with an image from another marker.
Also tried another advices but nothing seems to work, for example use googleRender='LEGACY' or use a timer to set tracksViewChanges to false after a second.

[trooperandz]

@jeffinhk in our application the usage of onMapReady on android solves the issue ...

@trooperandz have you tried using both onMapReady and tracksViewChanges to be false, it should solve the problem completely

@salah-ghanim yes I tried both of these approaches; I need tracksViewChanges to be true, because my pins react to presses (change to larger pins to show that they have been pressed by the user. Setting this to false breaks the UI updates).

[nahuelprinsich]

I fixed the problem using googleRenderer={'LEGACY'}

[trooperandz]

I fixed the problem using googleRenderer={'LEGACY'}

@nahuelprinsich interesting; this does not fix it for me unfortunately. Same results as before.