Symbol Layer aren't displayed on Android

Describe the bug The symbols aren’t displayed on Android with the 7.0.1 release It works fine on iOS It used to work fine on the 7.0.0rc3

To Reproduce

  <View>
    <MapboxGL.Images images={{ assets: icons }} />
    <MapboxGL.ShapeSource
      id="scooters"
      shape={shape(collection)}
      hitbox={{ width: 10, height: 10 }}
      {...props}
      onPress={({ nativeEvent }) => onPress(nativeEvent.payload.properties)}
    >
      <MapboxGL.SymbolLayer
        id="scooter"
        style={styles.scooter}
        minZoomLevel={minZoomLevel}
      />
    </MapboxGL.ShapeSource>
  </View>

Screenshots

Left: Expected -> iOS Right: Issue -> Android

Versions:

• Platfrom: Android
• Device: Honor 8X
• OS: Android 9
• SDK Version: 28
• React Native Version: 0.59.10

[karlguillotte]

I just fixed my problem. Apparently, I have not completely updated my style to the latest style specs. Older specs still work on iOS, but they do not on Android.

{
        iconImage: '{icon}', // PREVIOUS STYLE SPECS
        iconImage: ['get', 'icon'],  // NEW STYLE SPECS
        iconAllowOverlap: true,
        iconSize: 0.35,
    }

@tinmar33 That might be your problem!

[TamNhiDuong]

I just fixed my problem. Apparently, I have not completely updated my style to the latest style specs. Older specs still work on iOS, but they do not on Android.

{
        iconImage: '{icon}', // PREVIOUS STYLE SPECS
        iconImage: ['get', 'icon'],  // NEW STYLE SPECS
        iconAllowOverlap: true,
        iconSize: 0.35,
    }

@karlguillotte Hey! I know this is a pretty old post but I am also having the same problem. Could you link me to some docs for this?

This here —> iconImage: ['get', 'icon'], // NEW STYLE SPECS is still a bit vague for me 😅

My code for context

export default function Map() {
  const styles = useStyles()
  const { hasPermissionsEnabled } = useCheckLocationPermissions()
  const point = {
    type: "Point",
    coordinates: [38.9154456, -94.659888],
  }

  return (
    <View style={styles.container}>
      <View style={styles.wrapper}>
        <MapboxGL.MapView
          style={styles.mapBox}
          zoomEnabled
          //styleURL="mapbox://styles/calvin-occ/ckt38dnwn02eu17satqicugel"
        >
          <MapboxGL.UserLocation
            visible={hasPermissionsEnabled}
            showsUserHeadingIndicator={hasPermissionsEnabled}
            renderMode="native"
          />
          <MapboxGL.Camera
            defaultSettings={{
              centerCoordinate: [-94.6579, 38.917256],
              zoomLevel: 15,
            }}
            followUserLocation
          />
          <MapboxGL.ShapeSource
            id="symbolLocationSource"
            onPress={() => console.log("Symbol was pressed")}
            shape={point}
          >
            <MapboxGL.SymbolLayer
              id="symbole"
              minZoomLevel={1}
              style={{
                iconImage: exampleIcon, // <---- What should it look like  here??
                iconSize: 10,
                iconHaloWidth: 10,
                iconHaloColor: "#314ccd",
                iconOpacity: 1,
                iconColor: "#314ccd",
                iconAllowOverlap: true,
              }}
            />
          </MapboxGL.ShapeSource>
        </MapboxGL.MapView>
      </View>
    </View>
  )
}

hi, I found the doc here (not sure if adding ‘images’ to ShapeSource is deprecated or not): https://github.com/nitaliano/react-native-mapbox-gl/blob/master/docs/ShapeSource.md. Image doc (Looks like you need to add image to Image component first before using it in SymbolLayer): https://github.com/react-native-mapbox-gl/maps/blob/master/docs/Images.md Style doc: https://github.com/react-native-mapbox-gl/maps/blob/master/docs/StyleSheet.md Example: https://github.com/react-native-mapbox-gl/maps/blob/master/example/src/examples/SymbolCircleLayer/ShapeSourceIcon.js