Maps: Symbol Layer aren't displayed on Android

[tinmar33]

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

[allthetime]

Hi, can I possibly see the rest of the code, specifically how this works:

shape={shape(collection)}

[tinmar33]

import { featureCollection, point } from '@turf/helpers'

const feature = ({ coordinates, status, hasBoost, ...props }) => {
  const type = hasBoost ? 'boosted' : 'scooter'
  const icon = `${type}_${status}`

  return point(
    coordinates,
    {
      icon: icons[icons.indexOf(icon)] || icons[0],
      coordinates,
      ...props
    },
    { id: props.id }
  )
}

const shape = (collection = []) => featureCollection(collection.map(feature))

And collection is my coordinate list

[ethaqnix]

I have succed to make it work on this way neither, I have to pass the icon directly on SymbolLayer style and display one ShapeSource for each marker type.

class CustomMarkerTest extends React.PureComponent<Props, OwnState> {
  constructor(props: Props) {
    super(props);
  }

  handleClick = (e: { nativeEvent: { payload: { id: string; }; }; }) => {
    this.props.openModal(e.nativeEvent.payload.id);
  }

  render() {
    return (
      <MapboxGL.ShapeSource
        hitbox={{ width: 44, height: 44 }}
        id='markers_shapesource'
        shape={{
          type: 'FeatureCollection', features: this.props.markerFeatures
        }}
        onPress={this.handleClick}
      >
        <MapboxGL.SymbolLayer
          id={`markers_symbollayer`}
          style={mapStyles.icon}
        >
        </MapboxGL.SymbolLayer>
      </MapboxGL.ShapeSource>
    );
  }
}

const mapStyles = {
  icon: {
    iconImage: markeIcon,
    iconIgnorePlacement: true,
    iconSize: 0.06
  }
};

I think the problem isn't on ShapeSource but on Images component.

[karlguillotte]

I am experiencing the same issue.

Tried with 7.0.1 and 7.0.0-rc3 and neither are working on Android. It is working fine on iOS devices for both versions.

I have had similar issues (version 6.x) in the past with layer and have added a key to the components, this time it does not work.

[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!

[allthetime]

@karlguillotte that solved my problem too. Took me a while to figure it out. Should be better documented.

[tinmar33]

@karlguillotte well done, that solved it ! 👌

It's wired that it's working on iOS with the old style specs as well