Fix: React Native Google Maps Not Working Properly (New Architecture Issue)

Google Maps integration in React Native using react-native-maps can cause issues—especially when using the new architecture (TurboModules and Fabric). This guide provides a working fix using stable versions and shows how to disable the new architecture, correctly link iOS native dependencies, and get Google Maps up and running

 

Stable Working Versions

Use these versions to avoid incompatibilities:

npx @react-native-community/cli@latest init AwesomeProject --version 0.76.9

"react": "18.3.1",
"react-native": "0.76.9",
"react-native-maps": "1.14.0" 

 

Problem: Google Maps Not Working with New Architecture

The main issue is that Google Maps does not support the new architecture as of now. This causes maps to:

• Not render at all
• Crash on startup
• Show blank views

 

Solution Overview

1. Disable new architecture
2. Configure Podfile correctly
3. Set up AppDelegate for Google Maps API
4. Install proper pods and clean  

 

1. Disable New Architecture

In your Podfile, add this line before use_native_modules!:

ENV['RCT_NEW_ARCH_ENABLED'] = '0'

This disables the new architecture for iOS.

 

2. Podfile Setup

Here is the complete working Podfile setup:

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '13.0'

ENV['RCT_NEW_ARCH_ENABLED'] = '0'

target 'StarterApp' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => true,
    :fabric_enabled => false,
    :new_arch_enabled => false
  )

  pod 'react-native-maps', :path => '../node_modules/react-native-maps', :modular_headers => true
  pod 'react-native-google-maps', :path => '../node_modules/react-native-maps', :modular_headers => true
  pod 'GoogleMaps', '7.4.0', :modular_headers => true
  pod 'Google-Maps-iOS-Utils', '4.2.2'

  post_install do |installer|
    react_native_post_install(installer)
  end
end 

 

3. iOS: Add Google Maps API in AppDelegate.mm

Open ios/StarterApp/AppDelegate.mm and:

1. Import Google Maps:

   #import <GoogleMaps/GoogleMaps.h>
   

2. Add API Key in didFinishLaunchingWithOptions:

   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
   {
     self.moduleName = @"StarterApp";
     self.initialProps = @{};
   
     [GMSServices provideAPIKey:@"YOUR_GOOGLE_MAPS_API_KEY"]; // <-- Add this line
   
     return [super application:application didFinishLaunchingWithOptions:launchOptions];
   }
   

   Replace "YOUR_GOOGLE_MAPS_API_KEY" with your actual Google Maps API key.

 

4. Install & Build

After editing everything, run these commands:

cd ios
pod install --repo-update
cd ..
npx react-native clean
npx react-native run-ios

---

MapView Example Usage

Here’s a working MapView component using Google Maps:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';

const App = () => {
  return (
    <View style={styles.container}>
      <MapView
        provider={PROVIDER_GOOGLE}
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        <Marker
          coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
          title={"Marker Title"}
          description={"Marker Description"}
        />
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default App;

 

Summary

Step	Action
1. Disable New Arch	ENV['RCT_NEW_ARCH_ENABLED'] = '0' in Podfile
2. Setup Google Maps API	Use [GMSServices provideAPIKey:...] in AppDelegate.mm
3. Use Correct Versions	"react-native": "0.76.9", "react-native-maps": "1.14.0"
4. Run Pod Install	pod install --repo-update
5. Clean & Rebuild	npx react-native clean && npx react-native run-ios

 

Tested and Working

• ✅ Markers
• ✅ Polygons & Circles
• ✅ User location
• ✅ Custom markers
• ✅ iOS Support