Android: Custom markers are not updated consistently

[fabiog27]

Summary

I have a custom marker that should change its background color when a boolean state variable is changed. The marker state seems not to update after initial render though.

Reproducible sample code

import React, {useEffect} from 'react';
import {View} from 'react-native';
import MapView, {Marker} from 'react-native-maps';

export default function App() {
  const [isSelected, setIsSelected] = React.useState(false);

  useEffect(() => {
    console.log('isSelected changed:', isSelected);
  }, [isSelected]);

  return (
    <MapView
      style={{flex: 1}}
      initialRegion={{
        latitude: 42,
        longitude: 30,
        latitudeDelta: 1,
        longitudeDelta: 1,
      }}
    >
      <Marker
        coordinate={{latitude: 42, longitude: 30}}
        tracksViewChanges={true}
        draggable={false}
        onPress={() => setIsSelected(!isSelected)}
      >
        <View
          style={{
            width: 100,
            height: 100,
            backgroundColor: isSelected ? 'red' : 'blue',
          }}
        />
      </Marker>
    </MapView>
  );
}

Steps to reproduce

Open the code above in a fresh React Native project, then click the marker.

Expected result

The marker's background color should toggle between blue and red when clicking on the marker.

Actual result

The marker's background color stays the same as was set on first render.

React Native Maps Version

1.24.3

What platforms are you seeing the problem on?

Android

React Native Version

0.78.0

What version of Expo are you using?

Not using Expo

Device(s)

Android Emulator (Pixel 9, Android 16), Pixel 4 (Android 13)

Additional information

I've already tried to track down this bug myself. It looked to me like the prop tracksViewChanges is not mapped to the Android native code anymore since the changes for Fabric support. I think the recent bugs around marker flickering are also related to the same and the marker update logic on Android needs a closer look.

I've tried to fix this myself but haven't made a lot of progress. However, I've already identified some files where other props are mapped, but tracksViewChanges isn't: https://github.com/fabiog27/react-native-maps/tree/fix/tracksViewChanges

[michaelloliveira]

same error!

[Jeius]

Same error. I tried to use redraw() method but as of the latest version: 1.24.3, the redraw() does not exist in the markerRef anymore. See https://github.com/react-native-maps/react-native-maps/issues/5530

[fabiog27]

This error still persists in the newest versions despite changes to tracksViewChanges. Is there any more information required?

[Jeius]

Any updates on this issue?

[fabiog27]

Still have the same error, see also https://github.com/react-native-maps/react-native-maps/issues/5790 and its linked issues.

[Jeius]

Same error. I tried to use redraw() method but as of the latest version: 1.24.3, the redraw() does not exist in the markerRef anymore. See #5530

The redraw() method is now back as of the version ^1.26.17.

[fabiog27]

Same error. I tried to use redraw() method but as of the latest version: 1.24.3, the redraw() does not exist in the markerRef anymore. See #5530

The redraw() method is now back as of the version ^1.26.17.

Thank you! With this there is now a workaround to manually redraw the marker when changes are made, but still I think this should really be handled by the library with tracksViewChanges.

[Jeius]

@fabiog27 If you are just using svg markers, you can try react-native-google-maps-plus. I am currently migrating into this library. It uses Google Maps SDK and it is more stable than react-native-maps as of now.