[Android] Blank map

[tomazahlin]

Hello, I have installed react-native-maps to our application, but had a problem where the would render blank (like nothing was there).

After searching the repository for solutions, I haven't found anything that would work for me, but ultimately we found a solution. If anyone else has a problem, here is what we found out:

We use Android Virtual Device (AVD) Manager to start the emulator. Also make sure you install Intel HAXM 6.0.1.

1. Run "android" and install
   Extras / Google Play services
   Extras / Google Repository
   Android 6.0 (API 23) / Google APIs Intel x86 Atom System Image Rev. 12 (Make sure your emulator is using it, previous rev. did not work)
2. Make sure that you use the "Browser" key from Google.
3. When starting emulator before building the new native code, make sure you "Wipe user data".

Hopefully this will help someone. I think all the other steps are like described in docs. If I remember any more steps, I will write them here.

[christopherdro]

Can you try taking a look at #118 ?

[tomazahlin]

Looks like a similar issue, I will let the users know of my solution.

[KGALLET]

What do you mean by "WEB" api key?
We have to take it from Google Console API but the type of the key must be "Android", i'm right?

Edit : By using an Browser key in the Google Console API, it's now ok, it works.

For the ones coming here after me, i just update my Android SDK Tools, generate a Browser key with my debug.keystore SHA-1, then i put it in AndroidManifest.xml, i did
watchman watch-del-all
npm cache clean
then I "Wipe user data" when i started the emulator.
Restarting the packager and it's ok.

[tomazahlin]

Other developer in our company told me, to use "Browser or web" key, not some other key. It was a little confusing.

[magrinj]

@KGALLET & @tomazahlin: Maybe you can do a PR to update the documentation :)

[KGALLET]

@tomazahlin are you going to PR this ? If Not i can do it

[tomazahlin]

@KGALLET You can do it, I am currently working on another PR for another react module, and not sure when I have time. But if you need any more details from me, you can ask anytime.

[KGALLET]

Done. #179

[nicksarafa]

Instead of android:name="com.google.android.geo.API_KEY" try using android:name="com.google.android.maps.v2.API_KEY"

[Newbieyh]

I am sorry to ask on this chat again. I am getting a blank screen on my android emulator and followed all the suggestions but none helped me. So I came to this at the end.

But cant follow the brower key thing and wipe the data thing.

I am new to programming world so these questions.

-- Please Help

[juiceo]

Run "android" and install
Extras / Google Play services
Extras / Google Repository
Android 6.0 (API 23) / Google APIs Intel x86 Atom System Image Rev. 12 (Make sure your emulator is using it, previous rev. did not work)

What does running "android" mean exactly? And how/where do I install these packages? Thanks.

[cokealmonacid]

Someone solve this?

[anahitsk123]

I solved this by activating 'Google Maps Android API' from https://console.developers.google.com/apis/api/maps-android-backend.googleapis.com

[jhon3rick]

react-native link react-native-maps not working in android for version react-native-maps 0.14 and 0.15, i solved install plugin manually

[kathdelacruz]

@jhon3rick Thanks! Install plugin manually works for me.

[svjchrysler]

#import <React/RCTBundleURLProvider.h> in AppDelegate.m in Xcode, give this error 'React/RCTBundleURLProvider.h' file not found.

[ghoshabhi]

@svjchrysler : Did you add AirMaps's binaries too ?

[luongcongdu]

Make sure that you enable Google Maps Android API

[HamiltonMultimedia]

@nicksarafa 's solution worked for me!
THANK YOU

After changing to android:name="com.google.android.maps.v2.API_KEY" my map appeared immediately after reloading the Android emulator.

[anastely]

Hey there, Billing account is necessary for getting google map API key?

[ErfanEbrahimii]

Other developer in our company told me, to use "Browser or web" key, not some other key. It was a little confusing.

it work's for me on android ,
thanks a lot

[realjjaveweb]

Hey there, Billing account is necessary for getting google map API key?

Definitely not for getting the key - you create the API key separately and enable that API for that key, but I'm not sure whether or not billing is needed for the API to be provided.

[excelso]

Instead of android:name="com.google.android.geo.API_KEY" try using android:name="com.google.android.maps.v2.API_KEY"

Work for me, Thanks

[nwazuo]

Instead of android:name="com.google.android.geo.API_KEY" try using android:name="com.google.android.maps.v2.API_KEY"

This worked for me. Can someone explain why this worked though and why the react-native-maps package isn't outputting this by default?

Also, how to get this to work with expo's prebuild system as AndroidManifest.xml chanes don't persist when expo prebuild command is used with the --clean option.

[nwazuo]

If you're using expo, I wrote a little local config plugin to help with this. The config plugin basically renames a metadata's name.

Steps to use:

1. create withRenameMetadata.js file in your expo project (I put mine in a ./plugin folder) with below content

// withRenameMetadata.js

const { withAndroidManifest } = require('@expo/config-plugins');

function renameMetadata(androidManifest, existingName, newName) {
  const metaData = androidManifest.manifest.application[0]['meta-data'];
  const hasExistingNameEntry = metaData.findIndex(
    (meta) => meta['$']['android:name'] === existingName
  ) !== -1;

  if (hasExistingNameEntry) {
    // Remove all entries with new name
    const newNameMetaDataEntriesIndices = metaData.reduce((acc, meta, index) => {
      if (meta['$']['android:name'] === newName) {
        acc.push(index);
      }
      return acc;
    }, []);

    // Remove all entries with new name, starting from end to avoid index shifting
    for (let i = newNameMetaDataEntriesIndices.length - 1; i >= 0; i--) {
      metaData.splice(newNameMetaDataEntriesIndices[i], 1);
    }

    // Find the index again after deletions and update it
    const indexToUpdate = metaData.findIndex(
      (meta) => meta['$']['android:name'] === existingName
    );
    if (indexToUpdate !== -1) {
      metaData[indexToUpdate]['$']['android:name'] = newName;
    } else {
      console.warn(
        `Meta-data with name ${existingName} not found after deleting existing new name entries`
      );
    }
  } else {
    console.warn(`Meta-data with name ${existingName} not found`);
  }
  return androidManifest;
};

module.exports = function withRenameMetadata(config, { existingName, newName }) {
  return withAndroidManifest(config, async (config) => {
    const androidManifest = config.modResults;
    config.modResults = renameMetadata(androidManifest, existingName, newName);
    return config;
  });
};

2. Add plugin to your app.json, app.config.json or app.config.js plugin field

// app.config.js

{
  ...,
  plugins: [
    ...,
    [
      // See - https://github.com/react-native-maps/react-native-maps/issues/176
      './plugins/withRenameMetadata.js',
      {
        existingName: 'com.google.android.geo.API_KEY',
        newName: 'com.google.android.maps.v2.API_KEY'
      }
    ],
  ]
}

3. Run expo prebuild and look into android/app/src/main/AndroidManifest.xml to confirm change (Your git changes may also show this)

Hope this helps🎉.

Update:

I updated this to fix an issue where if a metadata value using this plugin changes, we get duplicate values for the same metadata name.

[blwinters]

Regarding com.google.android.maps.v2.API_KEY, that's not the key currently recommended by Google. It's only there for backwards compatibility, but I wonder if the API key's restrictions are evaluated differently if you use that name (while the real issue is a misconfigured API key).

In my case, I had changed the tooling for building and signing our app, so I needed to get the new SHA1 hash and add it to the existing API key in the Google Cloud console.