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

Com essa lib, diferente da maioria não vamos fazer o link automático para Android e IOS, vamos fazer manualmente, pois a lib apresenta alguns problemas um pouco complexos para resolver quando é feito o link através do comando react-native link.

Para configurar corretamente a lib para funcionar no Android e IOS, siga o passo a passo para cada plataforma logo abaixo:

Android

Vamos começar a configuração para Android no arquivo android/build.gradle , nesse arquivo procure o objeto allprojects, e dentro dele por repositories, dentro de repositories certifique-se de ter o trecho abaixo, e caso não tenha, adicione.

maven {
  url "$rootDir/../node_modules/react-native/android"
}
maven { url "https://jitpack.io" }
maven {
  url 'https://maven.google.com/'
  name 'Google'
}

Agora vamos para o arquivo android/app/build.gradle , nele desça até perto do final e procure o objeto dependencies, dentro dele terão algumas linhas começando pela palavra compile, dentro desse objeto, adicione o seguinte trecho:

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

Abra agora o arquivo android/settings.gradle, e nele adicione no final as linhas:

include ':mapbox-react-native-mapbox-gl'
project(':mapbox-react-native-mapbox-gl').projectDir = new File(rootProject.projectDir, '../node_modules/@mapbox/react-native-mapbox-gl/android/rctmgl')

Agora falta pouco (prometo), o próximo passo é verificar a versão do SDK do projeto, e para isso se estiver utilizando a versão 0.56 do React Native basta voltar no arquivo android/build.gradle, e nele procurar pelo objeto ext, nele verifique se as versões são iguais ou superiores à:

buildToolsVersion = "26.0.3"
minSdkVersion = 16
compileSdkVersion = 26
targetSdkVersion = 26
supportLibVersion = "26.1.0"

Caso esteja em uma versão inferior do React Native verifique se no arquivo android/app/build.gradle as configurações são essas, ou superiores:

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

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.

E agora pra finalizar (ebaaa \o/) vamos fazer algumas modificações no arquivo android/app/src/main/java/com/<nome_do_projeto>/MainApplication.java, a primeira delas é adicionar a importação do Mapbox logo abaixo da importação do SoLoader, ficando assim:

...
import com.facebook.soloader.SoLoader;
import com.mapbox.rctmgl.RCTMGLPackage;
...

Feito isso falta apenas instanciar a classe do Mapbox e para isso procure o método getPackages, e dentro dele, logo abaixo da linha new MainReactPackage() adicione o seguinte código:

new RCTMGLPackage()

Obs.: Não se esqueça de adicionar uma  vírgula (,) no final da linha do MainReactPackage.

E assim finalizamos a configuração para o Android, agora falta pouco, só configurar para o IOS e partir pro código, mas antes de prosseguir faça o teste de rodar a aplicação no Emulador do Android para verificar se não ocorre nenhum erro na compilação.

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é 🙂

E para testar o funcionamento, rode o projeto no Simulador do IOS para garantir que não estão ocorrendo erros no processo de compilação.

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:

Utilizando o ModalRoute e fazendo upload de imagens

Utilizando o ModalRoute e fazendo upload de imagens