Utilizando mapas no React Native com Mapbox

Uma maneira simples e com poucas burocracias para utilizar mapas no React Native

Utilizando mapas no React Native com Mapbox

Se existe algo que é sempre utilizado em aplicativos mobile é o mapa. Mostrar onde você está é apenas o começo, hoje em dia as possibilidades são das mais variadas e conta apenas com a sua imaginação.

No post de hoje vou apresentar uma maneira de adicionar um mapa ao seu aplicativo React Native, com um mínimo (sim, tem um pouquinho) de burocracias. Para isso usaremos o Mapbox, uma API muito robusta que vem crescendo no meio da comunidade React Native.

Primeiro passo

Vamos ter que criar uma conta no site da Mapbox. Uma vez criada a conta, basta copiar o access token, na área “Get your access token”:

Área do site Mapbox para pegar o access token

Instalações

Com o access token em mãos, vamos configurar nosso App com o React Native:

react-native init RocketMap

Instalaremos também o package do Mapbox:

npm install @mapbox/react-native-mapbox-gl

Por fim, faremos o link:

react-native link

Caso tenha o error onde após compilado e instalado o App venha fechar, no arquivo android/app/build.gradle procure pela linha compile project(':@mapbox_react-native-mapbox-gl') que fica dentro de dependencies e altere por:

compile project(':@mapbox_react-native-mapbox-gl') {
   compile ('com.squareup.okhttp3:okhttp:3.6.0') {
       force = true
   }
}

Android

Ainda falta algumas coisitas!!
No arquivo android/build.gradle precisamos adicionar o seguinte:

...
maven {
...
}
// Adiciona as duas linhas abaixo
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }

Para utilizar o Mapbox você precisa ter o SDK 26 ou superior instalado, caso não tenha você pode utilizar SDK Tools do Android Studio para consegui-lo, siga este tutorial aqui.

Para acabar essa parte, prometo que agora acaba, verifique se no arquivo android/app/build.gradle as configurações são essas:

  • compileSdkVersion 26
  • buildToolsVersion "26.0.1"
  • targetSdkVersion 26
  • compile "com.android.support:appcompat-v7:26.0.1"

iOS

Para instalar o MapBox no iOS vamos utilizar o CocoaPods que é uma ferramenta para controlar dependências de projetos em iOS. Para instalar o CocoaPods vou utilizar o HomeBrew:

brew install cocoapods

Agora vamos inicializar o CocoaPods na pasta ios do nosso projeto React Native, para isso, acesse essa pasta do seu projeto pelo terminal e rode o seguinte comando:

pod init

Isso criará um arquivo chamado Podfile na raiz da pasta ios e agora dentro desse arquivo você deve adicionar as seguintes linhas logo abaixo do trecho target 'NomeDoSeuApp' do:

Ainda dentro desse mesmo bloco, remova o seguinte trecho de código:

target 'NomeDoSeuApp-tvOSTests' do
  inherit! :search_paths
  # Pods for testing
end

Agora, volte ao terminal e execute o comando pod install. Esse comando levará um tempo então aproveite pra pegar um café 🙂

Pronto, agora você já está pronto para usar o MapBox no React Native, então boooora pro código!

Utilizando Mapbox no React Native

Agora sim!! E como sempre, vou dividir em partes e ir comentando.

Fazemos as importações necessárias e definir o access token que o Mapbox nos disponibilizou:

Não vai me esquecer de alterar o “Coloque seu token aqui” pelo seu access token ein!!

Criamos nosso componente e definimos um ponto no nosso mapa. A renderização do mapa é feita pelo componente MapboxGL.MapView, nele podemos definir algumas propriedades.

No nosso caso definimos um mapa com tema Dark e mostramos a localização do usuário, definimos a posição inicial em um Array onde a longitude é -49.6446024 e a latitude é -27.2108001.

Já o renderAnnotations, ficou responsável por renderizar um ponto sobre o mapa e quando clicado mostra um Callout.

Por fim algumas estilizações, como o ponto sobre o mapa:

Feito isso vamos executar o nosso projeto:

react-native run-android

Voila!!

Mapas no React Native com Mapbox

Simples, não???

AH, se você estiver usando um emulador lembre-se de habilitar o GPS!! Eu esqueci e fiquei alguns minutos arrancando os cabelos da cabeça.

It’s over

Como você deve ter percebido, não tem muito segredo fazer o Mapbox funcionar. Talvez uma das coisas que “pega” nele é limitar a 50 mil visualizações e depois disso você paga uma taxa, mas até lá conseguimos brincar bastante.

Outra opção muito comum na comunidade é o react-native-maps mas por sua configuração ser bem mais burocrática vamos evita-lo nesse post 🙂

Se existe alguma dúvida quanto ao código, dê uma olhada minicurso gratuito de React Native que preparamos.

Que tal você comentar o que achou? Sugerir alguma coisa? Só não esqueça de compartilhar com seus amigos devs!!

Projeto no github: https://github.com/Rocketseat/blog-react-native-map

Bye, Bye!!

 

AdonisJS + ReactJS + React Native
A seguir:

Instalando o Mapbox e listando imóveis no React Native

Instalando o Mapbox e listando imóveis no React Native