title: How to update MapboxGL.ShapeSource dynamically?
body: <p>Using <a href="https://github.com/react-native-mapbox-gl/maps" rel="noreferrer">react-native-mapbox-gl/maps</a>, when a <code>SymbolLayer</code> is dynamically added to a <code>ShapeSource</code>, it seems it is not shown, or the <code>ShapeSource</code> is not updated.</p>
  
  <p>Here is the example to reproduce : based on <a href="https://github.com/react-native-mapbox-gl/maps/blob/master/example/src/examples/CustomIcon.js" rel="noreferrer"><code>CustomIcon</code> example</a>, I replaced the code with the code below. To reproduce, just <a href="https://github.com/react-native-mapbox-gl/maps/tree/master/example#installation" rel="noreferrer">execute the examples</a>, copy-paste the code in place of the existing code in <code>CustomIcon.js</code> example.</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { View, Text } from 'react-native';
  import MapboxGL from '@react-native-mapbox-gl/maps';
  
  import sheet from '../styles/sheet';
  
  import BaseExamplePropTypes from './common/BaseExamplePropTypes';
  import Page from './common/Page';
  import Bubble from './common/Bubble';
  
  const styles = {
    icon: {
      iconAllowOverlap: true,
    },
    view: {
      width: 60,
      height: 60,
      borderColor: 'black',
      borderWidth: 1,
      alignItems: 'center',
      justifyContent: 'center'
    },
    text: {
      fontSize: 50
    }
  };
  
  const customIcons = ['', '', '', '', '']
  
  class CustomIcon extends React.Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
        featureCollection: {
          type: 'FeatureCollection',
          features: [{
            type: 'Feature',
            geometry: {
              coordinates: [-73.970895, 40.723279],
              type: 'Point'
            },
            id: 1,
            properties: {
              customIcon: customIcons[0]
            }
          }]
       },
      };
  
      this.onPress = this.onPress.bind(this);
      this.onSourceLayerPress = this.onSourceLayerPress.bind(this);
    }
  
    onPress(e) {
      const feature = {
        type: 'Feature',
        geometry: e.geometry,
        id: Date.now(),
        properties: {
          customIcon: customIcons[this.state.featureCollection.features.length]
        }
      };
  
      this.setState(({ featureCollection }) =&gt; ({
        featureCollection: {
          type: 'FeatureCollection',
          features: [
            ...featureCollection.features,
            feature
          ]
        }
      }));
    }
  
    onSourceLayerPress(e) {
      const feature = e.nativeEvent.payload;
      console.log('You pressed a layer here is your feature', feature); // eslint-disable-line
    }
  
    render() {
      return (
        &lt;Page {...this.props}&gt;
          &lt;MapboxGL.MapView
            ref={c =&gt; (this._map = c)}
            onPress={this.onPress}
            style={sheet.matchParent}
          &gt;
            &lt;MapboxGL.Camera
              zoomLevel={9}
              centerCoordinate={[-73.970895, 40.723279]}
            /&gt;
  
            &lt;MapboxGL.ShapeSource
              id="symbolLocationSource"
              hitbox={{width: 20, height: 20}}
              onPress={this.onSourceLayerPress}
              shape={this.state.featureCollection}
            &gt;
              {this.state.featureCollection.features.map((feature, ind) =&gt; (
                &lt;MapboxGL.SymbolLayer
                  id={"symbolLocationSymbols" + feature.id}
                  key={feature.id}
                  filter={['==', 'customIcon', customIcons[ind]]}
                  minZoomLevel={1}
                  style={styles.icon}
                &gt;
                  &lt;View style={styles.view}&gt;
                    &lt;Text style={styles.text}&gt;
                      {feature.properties.customIcon}
                    &lt;/Text&gt;
                  &lt;/View&gt;
                &lt;/MapboxGL.SymbolLayer&gt;
              ))}
            &lt;/MapboxGL.ShapeSource&gt;
          &lt;/MapboxGL.MapView&gt;
  
          &lt;Bubble&gt;
            &lt;Text&gt;Tap to add an icon&lt;/Text&gt;
          &lt;/Bubble&gt;
        &lt;/Page&gt;
      );
    }
  }
  
  export default CustomIcon;
  </code></pre>
  
  <p>We can see that clicking on the map changes the state, adds a feature, but does not show the feature on the map.
  How can we make the <code>ShapeSource</code> update dynamically ?</p>