react-native-maps-directions – Directions/Routing component for react-native-maps

Hi,

It doesn’t work for me, even though my code looks exactly the same as the one illustrated. In the MapViewDirections tag it only works if I define longitude and latitude directly and not if I reference the array called coordinates. What could be the problem?

in my app react-native-maps-directions is not working i’m coping your code.
but it didn’t work for me. please look out this code.

/* eslint global-require:0 */

import React, { Component } from “react”;
import styled from “styled-components”;
import { Dimensions } from “react-native”;
import { Container, Content } from “native-base”;
import { get } from “lodash”;
import MapView, { Marker, Polyline } from “react-native-maps”;
import MapViewDirections from “react-native-maps-directions”;
import { Actions } from “react-native-router-flux”;
import { inject, observer } from “mobx-react”;

import HeaderGradient from “../components/PickUp&Drop/HeaderGradient”;
import CommonFooter from “../components/Home/CommonFooter”;
import LocationDetails from “../components/PickUp&Drop/LocationDetails”;

const MainView = styled.View`
flex: 1;
`;

const HEIGHT = Dimensions.get(“window”).height;
const WIDTH = Dimensions.get(“window”).width;

const GOOGLE_MAPS_APIKEY = “AIzaSyBsWT8-mo8eH2HQL4VLwLpigE7oaak8AjI”;

@inject(“store”)
@observer
class PickupDrop extends Component {
constructor(props) {
super(props);
this.state = {
coordinate: { latitude: 24.80855120296181, longitude: 67.03557014465332 },
editLocationModal: false,
locationData: {},
pickupAddress: “Akota Stadium, Akota”,
dropAddress: “Hotel Banyan Tree, Manjalpur”,
locationType: “”
};
}

onPickupAddress() {
console.log(“pick up”);
this.setState({
editLocationModal: true,
locationType: “pickup”
});
}

onDropAddress() {
console.log(“drop up”);
this.setState({
editLocationModal: true,
locationType: “drop”
});
}

onSwapAddress() {
console.log(” swap”);
this.setState({
pickupAddress: this.state.dropAddress,
dropAddress: this.state.pickupAddress
});
}

onEditLocationModal(locationData) {
console.log(“location data========= “, locationData);
if (this.state.locationType === “pickup”) {
// console.log(“on if cobndition========= “, this.state.locationType);

this.setState({
editLocationModal: false,
pickupAddress: get(
locationData,
“formatted_address”,
“Akota Stadium, Akota”
),
locationType: “”
});
} else {
// console.log(“in else========= “, this.state.locationType);

this.setState({
locationData,
editLocationModal: false,
dropAddress: get(
locationData,
“formatted_address”,
“Hotel Banyan Tree, Manjalpur”
),
locationType: “”
});
}
}

render() {
console.log(“props at pikup and drop page”, this.props);

const origin = { latitude: 37.3318456, longitude: -122.0296002 };
const destination = { latitude: 37.771707, longitude: -122.4053769 };

const coordinateRender = [
{ latitude: 37.3318456, longitude: -122.0296002 },
{ latitude: 37.771707, longitude: -122.4053769 }
];

const InitialRegion = {
latitude: 37.3318456,
longitude: -122.0296002,
latitudeDelta: 0.5,
longitudeDelta: 0.5 * (WIDTH / HEIGHT)
};
return (

this.onPickupAddress()}
onDropAddressPressed={() => this.onDropAddress()}
onSwapAddress={() => this.onSwapAddress()}
onEditLocationModal={locationData =>
this.onEditLocationModal(locationData)
}
onRequestModalClose={() =>
this.setState({
editLocationModal: false
})
}
/>

{coordinateRender.map(item => (

))}

{/* */}

Actions.ItemInformation()}
centerText=”Total Distance 6.8 km”
/>

);
}
}

export default PickupDrop;