SymbolLayer not shown when rendering custom icons

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.

[mfazekas]

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

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