Como integrar mapas no React Native usando react-native-maps

Artigo original: How to integrate maps in React Native using react-native-maps

Escrito por: Mukhamed Khasanza

Hoje em dia, quase todas as aplicações para dispositivos móveis têm um recurso de mapas. Eu tive que integrar o Google Maps à minha aplicação para o React Native, e a única opção era o react-native-maps da Airbnb (é o único ainda suportado pela comunidade do React Native).

Encontrei vários tutoriais sobre como configurar essa biblioteca, mas nenhum funcionou totalmente para mim. Isso porque eu tinha que rodar em plataformas iOS e Android, além de dar suporte ao Google Maps para iOS.

Vamos criar uma aplicação do React Native do zero usando react-native-cli para mostrar, passo a passo, como tudo é instalado. Se você quiser integrar o react-native-maps à sua aplicação existente, pule a Etapa 1.

Etapa 1: instalar e configurar a aplicação do React Native

Se você não instalou a interface de linha de comando do React Native, execute: npm install -g react-native-cli. Agora, você pode criar seu projeto, simplesmente usando: react-native init ReactNativeMaps

Aqui estão as versões de dependência no momento da construção deste projeto:

• "react": "16.6.1"
• "react-native": "0.57.5"
• "react-native-maps": "0.22.1" — instalaremos este mais tarde.

Nota da tradução: mantivemos as versões constantes no artigo original, mas, na data da tradução, as versões são 18.2.0 e 1.15.6, respectivamente.

Tente executar sua aplicação, react-native run-ios ou react-native run-android. Normalmente, isso funciona sem problemas.

Etapa 2: adicionar e vincular o pacote react-native-maps

Agora, vamos instalar o react-native-maps: npm install --save react-native-maps. Depois de instalar o pacote, você deve vinculá-lo às suas aplicações nativas: react-native link react-native-maps.

Etapa 3: configurar o Apple Maps (iOS)

Será mais fácil se os configurarmos separadamente por plataforma. Então, vamos primeiro fazer isso no iOS. Antes de integrar o Google Maps, verificaremos se o Apple Maps funciona corretamente. Adicione o seguinte código ao seu componente de renderização atual, onde você deseja renderizar seu MapView.

import MapView from 'react-native-maps'

export default class App extends Component<Props> {
  render() {
    return (<MapView style={{flex: 1}} region={{ latitude: 42.882004, longitude: 74.582748, latitudeDelta: 0.0922, longitudeDelta: 0.0421 }} showsUserLocation={true} />);
  }
}

Você pode testar qualquer local que quiser. Basta especificar a latitude e a longitude apropriadas. Como você pode ver, eu habilitei a localização do usuário simplesmente adicionando a prop showUserLocation ao componente MapView. Se você estiver executando no dispositivo real, verá sua localização atual.

Então, como você pode ver, por padrão, o Apple Maps já está funcionando. Mais do que isso, se você vinculou tudo corretamente e habilitou a localização do usuário, ele realmente fez muitas coisas para nós (a permissão do usuário para a localização com uma mensagem padrão). Se você veio do desenvolvimento nativo do iOS, então, provavelmente, sabe o que é um arquivo info.plist.

Etapa 4: instalar o Cocoapods e o pacote "GoogleMaps" (iOS)

O Apple Maps foi fácil, certo? Concordo — então, vamos ver o que o Google Maps tem para nós. Temos que instalar o Google Maps SDK para iOS. Usaremos o Cocoapods. Se você não o usou antes, execute sudo gem install cocoapods.

Agora, você tem que criar um Podfile, onde você especificará as dependências da sua aplicação para o  iOS. Navegue até sua pasta iOS/ na sua aplicação do React Native e execute: pod init ou você pode usar  touch Podfile. Você deve ter algo similar a isto:

# platform :ios, '9.0'

target 'ReactNativeMaps' do

# Pods for ReactNativeMaps

pod 'GoogleMaps'

end

Como você pode ver, adicionei o pod GoogleMaps e agora temos que instalá-lo. Se você ainda estiver na pasta iOS/, execute: pod install . Se você tentar executá-lo agora, provavelmente receberá um erro:

Ok, vamos fazer o que ele quer. Agora, devemos abrir o espaço de trabalho do xCode.

Navegue até a pasta AirGoogleMaps em node_modules/

Arraste-a para o topo do seu projeto do xCode

Tente construir seu projeto do xCode, se estiver falhando.

Você deve adicionar HAVE_GOOGLE_MAPS=1 Preprocessor Macro para Build Settings

Etapa 5: obter a chave da api do Google Maps e executar a aplicação do iOS com o Google Maps

Agora, temos que gerar uma Google Maps API key.

Copie sua chave de API e adicione-a ao arquivo AppDelegate.m.

#import <GoogleMaps/GoogleMaps.h>

[GMSServices provideAPIKey:@"SUA_CHAVE_DE_API"]

Informe ao seu componente MapView que está pronto para usar o Google Maps.

Ah, sim. Não se esqueça de executar sua aplicação do iOS. Agora, você já terá o Google Maps à disposição.

Eu espero.

Etapa 6: vamos tentar no Android agora

Ok. Agora, podemos sair do xCode e vamos apenas tentar react-native run-android. Se você estiver recebendo o mesmo que isto:

verifique seu arquivo android/app/build.gradle e substitua compile project(':react-native-maps') por isto:

implementation(project(':react-native-maps')){        exclude group: 'com.google.android.gms', module: 'play-services-base'        exclude group: 'com.google.android.gms', module: 'play-services-maps'    }implementation 'com.google.android.gms:play-services-base:12.0.0'implementation 'com.google.android.gms:play-services-maps:12.0.0'

Não se esqueça de adicionar a API_KEY ao arquivo AndroidManifest.xml.

<application>
   <meta-data android:name="com.google.android.geo.API_KEY"      android:value="SUA_CHAVE_DA_API"/>
</application>

Sim, agora sua aplicação está rodando em ambas as plataformas. Verifique o repositório do react-native-maps para mais coisas divertidas que você pode fazer com seu componente MapView.

Conclusão

Espero que meu primeiro artigo tenha sido útil para você.