Suscribete en nuestro Newsletter

Regístrate en nuestro Newsletter para estar al tanto de las noticias, talleres y podcast que tendremos próximamente
Suscríbete aqui

Nuestras noticias en tu móvil

Prueba nuestra nueva app para Android e IOs Podras ver todas las noticias, eventos y todas nuestras actualizaciones
  

Oct 11, 2017

React Native and AirBnB Google Maps

In this post I'm going to explain how to integrate Google Maps to your React Native Project. I have found the default instalation to give me errors.

Creating the React Native Project and installing the AirBnB Google Maps library

First we create our React Native app, I'm going to call it myMapApp

                    > react-native init myMapApp
                    > cd myMapApp

Now we install the Maps library from AirBnB

                    > npm install --save react-native-maps

Let's link the library with our project

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

In theory our project can now use the native map module of each platform. But we want to use Google Maps, so there are some aditional steps to do that

Before we begin our work, we are going to create the Api Key for our application

Create the Google Api Key

Go to the Google developer console

Create a new project

And add the corresponding APIS. Google Maps SDK for iOS and Google Maps SDK for Android

Now we go to the credentials menu. And create the Api Key

Link AirBnB Google Maps for iOS

Install Cocoapods

                      sudo gem install cocoapods

Config the project for iOS

                      cd ios
                      pod init

Edit and open the Podfile

                      # 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

In the terminal app

                      pod install

That will create a new project in our ios folder, open it with XCode

                      open myMapApp.xcworkspace

Now copy the module files into the project,

copy the folder AirGoogleMaps that is inside /node_modules/react-native-maps/lib/ios to the xcworkspace project

This is how it should look

Open and edit AppDelegate.m en Xcode to add the Api Key

                    #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

Now go to the menus Product -> Clean and then Product -> Build

Link AirBnB Google Maps for Android

Open and edit the file 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'
                    }

Add the Api Key to 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>

Now we have our React Native Project for iOS y Android with Google Maps, to have a basic map add these lines to the App.js file in your project

                  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={{
                              latitude: 37.78825,
                              longitude: -122.4324,
                              latitudeDelta: 0.015,
                              longitudeDelta: 0.0121,
                            }}
                          >
                          </MapView>
                        </View>
                      );
                    }
                  }
Ingeniero en Informatica, 7 años de experiencia en desarrollo web
https://github.com/uokesita. Twitter: @uokesita

Comparte este articulo: