Mapas e Rotas com React Native - #6 Trajetos no Mapa

Neste tutorial trabalharemos com o trajeto escolhido pelo usuário, utilizando para isso o módulo MapViewDirections do React Native.

MapViewDirections

Primeiramente vamos instalar o módulo:

npm install react-native-maps-directions
expo start --android

App.js

Vamos importar o novo módulo e os códigos relativos:

import MapViewDirections from 'react-native-maps-directions';
//states
const mapEl=useRef(null);
const [origin,setOrigin]=useState(null);
const [destination,setDestination]=useState(null);
const [distance,setDistance]=useState(null);

//Dentro do MapView
{destination &&
  <MapViewDirections
          origin={origin}
          destination={destination}
          apikey={config.googleApi}
          strokeWidth={3}
          onReady={result=>{
          setDistance(result.distance);
         mapEl.current.fitToCoordinates(
             result.coordinates,{
                 edgePadding:{
                     top:50,
                     bottom:50,
                     left:50,
                     right:50
                 }
             }
         );
        }
      }
  />
  </MapView>
}

Por hoje é só turma. Sucesso nos códigos e na vida!

Precisando de assessoria? webdesignemfoco@gmail.com