waypoint.js

import React, {Component} from 'react'
import {Dimensions, StyleSheet, View, Text} from 'react-native'
import MapView, {Marker} from 'react-native-maps'

import MapViewDirections from 'react-native-maps-directions'

const {width, height} = Dimensions.get('window')
const ASPECT_RATIO = width / height
const LATITUDE = 37.771707
const LONGITUDE = -122.4053769
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO

const GOOGLE_MAPS_APIKEY = 'AIzaSyDcinNkJoLn-QX9u7M7f31JyqDDkH3PN1Y'

const styles = StyleSheet.create({
  versionBox: {
    position: 'absolute',
    bottom: 0,
    right: 0,
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  versionText: {
    padding: 4,
    backgroundColor: '#FFF',
    color: '#000',
  },
})

class HomeScreen extends Component {
  constructor(props) {
    super(props)

    this.state = {
      coordinates: [
        {latitude: 37.78988546653938, longitude: -122.39009787303877},
        {latitude: 37.78006076834474, longitude: -122.41924072042876},
        {latitude: 37.79451419030897, longitude: -122.40813171242338},
      ],
    }
    this.mapView = null
  }

  onMapPress = (e) => {
    this.setState({
      coordinates: [...this.state.coordinates, e.nativeEvent.coordinate],
    })
  }

  onReady = (result) => {
    this.mapView.fitToCoordinates(result.coordinates, {
      edgePadding: {
        right: width / 10,
        bottom: height / 10,
        left: width / 10,
        top: height / 10,
      },
    })
  }

  onError = (errorMessage) => {
    console.log(errorMessage) // eslint-disable-line no-console
  }

  setDistance(distance, duration_in_traffic) {
    // console.log('setDistance');
    this.setState({
      distance: parseFloat(distance),
      durationInTraffic: parseInt(duration_in_traffic),
    })
  }

  render() {
    console.log(this.state.coordinates.slice(1, -1), 'MEs')
    return (
      <View style={StyleSheet.absoluteFill}>
        <MapView
          initialRegion={{
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
          }}
          style={StyleSheet.absoluteFill}
          ref={(c) => (this.mapView = c)} // eslint-disable-line react/jsx-no-bind
          // onPress={this.onMapPress}
        >
          <MapViewDirections
            origin={this.state.coordinates[0]}
            destination={
              this.state.coordinates[this.state.coordinates.length - 1]
            }
            waypoints={this.state.coordinates.slice(1, -1)}
            optimizeWaypoints={true}
            mode="DRIVING"
            apikey={GOOGLE_MAPS_APIKEY}
            language="en"
            strokeWidth={4}
            strokeColor="black"
            onStart={(params) => {
              console.log(
                `Started routing between "${params.origin}" and "${
                  params.destination
                }"${
                  params.waypoints.length
                    ? ' using waypoints: ' + params.waypoints.join(', ')
                    : ''
                }`,
              )
            }}
            onReady={this.onReady}
            onError={(errorMessage) => {
              console.log(errorMessage)
            }}
            resetOnChange={false}
          />

          <Marker
            draggable
            onDragEnd={(e) => setx({x: e.nativeEvent.coordinate})}
            coordinate={this.state.coordinates[0]}
            title={'Lokasi Customer'}
            showsUserLocation={true}
            pinColor="red"
          />

          {this.state.coordinates.map((item, index) => {
            console.log(item, 'Saya')
            return (
              <Marker
                draggable
                // onDragEnd={(e) => setx({x: e.nativeEvent.coordinate})}
                coordinate={{
                  latitude: item.latitude,
                  longitude: item.longitude,
                }}
                title={`${index}-Saya`}
                showsUserLocation={true}
                pinColor="blue"
                onPress={() => alert(`${index}-Saya`)}
              />
            )
          })}
        </MapView>
        <View style={styles.versionBox}>
          {/* <Text style={styles.versionText}>
            RN {reactNativeVersionString}, RNM: {reactNativeMapsVersion}, RNMD:{' '}
            {reactNativeMapsDirectionsVersion}
          </Text> */}
        </View>
      </View>
    )
  }
}

export default HomeScreen