Maps: SymbolLayer not shown when rendering custom icons

[emmx]

I'm trying to add a different pin for each feature's category like follows, but pins are not visible no matter what I do. I'm surely missing something so let me ask 4 quick questions:

1. What am I missing that this code below doesn't work (at least on Android)?
2. Is this the way to go to show custom pins based on the category of the features plus a default pin?
3. Is this approach fine in terms of performance when you show many hundred pins on a map?
4. Is it a better idea to create a .png image of each pin and use that instead of a CustomIcon (which renders at least two Icon inside a View)?

<MapboxGL.ShapeSource shape={this._createGeoJson()}>
  // Restaurant category
  <MapboxGL.SymbolLayer filter={["==","category", "foo"]}>
    <CustomIcon name="foo" color="#ff5c5c" />
  </MapboxGL.SymbolLayer>

  // Bank category
  <MapboxGL.SymbolLayer filter={["==","category", "bar"]}>
    <CustomIcon name="bar" color="#159b00" />
  </MapboxGL.SymbolLayer>

  // Many other SymbolLayers for other categories...
  //<MapboxGL.SymbolLayer ...

  // Features with no category
  <MapboxGL.SymbolLayer filter={["!", ["has", "category"]]}>
    <CustomIcon name="default" color="#5c94ff" />
  </MapboxGL.SymbolLayer>
</MapboxGL.ShapeSource>

Where CustomIcon renders the corresponding MaterialCommunityIcons over a pin-like Image.

[mertozylmz]

@emmx You can not directly use to . But you can look at this link. So if you want use custom vector icon.
https://github.com/nitaliano/react-native-mapbox-gl/issues/1267

[emmx]

I haven't tried yet but some people commented on that issue thread that it didn't work for them.

In general what do you use? Do you have a png image for each pin you want and then import them as images?

I can do that if needed, I just haven't found any compelling example on the docs.

[mertozylmz]

I generally use png icon. I think you too use png. I gave you this link because you wanted it. (For Vector icon). Normally png/jpg is used.

[emmx]

That wouldn't work for me, I need to set some params like the color and icon image from react-native-vector-icons.

Being able to use your own <CustomIcon> to <MapboxGL.Images> would be nice, there must be a way to avoid having the image exported beforehand as it's sometimes impossible!

Any other idea?

[mertozylmz]

I don't know. Because I don't use react-native-vector-icon for Mapbox.
Maybe you can use SymbolLayer props. (textFont ...)

[mfazekas]

We only support png images. You might be able to generate PNG from vector fonts and use that.