Alameda Dev.
Published in

Alameda Dev.

React Native y AirBnB Google Maps

En este post explicare como integrar Google Maps a tus aplicaciones React Native, ya que me he encontrado que la instalación por defecto genera muchos errores y react-native no termina de reconocer la librería de Google Maps.

Después de estar aproximadamente 1 semana intentando integrar la librería de AirBnB de Google Maps a una aplicación he llegado a una serie de pasos fáciles de seguir.

Creación del proyecto React Native e instalación de librería AirBnB Google Maps Primero creamos nuestra app en React Native, nuestra app se llamará myMapApp.

react-native init myMapApp
cd myMapApp

Ahora instalamos la librería para Google Maps de AirBnB.

npm install --save react-native-maps

Enlazamos la librería con React Native

npm install
npm install react-native link react-native-maps

En teoría ya nuestra app debería funcionar con los mapas por defecto de cada plataforma Maps en iOS y Maps en Android. Pero si queremos usar Google Maps en ambas plataformas tendremos que hacer algunos pasos adicionales:

Antes de comenzar a trabajar en la app vamos a generar la clave de Api (Api Key) de Google Maps para que usemos en nuestro proyecto

Crear la clave API de Google Maps Iremos a la consola de Google para desarrolladores

Crearemos un nuevo proyecto

Y agregaremos una api en nuestro caso Google Maps SDK for iOS y Google Maps SDK for Android

Ahora nos iremos al menú de la izquierda en Credenciales. Y crearemos nuestra API Key, la guardaremos para mas adelante

Enlace de AirBnB Google Maps para iOS Instalar Cocoapods (si lo tenemos podemos saltar este paso)

sudo gem install cocoapods

Configurar el proyecto para iOS

cd ios
pod init

Esto genera un archivo Podfile en nuestra, lo abriremos y editaremos su contenido

# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'
target 'myMapApp' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!
# Pods for myMapApp target 'myMapApp-tvOSTests' do
inherit! :search_paths
# Pods for testing
end
target 'myMapAppTests' do
inherit! :search_paths
# Pods for testing
end
react_native_path = "../node_modules/react-native"
pod "yoga", :path => "#{react_native_path}/ReactCommon/yoga"
pod "React", :path => react_native_path
pod 'GoogleMaps'end

Recuerda reemplazar el nombre de tu aplicación donde dice target

Y no te olvides de especificar la plataforma de iOS que utilizaras

Si recibes este error:

[!] The name of the given podspec `yoga` doesn't match the expected one `Yoga`

Cambia la linea de este modo (yoga en minúscula):

pod "yoga", :path => "#{react_native_path}/ReactCommon/yoga"

Ahora en la terminal

pod install

Al hacer esto se generara un nuevo proyecto en nuestra carpeta de iOS, lo abriremos con XCode

open myMapApp.xcworkspace

Y copiamos la carpeta AirGoogleMaps que se encuentra dentro de /node_modules/react-native-maps/lib/ios al proyecto xcworkspace que tenemos abierto en el Xcode.

Quedando de esta forma

Para usar las credenciales API abrimos el archivo AppDelegate.m en Xcode.

#import "AppDelegate.h"#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
@import GoogleMaps;
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
[GMSServices provideAPIKey:@"YOUR_GOOGLE_API_KEY"];
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"myMapApp"
initialProperties:nil
launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}
@end

Ahora iremos a Product -> Clean y luego Product -> Build para ejecutar nuestra aplicación.

Enlace de AirBnB Google Maps para Android En nuestro proyecto debemos editar el archivo android/app/build.gradle

dependencies {
...
// Paste these line
compile(project(':react-native-maps')){
exclude group: 'com.google.android.gms', module: 'play-services-base'
exclude group: 'com.google.android.gms', module: 'play-services-maps'
}
compile 'com.google.android.gms:play-services-base:10.0.1'
compile 'com.google.android.gms:play-services-maps:10.0.1'
}
Y también debemos agregar nuestra Api Key en Android/app/src/AndroidManifest.xml
<application>
<!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="YOUR GOOGLE MAPS API KEY HERE"/>
</application>

Con esto ya tenemos nuestro proyecto React Native configurado en iOS y Android con Google Maps, ahora actualizamos el archivo App.js en nuestro proyecto React Native para incluir el Mapa

import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: 400,
width: 400,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
export default class App extends Component {
render() {
const { region } = this.props;
console.log(region);
return (
<View style ={styles.container}>
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
region=
>
</MapView>
</View>
)
}
}

¡Hola! Si quieres ponerte en contacto con nosotros, puedes utilizar nuestro formulario en la web, si quieres ver más cosas de nosotros también puedes acceder a ella -> www.alamedadev.com

Si prefieres escribirnos -> hola@alamedadev.com

Bouncing Shield is part of Alameda dev Team.

--

--

--

We are a small agency 100% Remote. Specialized in Design and Development of Mobile Apps, Web and advanced software with React Ecosystem.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alameda Dev.

Alameda Dev.

¡Hola! We are a team 100% Remote. Specialized Development of Mobile Apps, Web and advanced software with React and ReactNative. www.alamedadev.com

More from Medium

🤍/ / Time to love

Technology Mindfulness Project:

Ugh… another group project?

JOUR-61 Self-Reflection