title: How to show dynamically retrieved GeoJSON using a ShapeSource and Circle layer for Mapbox using React-Native
body: <p>I'm successfully retrieving a set of features from my API, when I output them to e.g. for the console it would something like this:</p>
  
  <pre><code>    {type: "feature" geometry: {type: point, coordinates: array(2)} 
      properties: {extra properties}}
  </code></pre>
  
  <p>Multiple of these features are retrieved from my API and stored in the state. Currently the max amount of features retrieved are anywhere between 0 to 50 features. So I'm guessing this isn't issue with too many features needed to be rendered. </p>
  
  <p>Found an example on the project GitHub page that is linked below doing something similar but they are using an url instead of a shape property like the one I'm using. Which should be capable of what im trying to according the documentation. </p>
  
  <p>Link to the example: 
  <a href="https://github.com/react-native-mapbox-gl/maps/blob/master/example/src/examples/EarthQuakes.js" rel="nofollow noreferrer">https://github.com/react-native-mapbox-gl/maps/blob/master/example/src/examples/EarthQuakes.js</a></p>
  
  <p>Link to the documentation:
  <a href="https://github.com/react-native-mapbox-gl/maps/blob/master/docs/ShapeSource.md" rel="nofollow noreferrer">https://github.com/react-native-mapbox-gl/maps/blob/master/docs/ShapeSource.md</a></p>
  
  <p>I've also tried the several solutions found on this SO post: 
  <a href="https://stackoverflow.com/questions/55496909/how-do-you-convert-normal-geographic-json-coming-from-server-into-geojson">How do you convert normal geographic json coming from server into geoJson?</a></p>
  
  <p>Currently my render method looks like the one provided below:</p>
  
  <pre><code>        render() {
      return (
          &lt;View style={styles.container}&gt;
            &lt;MapboxGL.MapView
                showUserLocation={true}
                rotateEnabled={false}
                style={styles.map}
                ref={map =&gt; { this.map = map; }}
                styleURL={MapboxGL.StyleURL.Street}
                onRegionDidChange={this.onRegionDidChange}
                onDidFinishLoadingMap={this.onDidFinishLoadingMap}&gt;
  
              &lt;MapboxGL.UserLocation
                  visible={true}/&gt;
  
              &lt;MapboxGL.ShapeSource
                  id='routeSource'
                  shape={{type: "FeatureCollection", features: 
                  this.state.routes}}
                  type='geojson'&gt;
  
                  &lt;MapboxGL.CircleLayer
                      id="singlePoint"
                      style={layerStyle.singlePoint}
                  /&gt;
              &lt;/MapboxGL.ShapeSource&gt;
  
  
              &lt;MapboxGL.Camera
                  ref={camera =&gt; {this.camera = camera;}}
                  zoomLevel={8}/&gt;
  
            &lt;/MapboxGL.MapView&gt;
        &lt;/View&gt;
      );
  </code></pre>
  
  <p>All the code compiles fine on both android and iOS there are no errors present either in the console or on the simulators. The expected result is that circles are rendered on the map using the features that were added to the state</p>