title: How to draw polygon on react native maps with many points(latitude and longitude)?
body: <p>I have been following this <a href="https://github.com/airbnb/react-native-maps" rel="nofollow noreferrer">documentation</a> for drawing polygon on map. Now I tried to fetch the value for latitude and longitude from API and draw it. For a small amount of value, it is not a problem as I just directly wrote it from using state.</p>
  
  <p>Below are my render function</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text, StyleSheet, Dimensions } from 'react-native';
  import { Card, Button } from 'react-native-elements';
  import { MapView } from 'expo';
  import { connect } from 'react-redux';
  
  const window = Dimensions.get('window');
  
  class PolygonPage extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              polygon: [
              {
                  latitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][0][1],
                  longitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][0][0]
              },
              {
                  latitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][1][1],
                  longitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][1][0]
              },
              {
                  latitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][2][1],
                  longitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][2][0]
              },
              {
                  latitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][3][1],
                  longitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][3][0]
              }
          ]
      };
  }
  
  onButtonPressClose = () =&gt; {
      this.props.navigation.navigate('Home');
  }
  
  render() {
      const { polygon } = this.state;
      return (
          &lt;View style={styles.container}&gt;
              &lt;MapView 
                  provider={this.props.provider}
                  style={styles.map}
                  zoomEnabled
                  initialRegion={{
                      latitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][0][1],
                      longitude: this.props.points.data.routeGeoJSON.features[0].geometry.coordinates[0][0][0],
                          latitudeDelta: 0.0922,
                          longitudeDelta: 0.0421,
                      }}
              &gt;
                  &lt;MapView.Polygon
                      coordinates={polygon}
                      fillColor="rgba(0, 200, 0, 0.5)"
                      strokeColor="rgba(0,0,0,0.5)"
                      strokeWidth={2}
                  /&gt;
              &lt;/MapView&gt;
              &lt;View style={stylesContainer.topContainer}&gt;
                  &lt;Card title="Route Information"&gt;
                      &lt;View&gt;
                          &lt;Text&gt;Name: {this.props.points.data.name}&lt;/Text&gt;
                          &lt;Text&gt;Description: {this.props.routes.data.description}&lt;/Text&gt;
                      &lt;/View&gt;
                  &lt;/Card&gt;
              &lt;/View&gt;
              &lt;View style={stylesContainer.buttonBottomContainer}&gt;
                      &lt;Button
                          medium
                          title="Back"
                          backgroundColor="#94b8b8"
                          onPress={this.onButtonPressClose}
                      /&gt;
              &lt;/View&gt; 
          &lt;/View&gt;
      );
      }
  }
  
  PolygonPage.propTypes = {
      provider: MapView.ProviderPropType,
  }; 
  
  const styles = StyleSheet.create({
      container: {
          ...StyleSheet.absoluteFillObject,
          justifyContent: 'flex-end',
          alignItems: 'center',
      },
      map: {
          flex: 1,
          height: window.height,
          width: window.width
      }
  });
  
  function mapStateToProps({ points }) {
      return { points };
  }
  
  export default connect(mapStateToProps)(PolygonPage);
  </code></pre>
  
  <p>This works for me as it rendered a polygon from the point that I got from API.</p>
  
  <p>My API response is in JSON. This is the example</p>
  
  <pre><code>{
  "timestamp": 000111,
  "verb": "GET",
  "object": "route",
  "data": {
      "description": "describe",
      "routeGeoJSON": {
          "type": "FeatureCollection",
          "features": [
              {
                  "geometry": {
                      "type": "Polygon",
                      "coordinates": [
                          [
                              [
                                  122.18919, // this is longitude
                                  4.82948294 // this is latitude
                              ],
                              [
                                  124.17318,
                                  5.9319319
                              ],
                              [
                                  101.131191,
                                  2.92492
                              ],
                              [
                                  106.01010192,
                                  4.492472492
                              ]
                          ]
                      ]
                  },
                  "type": "Feature",
                  "properties": {}
              }
          ]
      },
      "id": 1,
      "routeType": "point",
      "name": "Test"
      }
  }
  </code></pre>
  
  <p>If the points/coordinates is less than 10, than I might probably input it as what I did in my render function. But what if there is more than 10 points(latitude and longitude)? I could not figure how should I use <code>map</code> or <code>for</code> loop function inside <code>this.state = { polygon: [....]}</code>.</p>
  
  <p>I have searched online and found some example like <a href="https://forums.asp.net/t/1753021.aspx?How%20to%20Draw%20polygon%20on%20google%20maps%20with%20latitude%20and%20longitude%20points%20stored%20in%20the%20database%20" rel="nofollow noreferrer">this</a> and <a href="https://blog.sicara.com/using-open-data-shapefiles-to-draw-on-your-react-native-mobile-and-web-apps-maps-2b68a549c08d" rel="nofollow noreferrer">this</a> but failed to grab the understanding of it.</p>
  
  <p>If anyone have any idea or kind enough to share his suggestion or boilerplate here, I am very thankful for that.</p>
  
  <p>Thank you.</p>