Utilizando Mapas no React Native
Criando uma aplicação com mapa nativo da Google Maps API
Hoje em dia não é difícil ver diversos aplicativos utilizando mapas integrados com a Google Maps API com ela podemos, fazer desde aplicativos mais simples que listam lugares, até mais complexos como por exemplo aqueles de carros compartilhados.
Irei fazer uma série de “artigos” mostrando como podemos usar as mais diversas funções que essa API, nos oferece desde listar locais no mapa até o uso de rotas com endereços reais, sintam-se a vontade para opinar a respeito e dar pull requests, pois o intuito é sempre passar o conhecimento adiante, e quanto mais colaboradores melhor. Vem comigo rapaziada :D
Nessa altura imagino que vocês já sejam familiarizados com o React Native assim já podemos partir da criação de nosso projeto, para isso irei usar o react-native-cli assim vamos poder usar o react-native init para iniciarmos o projeto do zero.
Lembrando que nesse projeto não usarei o Expo, vamos fazer com React Native puro, acredito que o Expo pode ser uma boa ferramenta dependendo do caso, mas realmente não recomendo seu uso, podemos deixar para um próximo artigo onde vou explicar melhor isso.
react-native init MapsStartApós isso, vamos instalar o React Native Maps o pacote mantido pela comunidade de React Native que nos permite usar a Google Maps API de uma forma mais completa
yarn add react-native-maps// or npm i react-native-maps
Atualmente com a versão 0.57.8 do RN (React Native) não encontrei muitos problemas ao instalar o react-native-maps (versão 0.22.1) com o react-native link que é o comando usado para que o projeto este consiga encontrar os arquivos nativos de cada plataforma (Android e IOS) necessários para o funcionamento daquele pacote.
Assim podemos usar esse comando para finalizar a instalação do pacote
react-native linkLembrando que utilizando o react native link no IOS o mapa padrão a ser habilitado será o Apple Maps e com isso você pode perder algumas funções do mapa da Google, caso você queira habilitar o padrão siga essas instruções da documentação, recomendo fortemente fazer isso, e pretendo escrever um artigo sobre esse tutorial futuramente.
Após a execução do react-native link para prevenir um comum erro do Dex com esse pacote, no caso esse
Error on Task: app:transformDexArchiveWithExternalLibsDexMergerForDebugNo arquivo build.gradle que está localizado em android/app/build.gradle precisamos apagar essa a linha:
// Apagar essa linhacompile project(‘:react-native-maps’)
E acrescentar isso no seu lugar
// Código corretoimplementation(project(':react-native-maps'))
Além disso, agora no arquivo build.gradle que está localizado em android/build.gradle precisamos adicionar, a versão do Google Play Services e a versão do mapa que será utilizado.
buildscript { ext { buildToolsVersion = "27.0.3"
minSdkVersion = 16
compileSdkVersion = 27
targetSdkVersion = 26
supportLibVersion = "27.1.1" // Adicionar essas linhas googlePlayServicesVersion = "11.8.0"
androidMapsUtilsVersion = "0.5+"}
Basicamente, estamos alterando alguns erros na sintaxe do Gradle como o uso do compile para implementation e adicionando alguns módulos do Play Services para o funcionamento da Google Maps API em nosso aplicativo.
Agora já estamos o projeto totalmente configurado, e podemos rodar o mesmo, caso você encontre mais algum problema, recomendo fazer a instalação manual sem o react-native link seguindo essas instruções.
Já podemos rodar nosso aplicativo usando o comando react-native run-android no caso de dispositivos Android e react-native run-ios no caso de ser em iphones.
O resultado esperado é esse:
Agora que nosso aplicativo está funcionando, corretamente podemos abrir o arquivo App.js que está na raíz do nosso projeto, vamos deixar o código dessa forma:
Antes de qualquer coisa vamos estilizar o nosso container da aplicação com o seguinte estilo:
container: { flex: 1,
justifyContent: ‘flex-end’,
alignItems: ‘flex-end’,}
Estamos utilizando a propriedade flex com valor 1 ou seja o nosso container vai ocupar toda a tela, e além disso usando o justifyContent e alignItems com o flex-end o nosso mapa estará posicionado na tela de forma correta, ocupando todo o espaço disponível.
Google Cloud Platform - Gerando a API Key
Antes de começarmos usar o mapa, precisamos ter nossa API KEY para a Google Maps API que pode ser feita, na Google Cloud Platform para isso é necessário você ter uma conta da Google e fazer login nesse link, após isso você será redirecionado para essa página.
Clique em “Create” ou “Criar” caso estiver em português.
Após isso coloque o nome para seu projeto, depois de criar ele você será redirecionado para o dashboard de seu projeto.
Após isso no menu do lado esquerdo clique em “API and Services”.
Agora clique em “Library” no menu do lado esquerdo.
Agora na parte de “Maps” selecione “Google Maps Android API”, caso a interface dessa página mudar, você usar a barra de pesquisa para achar a Maps API.
Agora habilite a Google Maps API.
Esse aviso, basicamente nos diz que devemos que devemos criar credenciais, para usar a API em nosso aplicativo.
Vamos criar as credenciais clicando em “Create Credentials” já no próximo passo vamos adiciona-lá em nosso serviço.
Agora devemos clicar em “API Key” que está na segunda linha da primeira seção chamada “Find out what kind of credentials you need” com isso vamos iniciar a geração da nossa credencial da API.
Vamos até a a aba chamada “API restrictions” e selecionar Google Maps Android API.
Agora estamos no último passo, devemos clicar em criar e copiar a API Key que foi gerada.
Pronto após esses passos, temos a credencial da Google Maps API.
Devemos colocar ela no código de nosso aplicativo, no arquivo chamado AndroidManifest.xml que está localizado em android/app/src/main e dentro de <application> vamos criar um meta-data para a credencial.
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="Coloque sua API Key aqui" />Com isso já temos nossa API totalmente configurada para o uso.
Agora já que o AndroidManifest.xml é código nativo do Android e ele foi alterado, será necessário rodar novamente react-native run-android ou react-native run-ios para atualizar o nosso aplicativo
Caso o aplicativo estiver funcionando corretamente, podemos continuar.
MapView
Agora vamos começar importando o MapView em nosso projeto para isso logo após
import React, {Component} from ‘react’;
import { View, StyleSheet } from ‘react-native’;// Adicionar essa linhaimport { MapView } from 'react-native-maps'
O MapView é o principal componente do RN Maps pois, ele é realmente o responsável por exibir o mapa no aplicativo.
Agora também podemos colocar-ló no método render dessa forma
export default class App extends Component {render() { return ( <View style={styles.container}> // Adicionar o MapView <MapView style={styles.map}
loadingEnabled={true}
region={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}} > </MapView> </View> ); }}
Com isso estamos utilizando as principais propriedades do MapView estamos indicando um estilo, habilitando a animação de carregamento e definindo a região em que ele vai ser iniciado, usando a latitude e longitude do local em coordenadas e definindo a latitudeDelta e longitudeDelta, que são valores usados para definir a distância de exibição do mapa.
Agora só falta estilizarmos nosso mapa
map: { position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0},
Com isso garantimos que o mapa estará ocupando toda a tela do aplicativo, de forma correta.
Novamente vai ser necessário rodar nosso aplicativo usando react-native run-android ou react-native run-ios
Agora provavelmente seu aplicativo vai estar funcionando e exibindo um mapa.
Com isso chegamos ao fim do nosso primeiro aplicativo usando a Google Maps API no React Native
Resultado no Android
Resultado no IOS
O código final do aplicativo está abaixo:
Já foi dado o primeiro passo, agora só a criatividade vai poder ser seu limite.
Mas por enquanto só estamos exibindo um mapa em nosso aplicativo, caso você quiser marcar algo no mapa por exemplo, você terá que usar os Markers que são os componentes usados para marcar locais no mapa, e provavelmente os Callouts que na verdade são marcadores com mais informações, para isso recomendo fortemente uma lida na documentação oficial do React Native Maps que está em seu repositório.
Só lembrando que com esse tutorial o mapa habilitado em dispositivos IOS foi o Apple Maps, e é interessante você seguir essas instruções para colocar o mapa do padrão do Google Maps que tem mais funções.
O projeto está disponível nesse repositório no GitHub e qualquer dúvida que tiverem, ou quiserem acrescentar algo, é só deixar um comentário.
Também não esqueça de me acompanhar nas redes sociais, para gente trocar aquela ideia
www.linkedin.com/in/matheus-tadeu/
Referências
(Lembrando que as imagens do tutorial para ter acesso a API Key do Google Cloud Platform, foram retiradas desse artigo) mas além disso também é um ótimo conteúdo, e recomendo a leitura.
Muito obrigado pela atenção pessoal e espero que tenham gostado.
Agradecimentos a Luiz Fernando, Débora Garcia, Wendel Nascimento, Cesar Faber.
