Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Android] Blank map #176

Closed
tomazahlin opened this issue Apr 12, 2016 · 26 comments
Closed

[Android] Blank map #176

tomazahlin opened this issue Apr 12, 2016 · 26 comments

Comments

@tomazahlin
Copy link

tomazahlin commented Apr 12, 2016

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
Copy link
Collaborator

Can you try taking a look at #118 ?

@tomazahlin
Copy link
Author

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

@KGALLET
Copy link
Contributor

KGALLET commented Apr 13, 2016

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
Copy link
Author

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

@magrinj
Copy link

magrinj commented Apr 13, 2016

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

@KGALLET
Copy link
Contributor

KGALLET commented Apr 13, 2016

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

@tomazahlin
Copy link
Author

@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
Copy link
Contributor

KGALLET commented Apr 13, 2016

Done. #179

@nicksarafa
Copy link
Contributor

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

@Newbieyh
Copy link

Newbieyh commented Jan 5, 2017

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
Copy link

juiceo commented Jan 31, 2017

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
Copy link

Someone solve this?

@anahitsk123
Copy link

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

@jhon3rick
Copy link

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
Copy link

@jhon3rick Thanks! Install plugin manually works for me.

@svjchrysler
Copy link

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

@ghoshabhi
Copy link

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

@luongcongdu
Copy link

luongcongdu commented Dec 12, 2017

Make sure that you enable Google Maps Android API

@HamiltonMultimedia
Copy link

@nicksarafa 's solution worked for me!
THANK YOU

screen shot 2018-05-23 at 11 56 55 pm

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

screen shot 2018-05-23 at 11 56 59 pm 2

@anastely
Copy link

anastely commented Apr 17, 2019

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

@ErfanEbrahimii
Copy link

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
Copy link

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
Copy link

excelso commented Jan 6, 2024

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
Copy link

nwazuo commented Jul 23, 2024

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
Copy link

nwazuo commented Jul 23, 2024

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;
  });
};
  1. 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'
      }
    ],
  ]
}
  1. 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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests