fix(android): fix layer not present errors on style change

[mfazekas]

If a layer is removed, because of a style change for example, then on android setting property will fail with:

Failed to update: circleRadiusTransition Set layer property "circle-radius-transition" failed: Layer circle-layer-0 is not in style {duration=5000, delay=0}

Seems to be because of internal details of mapbox android. Once a layer is added to a map bindTo is called to set delegate. So if we change a layer property it'll be reflected on the map. But the mapbox api has no means of clearing the layer.

https://github.com/mapbox/mapbox-maps-android/blob/0b0060cdf3849f6c32312faa456cfe331c17e794/extension-style/src/main/java/com/mapbox/maps/extension/style/layers/Layer.kt#L31

import React from 'react';
import { Button } from 'react-native';
import {
  Images,
  MapView,
  ShapeSource,
  SymbolLayer,
  CircleLayer,
  Camera,
  VectorSource,
  LineLayer,
} from '@rnmapbox/maps';

const styles = {
  mapView: { flex: 1 },
  circleLayer: {
    circleRadiusTransition: { duration: 5000, delay: 0 },
    circleColor: '#ff0000',
  },
};

const features = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      id: 'a-feature',
      properties: {
        icon: 'example',
        text: 'example-icon-and-label',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00597, 40.71427],
      },
    },
    {
      type: 'Feature',
      id: 'b-feature',
      properties: {
        text: 'just-label',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.001097, 40.71527],
      },
    },
    {
      type: 'Feature',
      id: 'c-feature',
      properties: {
        icon: 'example',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00697, 40.72427],
      },
    },
  ],
};

const styleURLs = [
  'mapbox://styles/mapbox/streets-v12',
  'mapbox://styles/mapbox/outdoors-v12',
];

class BugReportExample extends React.Component {
  state = {
    radius: 20,
    styleURL: styleURLs[0],
    idx: 0,
  };

  render() {
    const circleLayerStyle = {
      ...styles.circleLayer,
      ...{ circleRadius: this.state.radius },
    };

    const { styleURL, idx } = this.state;
    console.log(' => SU', styleURL, styleURL === styleURLs[0]);

    return (
      <>
        <Button
          title="Chane Style URL"
          onPress={() => {
            this.setState({
              idx: styleURL === styleURLs[0] ? 1 : 0,
              styleURL: styleURL === styleURLs[0] ? styleURLs[1] : styleURLs[0],
            });
          }}
        />
        <MapView style={styles.mapView} styleURL={styleURL}>
          <Camera
            defaultSettings={{
              centerCoordinate: [-74.001097, 40.71527],
              zoomLevel: 15,
            }}
          />
          <Images images={{ example: require('../assets/example.png') }} />
          <ShapeSource id={`shape-source-id-${idx}`} shape={features}>
            <CircleLayer
              id={`circle-layer-${idx}`}
              style={circleLayerStyle}
              slot={'bottom'}
            />
            <SymbolLayer
              id={`symbol-id-${idx}`}
              style={{
                iconImage: ['get', 'icon'],
              }}
              slot={'middle'}
            />
          </ShapeSource>
        </MapView>
      </>
    );
  }
}

export default BugReportExample;