Localização GPS com Expo e React Native

23/08/2023

Comece seu projeto no Expo para nos prepararmos para desenvolver nosso localizador GPS da maneira mais simplificada possível. Nosso objetivo é criar uma aplicação que, em seu smartphone, se assemelhe ao Google Maps, embora não inclua todas as funcionalidades. Em vez disso, teremos apenas um mapa com uma marcação representando nossa localização.

Para começar, precisaremos instalar a biblioteca que escolhemos. Embora tenhamos várias opções disponíveis, uma em particular tem se mostrado estável e confiável ao longo do tempo, como você pode conferir no GitHub. https://github.com/Agontuk/react-native-geolocation-service Esta biblioteca foi criada na tentativa de corrigir o problema de tempo limite de localização no Android. Usando a nova API FusedLocationProviderClient do Google Play Service. Ele decide automaticamente qual provedor usar com base na configuração da sua solicitação e também solicita que você altere o modo de localização se ele não atender à sua configuração de solicitação atual.

yarn add react-native-geolocation-service

Vamos adicionar a react native community geolocation para garantirmos acesso ao gps

yarn add @react-native-community/geolocation

https://github.com/michalchudziak/react-native-geolocation

Para visualizarmos um mapa

yarn add react-native-maps

https://github.com/react-native-maps/react-native-maps

Pode variar dependendo do seu projeto, mas para ter tudo em ordem nas pastas android e ios é importante executar um

npx expo prebuild

Caso não queria executar o prebuild, verifique se esta com as devidas permissões

ANDROID

Precisamos adicionar as uses-permission no arquivo android/app/src/main/AndroidManifest.xml , adicione

<uses-permission android:name="android.permission.ACCESS_COURSE_LOCATION"/>
<uses-permission android:name="android.permission.ACESS_FINE_LOCATION" />

Permissões IOS

Na pasta ./ios devemos adicionar duas keys no info.plist para permitir que o iPhone garanta o acesso ao GPS

<key>NSLocationWhenInUseUsageDescription</key>
<key›NSLocationAlwaysUsageDescription</key>

Native Permission

Uma API de permissões unificada exportando permissões para iOS, Android. Para não termo nenhum problema com permissão em nosso app

yarn add react-native-permission

em seu package.json adicione

{
	"scripts": {
	...
	},
	"reactNativePermissionsIOS": [
		"LocationAccuracy",
		"LocationAlways",
		"LocationWhenInUse",
	],
	"dependencies": {
	
	}
}

Vamos executar o comando setup-ios-permissions para as devidas configurações

npx react-native setup-ios-permissions

Após isso, precisaremos deletar as pastas PODS e o arquivo pod.lock dentro da pasta ./ios do nosso projeto, a fim de realizar uma recompilação completa. Em alguns casos, pode ser aconselhável apagar o diretório DerivedData do Xcode para garantir um ambiente de desenvolvimento limpo.

rm -rf ~/Library/Developer/Xcode/DerivedData

Isso mesmo, após remover as pastas e o arquivo mencionados, você poderá executar pod install para garantir que todas as dependências sejam instaladas e que o projeto esteja pronto para funcionar corretamente.

pod install

Api key

É necessário obter uma chave de API para o Android, que podemos gerar no seguinte site: https://console.cloud.google.com/apis/credentials Para isso, você terá que criar um projeto para o seu aplicativo e gerar sua chave. No entanto, nosso foco principal está em fazer o mapa funcionar.

Vamos fazer um novo projeto no Google Cloud, clique em NOVO PROJETO

Defina um nome para seu projeto, e clique em CRIAR

Apos tudo criado, vamos receber essa notificacao em que vamos clicar em SELECIOCAR PROJETO

Com o projeto selecionado, vamos nesse card Maps SDK for Android é nele que vamos pegar nossa importante KEY

Ativamos o SDK Maps

e por fim teremos nossa key

Codificação

Os códigos completos estão disponíveis no GitHub para facilitar o desenvolvimento. Lá, você pode verificar como tudo foi configurado e montado para o nosso projeto, enquanto nosso foco principal permanece em fazer o mapa funcionar.

https://github.com/samuelprogramer/expo-react-native-gps

Vamos pegar nossa chave do passo anterior e colar ele em ./android/app/src/main/AndroidManifest.xml dentro de application

<application
	 ...>
	<activity>
	...
	</activity>
	<meta-data
		  android:name="com.google.android.geo.API_KEY"
		  android:value="${SUA_KEY_API_AQUI}"/>
</application>

Como já configuramos anteriormente, agora iremos implementar as chamadas para Android e iOS, a fim de informar aos usuários que precisamos acessar o GPS e aguardar a sua autorização.

async function permicoesParaLocalizacao(){
	try {
		if(Platform.OS === 'ios'){
		await Geolocation.requestAuthorization();
		}else {
		const granted = await PermissionsAndroid.request(
		PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,{
			title: "Para continuar é necessário autorizar o uso da localização",
			message: "Sua localização será usada para mostrarmos no mapa",
			buttonNegative: "Negar",
			buttonPositive: "Permitir"
		});
		}
		getGetLocationNow();
	} catch (err) {
		console.warn('erro Permissions: ' ,err);
	}

}

Vamos armazenar os valores de localização em algum lugar para que possamos acessá-los e exibi-los no mapa posteriormente.

const [latitude, setLat] = useState(0);
const [longitude, setLon] = useState(0);

Vamos capturar a localização GPS atual e armazenar os valores de latitude e longitude para uso posterior.

import GeoLocationLocal from 'react-native-geolocation-service';

async function pegarLocalizacaoAtual(){
	GeoLocationLocal.getCurrentPosition(
	(position) => {
		setLat(position.coords.latitude);
		setLon(position.coords.longitude);
	},
	(error) => {
		console.log(error);
		return null;
	},
	{
		enableHighAccuracy: true, // precisão
		timeout: 15000,
		maximumAge: 10000 // tempo para manter armazenado local anterior em cache
	})
}

Agora, vamos carregar o mapa com os dados de localização completos. Dessa forma, teremos um mapa visual que mostra a nossa posição atual.

<MapView
	style={{flex: 1}}
	showsUserLocation={true}
	region={{
		latitude: latitude,
		longitude: longitude,
		latitudeDelta: 0.2122,
		longitudeDelta: 0.2121,
	}}>
</MapView>

Aqui temos o resultado

Resumo dos nossos passos a cima:

1. Iniciamos o projeto no Expo para criar um localizador GPS.
2. Escolhemos uma biblioteca estável e confiável.
3. Recomendamos excluir as pastas PODS e o arquivo pod.lock na pasta ./ios para uma recompilação completa.
4. Sugerimos a possibilidade de apagar o diretório DerivedData do Xcode em alguns casos.
5. Após a limpeza, executamos pod install para instalar todas as dependências.
6. Falamos sobre a necessidade de gerar uma API key para Android em um site específico.
7. Implementamos chamadas para Android e iOS para solicitar permissão de acesso ao GPS.
8. Armazenamos os valores de latitude e longitude para uso posterior.
9. Por fim, mencionamos a etapa de carregar o mapa com os dados de localização completos para visualização

Código fonte GitHub https://github.com/samuelprogramer/expo-react-native-gps Credencial da google https://console.cloud.google.com/apis/credentials Geolocation Service https://github.com/Agontuk/react-native-geolocation-service