title: Adding multiple Polylines on react-native-map with Google API coordinates
body: <p>I want to place multiple polylines on Google maps in react-native. I'm using the react-native-maps and @mapbox/polyline for creating polylines which I imported at the top:</p>
  
  <pre><code>import MapView from 'react-native-maps';
  import Polyline from '@mapbox/polyline';
  </code></pre>
  
  <p>Here is the rest of the code:</p>
  
  <pre><code>import {
    Marker
  } from 'react-native-maps';
  
  import React, { Component } from 'react';
  import {
     Platform,
     StyleSheet,
     Text,
     View,
     Button
   } from 'react-native';
  
   export default class consults extends Component {
    constructor(props) {
    super(props);
    this.state = {
      coords: []
    }
   }
  
  componentDidMount() {
     this.getDirections("55.23607109335242, 10.478553771972656", "55.178279530181264, 10.525074005126953");
     this.getDirections("55.067434, 10.607282", "55.093088, 10.588734");
   }
  
   async getDirections(startLoc, destinationLoc) {
  
     try {
         let resp = await fetch(`https://maps.googleapis.com/maps/api/directions/json?origin=${ startLoc }&amp;destination=${ destinationLoc }&amp;mode=${'walking'}`)
         let respJson = await resp.json();
         let points = Polyline.decode(respJson.routes[0].overview_polyline.points);
  
         let coords = points.map((point, index) =&gt; {
             return  {
                 latitude : point[0],
                 longitude : point[1]
             }
         })
  
  
         this.setState({coords: coords})
         return coords
     } catch(error) {
         alert(error)
         return error
     }
  }
  
  
  static navigationOptions = {
  title: 'Kort over stier'
  };
  
  render () {
   const { navigate } = this.props.navigation;
   const { region } = this.props;
   console.log(region);
  
   return (
     &lt;View style ={styles.container}&gt;
      &lt;MapView
        style={styles.map}
        region={{
          latitude: 55.0598,
          longitude: 10.6068,
          latitudeDelta: 0.40,
          longitudeDelta: 0.40,
        }}
      &gt;
  
      &lt;MapView.Polyline
          coordinates={this.state.coords}
          strokeWidth={2}
          strokeColor="red"/&gt;
  
      &lt;/MapView&gt;
    &lt;/View&gt;
   )
  }
  
  }
  
  const styles = StyleSheet.create({
  container: {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  justifyContent: 'flex-end',
  alignItems: 'center',
  },
  map: {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  },
  
  });
  </code></pre>
  
  <p>When i'm just requesting coordinates from one positing to another it draw a line example: </p>
  
  <pre><code>this.getDirections("55.23607109335242, 10.478553771972656", "55.178279530181264, 10.525074005126953");
  </code></pre>
  
  <p>When I requesting two I get the coordinates for the last one. Anyone knowing how to get multiple polylines drawn on same map? In advance, thanks :-)</p>
  
  <p><strong>Update</strong>
  Find this example picture from another stakoverflow problem. I want the same but without the markers:</p>
  
  <p><a href="https://i.stack.imgur.com/wQgZp.jpg" rel="nofollow noreferrer">Polyline image</a></p>