react-native-maps-turn-by-turn-direction.js

import React, { Component } from 'react';
import { StyleSheet, 
	Button, 
	Text, 
	View, 
	TextInput, 
	ImageBackground, 
	ActivityIndicator, 
	Linking, 
	TouchableOpacity } from 'react-native';
import styled from 'styled-components/native';
import PropTypes from 'prop-types';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
import getDirections from 'react-native-google-maps-directions'


import flagBlueImg from '../images/flag-blue.png';

let Container = styled(View) `
	width: 100%;
	height: 100%;
	background-color: white;
`;

let Map = styled(MapView) `
	width: 100%;
	height: 100%;
`;

const origin = { latitude: 42.2678176, longitude: -71.000124 };
const destination = { latitude: 42.2929175, longitude: -71.0548235 };
const GOOGLE_MAPS_APIKEY = 'YOUR_API_KEY';

export default class extends Component {

	constructor() {
		super();
	}

	handleGetDirections = () => {		
		const data = {
			destination,
			params: [
				{
					key: "dirflg",
					value: "d"
				}
			]
		}

		getDirections(data)
	}

	pressed(e) {
		console.log('pressed');
		
	}

	render() {
		return (
			<Container>
				<Map
					initialRegion={{
						latitude: 42.2678176,
						longitude: -71.000124,
						latitudeDelta: 0.0922,
						longitudeDelta: 0.0421,
					}}
				>
					<MapView.Marker
						coordinate={destination}
						image={flagBlueImg}
					>
						<MapView.Callout onPress={() => {
							console.log('Press to Get Direction');
							this.handleGetDirections();
						}}>
							<Text>Press to Get Direction</Text>
						</MapView.Callout>
					</MapView.Marker>
					<MapViewDirections
						origin={origin}
						destination={destination}
						apikey={GOOGLE_MAPS_APIKEY}
					/>

				</Map>
			</Container>
		);
	}
}