AirGoogleMaps dir must be added to your xCode project to support GoogleMaps on iOS React Native

Question

I am facing this issue which I believe a lot of other people are facing after some searching. I am trying to install Google maps IOS SDK manually rather than pods approach. Any solution pertaining to pods does not work for me. I am able to render the map but when I provide "provider google" it throws me the error. I need to have the google maps rather than the apple maps. What I have done so far:

My package.json snippet:

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"   
 },   
 "dependencies": {
    "moment": "^2.22.2",
    "npm": "^6.5.0",
    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-native-blur": "^3.2.2",
    "react-native-drawer": "^2.5.0",
    "react-native-elements": "^0.19.1",
    "react-native-maps": "^0.23.0",

I am following this documentation which I think is quite accurate other than some small tweaks.

My react native component which renders maps.

import React from 'react'
import { ScrollView, View } from 'react-native'
import styles from './style'
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'

class Location extends React.Component {

  render () {
    return (
      <View style={styles.container}>
        <MapView
          provider={PROVIDER_GOOGLE} // remove if not using Google Maps
          style={styles.map}
          region={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
          }}
        >
        </MapView>
      </View>
    )
  }
}

My Xcode File hierarchy:

Libraries linked:

Also, I have included the paths in header search in build settings. Also, I have included AirMaps.xcodeproj under my libraries in Xcode. I have seen more solutions with Podfile but I am curious If somebody has manually done it by resolving this error. I am not sure what I have done wrong.

Answer 1

Finally what I was missing has been found here: Google Maps SDK for iOS requires GoogleMaps.bundle to be part of your target under 'Copy Bundle Resources

So what I did is in Steps For installing the react-native:

1. npm install --save react-native-maps
2. react-native link react-native-maps
3. Download the google maps ios SDK from here [https://developers.google.com/maps/documentation/ios-sdk/start

4. Follow the steps for manually installing the ios SDK, In the 4th Step of google documentation

   Drag the following bundles into your project under Frameworks in Xcode (when prompted, select Copy items if needed):

   • GoogleMaps-2.7.0/Base/Frameworks/GoogleMapsBase.framework

   • GoogleMaps-2.7.0/Maps/Frameworks/GoogleMaps.framework

   • GoogleMaps-2.7.0/Maps/Frameworks/GoogleMapsCore.framework

5. Right-click GoogleMaps.framework in your project, and select Show In Finder. What it doesn't say is...Then go into the child folder called Resources

6. Drag the GoogleMaps.bundle from the Resources folder to your project. We suggest putting it in the under the Frameworks folder in Xcode. When prompted, ensure Copy items into destination group’s folder is not selected.
7. Go to Build Settings in Xcode for your project and type "Header Search Paths" in the search bar and double click the debug to see the header search paths in debug build. Click + to add the path and add "$(SRCROOT)/Frameworks/" with the recursive option.

8. Go to Build Phases of your project in Xcode. Add the following frameworks and libraries.

   • GoogleMapsBase.framework
   • GoogleMaps.framework
   • GoogleMapsCore.framework
   • libAirMaps.a Note: In case libAirMaps.a does not get linked automatically then you can link manually by dragging the AirMaps.xcodeproj from node_modules/react-native-maps/lib/ios to the Libraries folder on k/start

Hope so it helps anyone :)