skip to Main Content

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:
enter image description here

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,
        },
      },
    },
  1. 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?

2

Answers


  1. Adding API_KEY in android/app/src/main/AndroidManifest.xml file works for me, you need to add key here

          </activity>
          <meta-data
         android:name="com.google.android.geo.API_KEY"
         android:value="---apikey----"/>
        </application>
    </manifest>
    
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search