Meu Primeiro App com React Native - #24 Pegando a localização do usuário

Nesse tutorial iremos aprender como trazer a localização do usuário em tempo real, pegando as coordenadas e o endereço.

Obter a localização do usuário pelo app

Vamos iniciar pela instalação do módulo Location:

expo install expo-location

Para transformar as coordenadas em endereço precisamos também do módulo abaixo:

npm install --save react-native-geocoding

views/arearestrita/Edicao.js

Primeiramente vamos ter que solicitar a permissão do usuário para usar a localização dele:

useEffect(()=>{
    (async () => {
        let { status } = await Location.requestPermissionsAsync();
        if (status !== 'granted') {
            setErrorMsg('Permission to access location was denied');
        }
    })();
});

Em seguida criaremos a function getLocation:

//Retorna a posição e endereço do usuário
async function getLocation()
{
    let location = await Location.getCurrentPositionAsync({});
    Geocoder.init(config.geocodingAPI);
    Geocoder.from(location.coords.latitude, location.coords.longitude)
        .then(json => {
            let number = json.results[0].address_components[0].short_name;
            let street = json.results[0].address_components[1].short_name;
            setLocalization(`${street} - ${number}`);
        })
        .catch(error => console.warn(error));
}

A função acima será acionada tão logo o QRCode seja lido, então não esqueça de chamar a função dentro da função handleBarCodeScanned:

await getLocation();

config/config.json

Para criar a sua API do GeoCoding acesse o site do Google Developers Console

Vamos adicionar nossa chave de API no arquivo config.json:

"geocodingAPI": "COLOQUE_SUA_CREDENCIAL_AQUI"

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

Precisa de aulas particulares? webdesignemfoco@gmail.com