Mapas e Rotas com React Native - #4 Mapa e Localização do Usuário

Nesse tutorial começaremos a trabalhar com os mapas no React Native utilizando para isso a classe MapView.

Desenvolvendo mapas no App

Vamos instalar primeiramente as libs dessa aula:

npm install react-native-maps --save-exact
expo install expo-location
expo install expo-permissions

App.js

No App.js importaremos o módulo e começaremos o código:

import React, {useState,useEffect,useRef} from 'react';
import MapView from 'react-native-maps';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

useEffect(()=>{
    (async function(){
        const { status, permissions } = await Permissions.askAsync(Permissions.LOCATION);
        if (status === 'granted') {
            let location = await Location.getCurrentPositionAsync({enableHighAccuracy: true});
            setOrigin({
                latitude: location.coords.latitude,
                longitude: location.coords.longitude,
                latitudeDelta: 0.000922,
                longitudeDelta: 0.000421
            })
        } else {
            throw new Error('Location permission not granted');
        }
    })();
},[]);

//dentro do return
<MapView
          style={css.map}
          initialRegion={origin}
          showsUserLocation={true}
          zoomEnabled={false}
          loadingEnabled={true}
>
</MapView>

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

Precisando de assessoria? webdesignemfoco@gmail.com