SymbolLayer fading out when zooming out of map

Describe the bug SymbolLayer is flickering/fading when zooming out (in sync with text labels on the map).

To Reproduce Zoom out of the map.

const iconStyles =  {
  icon: {
    iconImage: ['get', 'icon'],
    iconSize: 1,
    iconAllowOverlap: true,
  }
};

return (
  <MapboxGL.MapView
    scrollEnabled={!this.initialFit}
    ref={(ref) => { this.map = ref; }}
    style={styles.flex}
    logoEnabled={false}
    contentInset={[16, 16, 200, 16]}
    onRegionDidChange={(region) => this.setState({ region })}
  >
    <MapboxGL.UserLocation onUpdate={(e) => this.setState({ userLocation: e ? e.coords : null })} />
    <MapboxGL.Images images={images} />
    <MapboxGL.ShapeSource
      id="buses"
      shape={vehiclesGeo}
    >
      <MapboxGL.SymbolLayer id="bus" iconImage="marker" style={mappyStyles.icon} />
    </MapboxGL.ShapeSource>
    <MapboxGL.Camera minZoomLevel={2} maxZoomLevel={18} />
  </MapboxGL.MapView>
);

Expected behavior The SymbolLayer should not be flickering.

Screenshots

Versions (please complete the following information):

• Platform: iOS
• Device: iPhone 8
• Emulator/ Simulator: No
• OS: iOS 13.4.1
• react-native-mapbox-gl Version 8.0.0
• React Native Version 0.62.2

[jbreuer95]

It happens only when zooming out. If you need more info please let me know 😃

Platform: Android Device: Pixel 4a Emulator/ Simulator: No OS: Android 11 react-native-mapbox-gl Version 8.3.0 React Native Version 0.64.2 Maplibre Version 9.2.1

 const icon = {
    iconImage: ['get', 'icon'],
    iconAllowOverlap: true,
    iconSize: 0.3,
  };

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <MapboxGL.MapView
        ref={c => {
          map.current = c;
        }}
        style={styles.map}
        styleURL="https://example.com/style.json"
        logoEnabled={false}
        attributionEnabled={false}
        rotateEnabled={false}>
        <MapboxGL.Camera
          zoomLevel={0}
          minZoomLevel={0}
          maxZoomLevel={7}
          maxBounds={{
            ne: [180, -85.051129],
            sw: [-180, 85.051129],
          }}
        />
        <MapboxGL.Images
          images={{
            tower: require('./assets/tower.png'),
            shrine: require('./assets/shrine.png'),
          }}
        />
        {/* {renderTowers()} */}
        <MapboxGL.ShapeSource id="towers" shape={getTowers()}>
          <MapboxGL.SymbolLayer id="towers" style={icon} />
        </MapboxGL.ShapeSource>
        <MapboxGL.ShapeSource id="shrines" shape={getShrines()}>
          <MapboxGL.SymbolLayer id="shrines" style={icon} minZoomLevel={1} />
        </MapboxGL.ShapeSource>
      </MapboxGL.MapView>
    </View>
  );
  
 const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 54,
    backgroundColor: 'black',
    justifyContent: 'center',
    alignItems: 'center',
  },
  map: {
    flex: 1,
    height: '100%',
    width: '100%',
  },
});

[ferdicus]

@ferdicus that was what i was afraid of. Thanks for clarifying 😃

If it makes you feel any better, I feel like this is more straight forward than the iOS part 😅