React-Native – Fixing missing GoogleMaps API Key error

The Problem:

After pushing my Android app built with React-Native and Expo, HereHere, to the Google Play Store recently, the app froze when accessing a page that uses the Google Maps and Google Places API.  After looking at the logs, I noticed an error message indicating a missing API Key in the Android Manifest.  The error stated that android.config.googleMaps.apiKey is missing.

The Solution:

It turns out that after upgrading my app to use the latest version of the Expo SDK, there is a required config variable for the Google Maps API that needs to be set in your app.json file.

*NOTE: My project was built using Expo’s managed workflow.  If you built your project without Expo, you may need to look at updating your AndroidManifest.xml file instead and making sure the API key is set there.

{
  "expo": {
    // other props...,
    "android": {
      ...,
      "config": {
        "googleMaps": {
           "apiKey": "[your api key here]"
        }
      },
      "package": "...",
      "permissions": [...]
    },
    "sdkVersion": "38.0.0"
  }
}

The tricky thing about this was that the app worked fine in development and the problem only arose after I pushed to the Google Play Store and downloaded the app to my phone.  The reason was that my app was using a local config file to get the API key, and the production build looks for the value in app.json to inject into the Android Manifest file.

To try to prevent these kinds of problems in the future, you should publish your application to Expo first using the expo-cli tools ($ expo publish).  You can then access the app in a more production like environment and see if any issues arise before pushing to the Google Play Store to find out about it only when it goes live.

Further Resources:

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.