Integrate AirBnB Google Maps in a React Native App

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. This is part of Alemdeda Dev Explorations

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;
                
    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>
    );
  }
}

Need help with a project? I'm open for freelance jobs. http://alamedadev.com