Google Maps API key on Android issue with `react-native-maps`

Question

I am using react-native-maps on Android with Expo, which requires the google maps APIKey to be injected into the app as described in the Expo docs. Then I build the app on EAS and when I run the page view with the map, it errors saying:

API Key not found.

Here is what I do:

1. add EXPO_PUBLIC_GOOGLE_MAPS_ANDROID_APIKEY_PROD to my local .env and to EAS Secret
2. update app.config to:

android: {
      config: {
        googleMaps: {
          apiKey: process.env.EXPO_PUBLIC_GOOGLE_MAPS_APIKEY_PROD,
        },
      },
    },

3. Initialize the map:

import MapView, { Marker, PROVIDER_GOOGLE, Region } from 'react-native-maps';

<MapView
        initialRegion={region}
        mapPadding={mapPadding}
        provider={Platform.OS === 'android' ? PROVIDER_GOOGLE : undefined}
        region={region}
        {...rest}
      >
        <Marker
          coordinate={...coords}
        />
      </MapView>

    "expo": "^49.0.1",
    "react": "18.2.0",
    "react-native": "0.72.10",
    "react-native-maps": "1.7.1",

Any ideas? I also tried without the injecting of key into via env. Is EAS not injecting the key correctly or is my app.config incorrect?

Answer 1

Rebuild development build through expo with eas build --profile development --platform android or whatever build you use and try again.

The api key changes aren't updated when you hot reload the app, you need to rebuild it. I had the same issue and that's how I solved it. Your app.json seems fine.