React-native-mapbox-gl: Move layers to the front/back

[glennverschooren]

Hey,

Is it somehow possible the reorder/sort multiple ShapeSource components inside a MapView?
I'm trying to sort the ShapeSource components based on a type but it does not reorder the layers on the map.

renderFeatures(layers) {
   const types = {
     symbol: 0,
     line: 1,
     fill: 2,
   };

  return layers.sort((prev, next) => {

    const nextType = types[next.type];
    const prevType = types[prev.type];

    if (prevType > nextType) {
      return 1;
    }

    if (nextType > prevType) {
      return -1;
    }
    return 0;
  }).map((layer) => {

    return (
      <MapboxGL.ShapeSource>
            ... 
      </MapboxGL.ShapeSource>
    );
  });
}

render() {
  return (
    <MapboxGL.MapView>
    {this.renderFeatures(layers)}           
     </MapboxGL.MapView>
  )
}

[nitaliano]

Nope, the best you can do is use layerIndex, belowLayerID, and aboveLayerID to handle this for you. In the future we might add a special source to the react native sdk that would handle this under the hood but for now what I mentioned is your best bet.

[nielsfalk]

@nitaliano when I use belowLayerID with 1 of 10 reloads I get
Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'A style layer cannot be placed below (null) in the style.
I guess the order during adding them is not guaranteed and the below layer is not yet available.
Whats the best way to guarantee the order?

[smcilhargey]

Yes to new users of this library this is very unclear, it doesn't seem trivial to order layers.

[winseyli]

Same issue from me. Tried aboveLayerID``belowLayerID and layerIndex but it doesn't work on some reload