El presente tutorial es para enseñar como integrar Google Maps en una aplicación de React Native, para ello usaremos una muy buena librería llamada react-native-maps, sin más que decir comenzemos.

Instalar librería

Para iniciar corre el siguiente comando en la carpeta raíz del proyecto.

npm install react-native-maps --save

Esto agregará todas las dependencias necesarias en la carpeta react-native-maps dentro de   node_module.

Ahora simplemente enlace la librería. Para ello corre el suiguiente comando:

react-native link react-native-maps 

Debido a ciertos fallos en la librería hay que hacer unos arreglos tanto en Android como en iOS.

Arreglos en Android

Primero de todo se debe localizar la carpeta android. Dicha carpeta debería estar en la raíz del proyecto.

Yo en lo personal prefiero mover los archivos en el compilador nativo, en este caso Android Studio.

Si eres como realiza los siguientes pasos:

1. Abre Android Studio
2. Da click en “Open an existing Android Studio project”
3. Localiza la carpeta “android” del proyecto
4. Dale en “OK” y listo

Localiza el archivo app > build.gradle y ábrelo.

Desplázate hacia abajo en la sección de “dependencies” y busca una línea parecida a la siguiente, si no la encuentras agrégala.

implementation project(':react-native-maps')

Si en lugar de implementation dice compile igual esta bien pero estarías usando librerías de Gradle obsoletas.

Localiza el archivo settings.gradle y ábrelo.

De igual manera debe de incluir las siguiente líneas:

include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, 
    '../node_modules/react-native-maps/lib/android')

En la carpeta app > src > main > java localiza el archivo MainApplication.java y ábrelo.

Debería incluir algo parecido a lo siguiente:

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new MapsPackage()
    );
}

Obtén la clave de la API. Para ello sigue el tutorial oficial.

Una vez hecho eso agrega la clave al proyecto.

Para ello abre el archivo app > src > main > AndroidManifest.xml y agrega lo siguiente:

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

Y Listo.

Arreglos en iOS

OJO los siguientes arreglos se deben realizar en una computadora mac.

Primero de todo se debe localizar la carpeta ios y abre la terminal en la misma.

Si la carpeta no incluye un archivo Podfile corre el siguiente comando:

pod init

Abre el archivo para edición y cámbialo a lo siguiente:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
 
target '_YOUR_PROJECT_TARGET_' do
  rn_path = '../node_modules/react-native'
  rn_maps_path = '../node_modules/react-native-maps'
 
  pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
  pod 'React', path: rn_path, subspecs: [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
  ]
 
  # React Native third party dependencies podspecs
  pod 'DoubleConversion', :podspec => "#{rn_path}/third-party
      podspecs/DoubleConversion.podspec"
  pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"
  # If you are using React Native <0.54, you will get the following error:
  # "The name of the given podspec `GLog` doesn't match the expected one `glog`"
  # Use the following line instead:
  #pod 'GLog', :podspec => "#{rn_path}/third-party-podspecs/GLog.podspec"
  pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"
 
  # react-native-maps dependencies
  pod 'react-native-maps', path: rn_maps_path
  pod 'react-native-google-maps', path: rn_maps_path
  pod 'GoogleMaps'
  pod 'Google-Maps-iOS-Utils'
end
 
post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == 'react-native-google-maps'
      target.build_configurations.each do |config|
        config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
      end
    end
    if target.name == "React"
      target.remove_from_project
    end
  end
end

pod install

1. Abre Xcode
2. Da click en “Open another project”
3. Localiza la carpeta “ios” del proyecto
4. Dale en “open” y listo

Procediendo obtén la clave de la API. Para ello sigue el tutorial oficial.

En la subcarpeta principal (mismo nombre que la principal) abre el archivo AppDelegate.m.

Agrega la siguiente línea en la sección de librerías:

#import <GoogleMaps/GoogleMaps.h>

Posteriormente en el mismo archivo agrega:

...
 
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
+  [GMSServices provideAPIKey:@"Cambiar_por_tu_Clave_API"];
...

Y Listo.

Siguientes pasos

Para saber más de como usar el mapa en el código JavaScript sigue la documentación oficial o espera los siguientes tutoriales que se basarán en el uso del mapa, como agregar marcadores y callouts, como interactuar, etcétera.