princessjanf

import React, { Component } from "react";
import { AppRegistry, StyleSheet, Dimensions, Image, View, StatusBar, TouchableOpacity } from "react-native";
import { Container, Text } from "native-base";

import MapView from 'react-native-maps';
import Polyline from '@mapbox/polyline';


class LocationA extends Component {
  constructor(props) {

princessjanf

{!!this.state.latitude && !!this.state.longitude && this.state.x == 'true' && 
  <MapView.Polyline
            coordinates={this.state.coords}
            strokeWidth={2}
            strokeColor="red"
  />
}

{!!this.state.latitude && !!this.state.longitude && this.state.x == 'error' && 
  <MapView.Polyline

princessjanf

mergeLot(){
    if (this.state.latitude != null && this.state.longitude!=null)
     {
       let concatLot = this.state.latitude +","+this.state.longitude
       this.setState({
         concat: concatLot
       }, () => {
         this.getDirections(concatLot, "-6.270565,106.759550");
       });
     }

princessjanf

render() {

  return (
    <MapView style={styles.map} initialRegion={{
     latitude:-6.270565,
     longitude:106.759550,
     latitudeDelta: 1,
     longitudeDelta: 1
    }}>

princessjanf

async getDirections(startLoc, destinationLoc) {

      try {
          let resp = await fetch(`https://maps.googleapis.com/maps/api/directions/json?origin=${ startLoc }&destination=${ destinationLoc }`)
          let respJson = await resp.json();
          let points = Polyline.decode(respJson.routes[0].overview_polyline.points);
          let coords = points.map((point, index) => {
              return  {
                  latitude : point[0],
                  longitude : point[1]

princessjanf

  render() {
    return (
      <MapView style={styles.map} initialRegion={{
       latitude:-6.270565,
       longitude:106.759550,
       latitudeDelta: 1,
       longitudeDelta: 1
      }}>
  
      {!!this.state.latitude && !!this.state.longitude && <MapView.Marker

princessjanf

import React, { Component } from "react";
import { AppRegistry, StyleSheet, Dimensions, View } from "react-native";
import { TabNavigator } from "react-navigation";
import { Container, Text } from "native-base";


class LocationA extends Component {
  constructor(props) {
    super(props);

princessjanf

{
  mocked: false,
  timestamp: 1512393631310,
  coords:
  {
    speed: 0,
    heading: 0,
    accuracy: 22.43400001525879,
    longitude: 106.84,
    altitude: 0,