React-native-mapbox-gl: Custom Icons(Images) on symbol layer are blinking/reloading up on zooming

[aurimusblack]

It's a bit annoying and degrades UX

[ferdicus]

I've got the same issue, with another use case: Writing a turn by turn navigational system, I move the map along according to the newly received gps position. The position is represented by a .png.

At times this icon/ image simply disappears, simply to reappear seconds later.

---

OS: OSX 10.13.4
Platform: Android 7 (Asus ZenPad 3)
RN: 0.55.3
mapbox-gl: 6.1.1

---

Source:

import navIcon from './Images/navIcon.png';¬
// additional code omitted 

render() {
  const styles = Mapbox.StyleSheet.create({
    icon: {
      iconImage: '{icon}',
      iconSize: Mapbox.StyleSheet.source(
        [['nav', 0.6]],
        'icon',
        Mapbox.InterpolationMode.Categorical
      ),
      iconPitchAlignment: 'map'
    }
  });

  const point = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        id: 'my-position',
        properties: {
          icon: 'nav'
        },
        geometry: {
          type: 'Point',
          coordinates: [<lng>, <lat>]
        }
      }
    ]
  };

  return (
  <Mapbox.ShapeSource
    id="symbolLocationSource"
    shape={point}
    images={{ nav: navIcon }}
  >
    <Mapbox.SymbolLayer id="symbolLocationSymbols" style={styles.icon} />
  </Mapbox.ShapeSource>
  );
}

[ferdicus]

@nitaliano: Additionally I noticed, that this seems to only happen when I have the Map pitched.
The image does not flicker/ disappear for me, if the ViewPort is perpendicular to the Map.

Might it have something to do with the view distance on the map?

[jsina]

I have another problem with it on zooming out of map just showed one icons and when I'm zooming in another icons will appear. do you know how could I solve it. issue 1235

[AkAyush]

@nitaliano: Similarly SymbolLayer with remote images on zooming in & out mapbox re downloads the images rather than fetching image data from cache

[makirby]

We are just using a SymbolLayer with iconImage set to a locally loaded image and are experiencing this behaviour on both platforms. It occurs more often on Android though.

[howardsj9]

Hi everyone,

I hope you are all doing well. The comments so far are very helpful.

What is the interim solution for this issue?

Thank you very much in advance!

[dorthwein]

Running into this as well - also triggering a crash :( Mainly on android.

[dorthwein]

Is there any progress on this - still running into it and seems to cause android screen tearing -> then crashing

[atomheartother]

Any news on this? We are also encountering this using custom icons uploaded in the style with mapbox studio. This only happens when we zoom in/out fast.

Version: 6.1.1
OS: Android

[SasjaVDD]

To add some more information. In my case the flickering does seem to coincide with either the loading of tiles (e.g. when zooming out the flickering is most intense at a lower zoomlevel when large pieces of the globe are loaded) or changes on the map itself (e.g. when the visible streets change or street name labels appear or disappear).

[makirby]

I no longer have this issue now we are using a more up to date version of the SDK. https://github.com/react-native-mapbox/maps

[kristfal]

This is an upstream issue with the native SDKs. You can resolve this by migrating to the new repo

[salbatore]

This bug continues to occur exactly as described in the first comment. Validated on iOS with the latest version of this component. Have you any solution occurs?