title: How do you center the map on a clicked symbol using MapBox and React Native?
body: <p>Spent a long time trying to do this: Mapbox show how to do it here, but I'm unsure how it works in React Native:
  <a href="https://docs.mapbox.com/mapbox-gl-js/example/center-on-symbol/" rel="nofollow noreferrer">https://docs.mapbox.com/mapbox-gl-js/example/center-on-symbol/</a></p>
  
  <p>I'm using ShapeSource and SymboLayer, getting my markers from a geoJson. I can't seem to target the specific icon and its' coordinates. I've tried something like this, but it just takes be to the first feature location (not the location of the specific icon clicked):</p>
  
  <p>onPress={() => {this._map.flyTo(featureCollection.features.geometry(0).coordinates, 1000);}}</p>
  
  <p>My features look like this:</p>
  
  <p>{
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "id": 1,
        "properties": {
          "name": "Hotel",
          "icon": "sleep"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            12.584664,
            55.680532
          ]
        }
      },
      {
        "type": "Feature",
        "id": 2,
        "properties": {
          "name": "Restaurant",
          "icon": "food"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            12.585264,
            55.683441
          ]
        }
      }
  }</p>
  
  <p>Thanks!</p>