react-native-maps: 0.27.0 breaks markers with tracksViewChanges={false} on Google Maps

Bug

Custom map markers with tracksViewChanges={false} disappear following version update from 0.26.1 on Google maps (Android). They remain visible on Apple Maps (iOS). They show when tracksViewChanges={true} but this has documented performance issues so it’s not a practical fix.

Environment info

React native info output:

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 28.41 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 13.7.0 - ~/.nvm/versions/node/v13.7.0/bin/node
    npm: 6.13.6 - ~/.nvm/versions/node/v13.7.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 26, 28, 29
      Build Tools: 28.0.3, 29.0.1
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5692245
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5

Library version: 0.27.0

Steps To Reproduce

Try viewing a Google Map on an Android device with a custom marker
Note how it’s invisible 😦 …

Describe what you expected to happen:

For them to display!

Reproducible sample code

https://github.com/vonkanehoffen/planning-alerts/blob/d46ba282f1c31e5f3daee17aeaf0daf278b879af/frontend-mobile/src/screens/home/user-location-map.component.js#L150

Aware this is quite a complex repo - I’ll get a basic one together for testing when I can. Thought I’d make this ticket in the meantime to see if anyone else is experiencing the problem? Thanks!

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 4
Comments: 25

Most upvoted comments

We had the same issue where all Markers had disappeared on Android phones. For performance reasons we had to set tracksViewChanges={false}, but this disables any drawing of images on Android. Since we want to also change the image if the Marker is selected this is a real problem. Like @serbanstef suggested we need to somehow re-render the Markers manually. His solution didn’t fully work for us so we adopted his idea and tried a little different approach:

We tried to make use of the redraw method (https://github.com/react-native-maps/react-native-maps/blob/master/docs/marker.md#methods) and found a working solution!

For Android fadeDuration={0} is important because if the source of the Image changes Android starts a fade animation with a default duration of 300ms. If we don’t zero this the redraw will run to early and a semi-transparent image is shown.

const markerRef = useRef<Marker>(null);

const doRedraw = () => {
  markerRef.current?.redraw();
};

<Marker
      ref={markerRef}
      coordinate={coordinate}
      tracksInfoWindowChanges={false}
      tracksViewChanges={false}
      onPress={() => onSelectPartner(partner)}>
      <Image
        source={selected ? icons['pinSelected'] : icons['pin']}
        fadeDuration={0}
        onLoadEnd={doRedraw}
        style={{
          width: 40,
          height: 40,
          resizeMode: 'contain',
        }}
      />
</Marker>

+44

ingowonner on Jun 2, 2021

I have the same problem in 0.27.1 on Android (RN 0.63.4). Markers blink when changing region.

DentVega on Feb 24, 2021

In my case a workaround was to re-render the Marker like this:

key={someState} tracksViewChanges={Platform.OS === ‘android’ ? false : true} onLayout={() => setSomeState(someNewState)}

serbanstef on Feb 25, 2021

@draperunner Yes, it worked. Thanks

JoaoLSA on Mar 20, 2020

Just published 0.27.1 that should address the issue for now. I’m going to leave this ticket open for now as we revisit the original PR that introduced the issue.

christopherdro on Mar 19, 2020

@christopherdro I have the same issue with custom markers using tracksViewChanges={false} disappearing on Android with v0.27.0. I have tested your branch (npm i -S react-native-community/react-native-maps#revert) and can confirm that it fixes the issue.

draperunner on Mar 18, 2020

I tried all the possibilities for those parameters and it seems like markers are rendered in two cases: if tracksViewChanges is not present or if tracksViewChanges={true}, the other parameter doesn’t seem to have any effect on marker rendering

arcodergh on Mar 17, 2020

I can confirm that this happens in my code also after upgrade

kneza23 on Mar 16, 2020