React-native-maps: Blank Map

[ghost]

Upon running it, all I get is an empty box with red outline.

[magrinj]

:+1: I have the same problem

[sungjinoh]

Someone help this problem.

[rgoldiez]

I'm experience the same thing.

[magrinj]

There is another ticket #109 which indicates that the map isn't loaded in debug mode, but I'm not in debug mode and I still have the problem, but, if some of you are in debug mode try without, just in case :)

[ghost]

Just out of curiosity, is everyone using ES6 syntax (class extends component), or the older JS syntax (React.createClass) to make their class? I'm thinking the error might be a confusion with state/props.

[magrinj]

I'm currently using the ES6 syntax, and you ?

[ghost]

ES6 for me as well. The examples are done with the other syntax so maybe that's throwing something off.

[magrinj]

Yes maybe, I'm gonna try with the older syntax :)

[ghost]

Let us know how it goes, thanks!

[magrinj]

Ok I think I just find the problem, try to put your MapView in a View with this styles for the map and the container:

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

The map need to be in absolute position with the top, left, right and bottom props :)
That's work for me !

Edit: You can put your MapView without container, but if you put your MapView in a container this container also need to be in absolute position with the top, left, right and bottom props.

[ghost]

No luck for me. Should I try it with the other syntax or did you stay with ES6?

[magrinj]

I stay with ES6 Syntax, just bellow you can see my file:

import MapView from 'react-native-maps';

import React, {
  Component,
  StyleSheet,
} from 'react-native';

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

class Home extends Component {

  constructor() {
    super();
  }

  render() {
    return (
      <MapView
        style={ styles.map }
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    );
  }

}

export default Home;

[alexHlebnikov]

Same problem here, ES6 syntax, positioning manipulation doesn't helps.

[magrinj]

If you just copy-paste my example you still have the problem ?

[alexHlebnikov]

Not exactly, I've also have AppRegistry in import React and a line on the bottom:
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Without AppRegistry there is an error in Android emulator:

Everything else is the same.

[magrinj]

Ok, so AppRegistry it's normal, you need this class one time (or two if you have two indexes, one for iOS and one for Android) to specify the first class called in the bundle, it's the base of your application.
So if you want to use my code create a new file Home.js, and copy-paste my code.
In your index file, for android -> index.android.js put this code:

import Home from './Home';

import React, {
  AppRegistry,
  Component,
} from 'react-native';

class AwesomeProject extends Component {

  render() {
    return (
      <Home />
    );
  }

}

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Try to run again your project, if you still have a blank map don't forget to setup Google Maps API.
It's explain right here in the Installation guide, Step 4 in Android installation.

[alexHlebnikov]

It seems to be not the styles problem, but Google Maps API configuration problem.
Thank you for help anyway.

Now I have this:

And now I'm trying to configure Google API credentials.

[magrinj]

Ok thanks for your answer :)
I only try on my iOS emulator and when I change the style in another thing than absolute position my view is blank.
When that's work for you on Android device, please post a quick response, just to know if you do something specific than the installation guide

[kelvinaliyanto]

Hi, anyone got it working on iOS? I also got the same red border going on.

[alexHlebnikov]

Still no success in showing tiles on map, same thing (like in my previous message) in emulator and in real Android device.

I've done everything like it's said in the instruction.

[alexHlebnikov]

Hey guys, I've finally fixed my issue.

My Google Maps Api Key was incorrect.
I've regenerated it using instructions here - https://developers.google.com/maps/documentation/android-api/signup#release-cert - this time I'm using a Debug Certificate and now map works perfectly.

[alexHlebnikov]

And one important thing - don't forget to enable Google Maps Android API in your Google Developers Console API Manager.

[magrinj]

@alexHlebnikov: I was my first answer :)
But yes the installation guides isn't very clear about the API Key, I think you can do a PR for that!

[ghost]

I assume that's what my problem is as well, the API key. The instructions lacked info on it, i'll try it out later.

[smooJitter]

I'm experiencing the same behavior via my IOS simulator even after making the changes. Note, running the Example app runs fine without an api key

[lellex]

Same blank page with red borders on iOS... I guess the API key has nothing to do with this issue right ? The instructions seems to use Plans ?

[magrinj]

@lellex Yes the API key has nothing to do with iOS because that's use Plan. Did you try to set you map in absolute position with the props top, right, left and bottom set to 0, if that still doesn't work make sure the lib is linked in Xcode, or link it with rnpm

[lellex]

Thanks, but I didn't install the plugin correctly (first time I try on iOS)... and it's works fine !

[magrinj]

@lellex Ok great :+1:

[chenchuanjiang]

I Donot Understand Debug Certificate.I have had a key and set my map in absolute position with the props top, right, left and bottom set to 0.But still get a blank view. @alexHlebnikov

[magrinj]

How did you link your package to iOS and Android ? Manually ? If so, try to do it automatically with rnpm

[chenchuanjiang]

I have linked my package to Android with rnpm.

[magrinj]

Ok, so, I think you create a wrong API key, follow the link of @alexHlebnikov, wait some minutes after key is created, sometimes there is a little delay before the key is active. Check in your google account if the Google Map Android API is enabled, if not enable it and change the key.

[chenchuanjiang]

OK , thank you , I will try again.

[magrinj]

Ok keep us inform :)

[chenchuanjiang]

OK,thank you very much :)

[chenchuanjiang]

Oh no! still blank view. how can I know that whether my key is correct?

[magrinj]

Oh, try your key like describe here to know if the problem is the key: here

[chenchuanjiang]

I have tried.Repleace the key in native file /extras/google-play-services/samples/maps/AndroidManifest.xml with my own key.It can be run up , but still blank view.

[magrinj]

Did you run the sample app ? If so, and you still have a blank map, the error came from your Google Map API key, and you need to generate a new one.

[alexHlebnikov]

@chenchuanjiang do you enable Google Maps Android API in your Google Developers Console API Manager?

[bcgilliom]

It started working for me on iOS after restarting the dev server.

[magrinj]

@alexHlebnikov I told us to check this think a few messages before, I think he do it :)

Another think, it's obvious but just in case, you need to restart your virtual machine when you install a new package linked to Android or iOS

[chenchuanjiang]

I tried again, but got nothing.I do not know the reason why the Map do not display.I tried everything I can do.That is a sad story.

[chenchuanjiang]

I just review the file.The signature algorithm name is SHA256 but SHA1 on my computer.Maybe this algorithm cause this problem.But I donot know how to deal with it :(

[chenchuanjiang]

I delete the old debug.keystore file and create a new one with SHA1 . And then I supply a new key with the new SHA1 key.But it still dosenot work.

[magrinj]

@chenchuanjiang: It's really a sad story, can you try it on iOS ? if not, check these files:

android/settings.gradle

Need to have this:

 include ':app', ':react-native-maps'
 project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/android')

android/app/build.gradle

Need to have this:

dependencies {
   ...
   compile project(':react-native-maps')
}

android/app/src/main/AndroidManifest.xml

Need to have this:

 @Override
 protected List<ReactPackage> getPackages() {
   return Arrays.<ReactPackage>asList(
     new MainReactPackage(),
     new AirPackage() // <-- THIS
   );
 }

android/app/src/java/com/yourproject/MainActivity.java

Need to have this between application tag:

    <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="{{Google map API Key}}"/>

I'm pretty sure you already check these files, but I just want to be sure :)

If after all you still have the problem, do a double check in your Google Developer Console:

In Overview -> Google Maps API -> Google Maps Android API -> Check if it's enabled
In Credentials -> Check if the Type of your key is Android, if not, create a new one by clicking on Create credentials -> API Key -> Android Key, enter the name of the API key and your SHA1 key, generated before, and create it.

Hope you find the solution! :)

[chenchuanjiang]

You missed a step. android/app/src/java/com/yourproject/MainActivity.java also need to have import com.AirMaps.AirPackage;

[magrinj]

@chenchuanjiang: Yes, but it's a little bit obvious :)

[chenchuanjiang]

I have checked it many times...

[magrinj]

@chenchuanjiang: Did you do the steps for the Google Map API Key ?

[chenchuanjiang]

yes , I also have checked it many times.

[magrinj]

Ok, I think we do an overall check, I have no other ideas for the moment, but if I have one I'll post it.

[chenchuanjiang]

OK,thank you very much :) ,I will keep eyes on it , if I have any progress I‘ll post it.

[magrinj]

Your welcome :)

[jakegny]

I don't know if this was the problem... but after I double checked my API key (enabling) I added the following permissions and the screen was no longer blank. I also set the mapType="hybrid".

<uses-permission android:name="android.permission.INTERNET" /> <permission android:name="com.maps.permission.MAPS_RECEIVE" android:protectionLevel="signature"/> <uses-permission android:name="com.maps.permission.MAPS_RECEIVE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

[joshbedo]

Any updates on the iOS version? I'm still seeing a blank screen and not sure how to fix it.

[Froelund]

I had the issue on iOS. I just had to re-run on the simulator after rnpm link..

[joshbedo]

Yeah i ended up fixing it after doing the manual install. I tried rnpm link 2 times.

[ws3li]

How about Android? Any update? I still see a blank map with Google on the bottom left corner.
I saw a RN release 24 which is supposed to fix some Android map issue. Not sure if this is related.

Can anyone confirm?

[alexHlebnikov]

@ws3li sound like you don't enable Google Maps Android Api or you Api key is not valid.
Also, try this: generate and copy your debug.keystore (more info here) file in android folder in your react native app folder. Then add in gradle.properties these lines:

MYAPP_RELEASE_STORE_FILE=debug.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=android
MYAPP_RELEASE_KEY_PASSWORD=android

and in build.gradle add this in signingConfigs:

signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }

Also don't forget to use these usefull commands:

watchman watch-del-all
npm cache clean
npm start -- --reset-cache

sudo lsof -n -i4TCP:8081 | grep LISTEN (we are looking for a process running on port 8081)
kill -9 PID (killing all the processes on port 8081)
adb kill-server
adb devices 
adb reverse tcp:8081 tcp:8081

[KGALLET]

Got the same issue here.. Blank map on Android, but not on iOS.
My problem is probably the same as you with the API_KEY, i follow steps gave here by @magrinj but nothing change i got the blank map aswell.

EDIT : tried what @alexHlebnikov said, still a blank map

[fabiooid]

For me too running react-natice run-ios after rnpm link solves the problem, but I haven't tried it on android yet

[tomazahlin]

Like I wrote in the issue 176 (as referenced above), you guys can try my solution for Android, how we got it to work.

[ivanbtrujillo]

@jakegny solution works for me. I've creted an Android APi Key and enable Google Maps API on Google Developers console using my SHA1:
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

[npomfret]

Was there a consensus on how to solve the blank maps problem in android (not IOS, worked fine in IOS without any tinkering)? I do not have a red border as some people where reporting. Just blank map.

So far I have:

Checked my Google Developer Console and Google Maps Android API is enabled.
In my credentials, I have an Android type API key, which I've added to my manifest.xml.
I've added 2 SHA-1 certificate fingerprint, one from

keytool -list -v -keystore $HOME/.android/debug.keystore

and one from

keytool -list -v -keystore my-release-keystore.keystore

In .../android/app/build.gradle i've got just:

signingConfigs {
    release {
        storeFile file(MYAPP_RELEASE_STORE_FILE)
        storePassword MYAPP_RELEASE_STORE_PASSWORD
        keyAlias MYAPP_RELEASE_KEY_ALIAS
        keyPassword MYAPP_RELEASE_KEY_PASSWORD
    }
}

(no debug config - do i need it?)

My MainActivity contains

new AirPackage()

An in my Rn code I'm using

import MapView from 'react-native-maps';

I've tried with and without the initialRegion style suggestion applied to the map:

map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
}

(BTW without this it displays perfectly in ios).

I don't see any errors when showing a map. The only error I can see is when calling

navigator.geolocation.getCurrentPosition

Which errors with 'Location request timed out'.

[tomazahlin]

@npomfret Did you try this #176? I had the same problem (just blank, no red border).

[npomfret]

I wasn't sure what the 'web key' was mentioned in #176. Which of these, if any is a web key:

And the other instructions don't apply as I'm on a physical device, not an emulator.

[KGALLET]

This is the 'Browser key' when you create a new one.
Here :

[npomfret]

Ok thanks, I created a browser key and replaced the value in my manifest.xml. I've waited 5 minutes and still no map. I've made sure the app got redeployed, but I didn't delete the app from the phone, maybe I should?

[KGALLET]

Yep, wipe data on your phone. Check google to know the process to do it

[npomfret]

Ok - wiped it, still blank. I can't tell if its just a display problem or something more fundamental. If I use the style hint:

map: {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
} 

... it really screws up my iOS layout. Is this definitely needed? And I didn't really understand the comments about needing to do this twice if the map is in a 'container', surely everything is in a container?

And still when I call _navigator.geolocation.getCurrentPosition_ I get the timeout error.

If I take any filters off my Android log its totally unreadable, too many messages flying past, but I can search it - any idea what to look for?

EDIT: found this in the logs:

04-19 22:35:09.707 9538-9538/com.pomochat W/GooglePlayServicesUtil: Google Play services out of date.  Requires 8487000 but found 7571434

But fixed it and still no map. This is demoralising.

[tomazahlin]

@npomfret I had to install these:
Extras / Google Play services rev 29
Extras / Google Repository rev 25
Android 6.0 (API 23) / Google APIs Intel x86 Atom System Image Rev. 12

Can you check if you have the same?

[npomfret]

Ok, got it working finally. Thanks for your help. For the record...

I'm working on a physical lollipop device.

I did not end up using the 'web key' but the original 'android' key.

Updating Google Play Services (which I think was the final piece of the puzzle) was not easy. I tried searching for it within the Play Store app but for some reason it doesn't come back in the results. Instead I used the Google app and searched for "google play services" and that gave me a link direct to the app (which needed updating).

EDIT:

Also, I found that the style stuff suggested is not needed and neither is the 'uses-permission' suggestion. I am NOT using:

{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0};

or

<permission android:name="com.maps.permission.MAPS_RECEIVE" android:protectionLevel="signature" />
<uses-permission android:name="com.maps.permission.MAPS_RECEIVE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

And the map is displaying on both android and ios.

https://github.com/lelandrichardson/react-native-maps/pull/188

[magrinj]

For the style, when I try to put something else than

{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0};

that's doesn't works for the moment for me, I need to try again with other configuration, since my first solution was just my first try :)
I'm gonna try it in the next month.

[KarlosQ]

One question, the API KEY in AndroidManifest how is this written?
Like this:
android:value="{{hashashas1241241}}"
or like this:
android:value="hashashas1241241"

And is possible run debug version in a smartphone? because when i start de app in my mobile the terminal (previus react-native start) not recive the petition

[jrichardlai]

@KarlosQ android:value="hashashas1241241" should work

[grenierdev]

I had the same problem and tried everything listed here and #176 with no success. I reverted back to the initial setup (without any build.gradle, keystore, nor signings) and decided to look into the adb logcat to see if there was anything usefull.

I had a bunch of GooglePlayServicesUtil: Google Play Store is neither installed nor updating. which indicate that the Emulator did not have the Google Play Services installed. Turns out that I followed the React Getting Started for Windows and Android and did not notice that there was a few System Image that I did not install : _Google APIs Intel Intel x86 [...]_. You need those System Image for Google Play Services (including Maps) to work, the normal one (without Google APIs) do not include these services.

Using the following setup, everything is working like a charm on the Emulator Android 5.0 and on Nexus 4 Android 5.1 :

• System Image : Google APIs Intel x86 Atom_64 System Image 23 rev
• Browser API Key
• No keystore in my project
• No signingConfigs in my build.gradle

[vlade2008]

I've regenerated it using instructions here - https://developers.google.com/maps/documentation/android-api/signup#release-cert

make sure that you package name is you package name of your app,
example : com.myproject

Hope you find the solution! :)

[fabiooid]

For iOS, just quit your simulator and restart your terminal, it should all work after!

[bhy]

One more thing to watch out: if you are using Android emulator and see this in logcat:

Google Maps Android API v2 only supports devices with OpenGL ES 2.0 and above

You need to recreate AVD and make sure Use host GPU is checked in Emulation Options.

[fmvilas]

I'm leaving it here just in case it helps someone: https://github.com/lelandrichardson/react-native-maps/issues/417

[Randyanto]

I also got a blank map and I have checked in the API Manager that the Google Map API is called. It's so frustating! :| It has been two days.

[Randyanto]

Just succeed today, but I myself not sure what's the solution is (>.<)

The "rnpm link" causes me some trouble and I try the manual way. After knowing some stuffs from the manual way, I come back to the "rnpm link" and solve the errors.

First time, there is nothing displayed. I change the layout using 'absolute' then I can see Google logo. I change the key to browser key and it works. Then, I revert back to Android key and it still works. I change the layout and it still works.

I don't know how to explain this.

[nicksarafa]

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

[RichardBoyewa]

@SuttJ and Others having this issue. I was able to fix by moving
import xyz.plan.android.pptmapview.PPTGoogleMapPackage; to MainApplication.java and also new PPTGoogleMapPackage(), into the section where packages are added in the same MainApplication.java. This solved my problem.
Versions

1. react-native-cli: 1.0.0
2. react-native: 0.30.0

[DolfWolkov]

Hello! Had the same issue. Tried to use both keys mentioned before, clear cache, but map is still white. Also sometimes I got an error while running application: "Could not get BatchedBridge". But if I re-compile application it runs again with white map. At real phone the application crashes on start without any information.

Is it possible to get more info about what's going wrong?

[nicksarafa]

@DolfWolkov try re-generating the keys inside of the Google keys dashboard. After you regenerate, make sure to re-setup your local keys on your development machine. Then clean your project and rebuild the app

[Randyanto]

I have found my answer several weeks ago. I will just post it here, maybe it will help someone. So the thing is there are two debug.keystore in my computer. Instead of getting the SHA1 code by command prompt, try to get the SHA1 by Gradle script in the right area of Android Studio. I think this is also the answer why change to browser key will make your map works. Moreover, if you left the SHA1 part in the Android key blank then I think your map will work too.

[sahiljain112]

Thanks @magrinj . The style parameters got my map on the screen.

[mmchougule]

I have tried every scenario mentioned up here. I am still having issues on iOS. I have cleaned my npm cache, I have done rnpm link - it says "iOS module react-native-maps is already linked". I have folloed the manual installation as well.

I am still seeing a blank map. It used to work a week ago, the only thing I had changed is the name of the project. It has stopped working since and I have spent 4 days trying to get the map to show using this.

Any help would be appreciated!

[eangfmbs]

Now React Native on Version .34

i spent 2 day to config this problem (sound dump): iOS donno. but for android just
here i my step..
after build a new project just

$ npm install react-native-maps --save
$ npm install watchman --save //optional
$ npm install rnpm --save
$ react-native link

and build react-native run-android you will get errors as below

:app:dexDebug
Unknown source file : UNEXPECTED TOP-LEVEL EXCEPTION:
Unknown source file : com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim;
Unknown source file : at com.android.dx.merge.DexMerger.readSortableTypes(DexMerger.java:596)
Unknown source file : at com.android.dx.merge.DexMerger.getSortedTypes(DexMerger.java:554)
Unknown source file : at com.android.dx.merge.DexMerger.mergeClassDefs(DexMerger.java:535)
Unknown source file : at com.android.dx.merge.DexMerger.mergeDexes(DexMerger.java:171)
Unknown source file : at com.android.dx.merge.DexMerger.merge(DexMerger.java:189)
Unknown source file : at com.android.dx.command.dexer.Main.mergeLibraryDexBuffers(Main.java:502)
Unknown source file : at com.android.dx.command.dexer.Main.runMonoDex(Main.java:334)
Unknown source file : at com.android.dx.command.dexer.Main.run(Main.java:277)
Unknown source file : at com.android.dx.command.dexer.Main.main(Main.java:245)
Unknown source file : at com.android.dx.command.Main.main(Main.java:106)

:app:dexDebug FAILED

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':app:dexDebug'.

com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command '/usr/lib/jvm/java-8-oracle/bin/java'' finished with non-zero exit value 2

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

===== Solve=====

In your React Native project on git bash command

 $ cd android/ && ./gradlew clean

go back and try run it again.

$ cd .. && react-native run-android

This will fix your errors
sure, if you config api maps right, it will display map

gdLuck!

[eangfmbs]

I found sth that cause the problem while setting API key as in the instruction bellow

Add your Browser API key to your manifest file (androidapp\src\mainAndroidManifest.xml):


android:name="com.google.android.geo.API_KEY"
android:value="{{Your Google maps API Key Here}}"/>

========Solve=========

android:name="com.google.android.geo.API_KEY"
android:value="Your Google maps API Key Here"/>

[AmalinaMakhtar]

Hey. mine is still getting black screen with red border. working on IOS but not for android. I already tried ALL the solutions in here and yet no results.

<uses-feature android:glEsVersion="0x00020000" android:required="true" /> <permission android:name="com.app.permission.MAPS_RECEIVE" android:protectionLevel="signature" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> <uses-permission android:name="android.permission.ACCESS_CHECKIN_PROPERTIES" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="com.app.permission.MAPS_RECEIVE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="key"/>

1. The application.java

Did try with airpackage and mappackage, both doesnt work.

`public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override
protected String getJSBundleFile() {
  return CodePush.getJSBundleFile();
}

@Override
protected boolean getUseDeveloperSupport() {
  return BuildConfig.DEBUG;
}

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new VectorIconsPackage(),
      new CodePush("key, getApplicationContext(), BuildConfig.DEBUG)
  );
}

};

@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}`

so yeah. anyone. please!

[ssomnoremac]

@thundenilla, just wanted to chime in on this issue, as I'm nearly the 100th commenter, and I have also tried all of these suggestions without success. It really sucks. I hope it started to work for you magically and if anyone figures out why this is so inconsistent on Android, I'll probably still be trying tomorrow 😪

[ssomnoremac]

Finally got it. #684 is what did it for me.
I finally solved the problem by adding

import com.airbnb.android.react.maps.MapsPackage;
and
new MapsPackage()

in MainApplication.java

@spikebrehm, would you accept a PR to the README about trying to pinpoint the source of Android issues rather than a list of 10 things (of which this is not one) I've read/tried all of them so I think I can clean it up

[lee-dabiker]

@KarlosQ I'm so pleased you asked this question (I did think about it a few times)
...
Like this:
android:value="{{hashashas1241241}}"
or like this:
android:value="hashashas1241241"
...

@jrichardlai I'm so glad you answered :) - I can see a map at last

Anyone else, if you see a google logo you're half way there - look into your API key.
I'm using an unrestricted Browser key and using the new/recommend meta tag android:name="com.google.android.geo.API_KEY" in the AndroidManifest.

If you see a white screen with a red border, (no google logo) its probably something else.
During the troubleshooting phase, I did go back and follow a Google Maps Native Android tutorial solely to rule out a problem with my API key. At this point i was getting a red border only.... https://developers.google.com/maps/documentation/android-api/start

The Map displayed there so I used npm to remove react-native-maps, react-native and other (now) redundant packages, then preformed clean up commands and re-installed (only took 30 mins total) created a new project and bam.. a google logo... the final piece was not using double curly braces in the manifest - doh...

@ssomnoremac - creating a new project today on Windows 10, i didn't need to do any of what you mention re. imports and editing any .java files - strange

[hackeram6]

@ssomnoremac your comment above helped me nail it as well. thank you!

I also noticed that using 'react-native link' while installing the package automatically takes care of importing the maps package in MainApplication.java. However, rnpm link does not.

It may prove helpful to make that clear in the installation doc, in case one of you (@spikebrehm) are updating it.

[npineda]

The suggestion to look at #684 that @ssomnoremac gave FINALLY got my map to display.
Adding
import com.airbnb.android.react.maps.MapsPackage;
and
new MapsPackage()
to "MainApplication.java" is what got my map to show.

I agree with @hackeram6 that this should be added to the installation.md doc for reference in the "Troubleshooting,Android" section.

[nsxr51]

in build.gradle

dependencies {
...
compile "com.airbnb.android:react-native-maps:+"
}

at MainApplication.java add:
import com.airbnb.android.react.maps.MapsPackage;
...
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new MapsPackage() // <-- THIS
);
}
};

fix this problem for me

[Knudian]

I have exactly the same issue :(

I am working on Mac for an Android App :

• react-native linkworked, I checked all inclusions, and all are done correctly.
• doing watchman watch-del-all && npm cache clean &&cd android/ && ./gradlew clean && cd .. && react-native run-androidin my terminal is good,

But still, my map is empty.
I made the style point : nothing shown.
I created a new GMap api key ... still an empty map.

Got any idea what to do? (I followed the whole thread).

[ammichael]

I'm also having trouble with this. Actually, I had it, generated a new key, and then it showed up and worked for a couple days.

Then it just stopped working and it's showing only the Google logo.

I'm testing in a real device; in simulator, even using Google API as target, it asks for Play Services update (which crashes the app).

I spent 6 hours in this problem, tried everything I've found here, but couldn't get it to work again :(

[gestefane]

I went through the problem of the map going blank with only a red border.

After exploring the problem I will summarize here what I did to solve. I hope to help you.

Install react-native-maps as follows:

npm install react-native-maps --save
rnpm link               <-- this is very important

FILE: yourProjectFolderandroid\settings.gradle
change or add the following lines if not present

include ':app', ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/android')

FILE: yourProjectFolderandroidappbuild.gradle
check if maps dependence is present

dependencies {
    compile project(':react-native-maps')       <-- put this if not present
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

FILE: yourProjectFolderandroidapp\src\mainAndroidManifest.xml
add meta-data

<meta-data
          android:name="com.google.android.geo.API_KEY"
          android:value="YOUR API KEY"/>

FILE: yourProjectFolderandroidapp\src\mainjava\com\projectNameMainActivity.java

import com.airbnb.android.react.maps.MapsPackage;

FILE: yourProjectFolderandroidapp\src\mainjava\com\projectNameMainApplication.java
add this line

import com.airbnb.android.react.maps.MapsPackage;

add MapsPackage()

new MainReactPackage(),
new MapsPackage()           <--- add this

[Knudian]

So, after many days trying to work on that ... I am still blocked.

All imports are good (repeating again and again how to import does not help), and everything is set up to work.

But it doesn't.
Why? I still don't know, and I can afford to lose more time on that.

The only way I found to have a map working was not to work with Google Maps, but OSM.
So, I just included <MapView.UrlTile urlTemplate="http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"/>in the MapView.

[gestefane]

Hello Knudian!

If you want to send me an example of your simple app, just with index.android.js, with your map implementation using Google Maps, I can try to help you.

I did just what I reported above and it worked perfectly.

Other checks to do:

In the case of Android, see if the SDK has all the features necessary to use Google services are installed. I will mention some:

• Android SDK Tools (25.2.3)
• Android SDK Platform Tools (25.0.1)
• Android SDK Build-tools (25.0.1)
• Android SDK Tools (23.0.1, 23.0.3, 23.0.3)
• Android 6.0 (API 23) - SDK Platform (23 - Rev 3)
• Extras:
• Android Support Repository (40)
• Google Play services (38)
• Google Repository (40)

To check SDK go to your AndroidStudioSDK folder and run "SDK Manager.exe"

[Newbieyh]

Can someone please help me. Stuck with this issue for almost 4 days now. Not able to understand whats the problem.
Issues

1. Can't find the browser key option in my credentials
   

1. ApplicationID should be same? Din't get that part how would I check that.

2. This is getting frustrating :/

-- Please please please help

[GabeAboy]

Anyone know why I may have a map grid but not any image?

[chasecs]

I fixed this BLANK MAP issue in a different approach.

I was working in Mac, and I did exactly what the Installation Instructions says. But when I run react-native run-ios in the terminal, I was told 'BUILD FAILED', due to build commands like AirMaps/AIRMapPolygonManager.m failed, and MapView in the iOS simulator is always blank with red border.

I tried many different ways, and finally fixed it by updating the react-native-maps to the latest 0.13.0 .

take notice of this , when I run:

npm install react-native-maps --save

I got the version below by default:

└── [email protected]

but this version didn't work well. So, I modified the corresponding line in 'dependencies' in file package.json to this :

"react-native-maps": ">=0.12.4"

then run npm update , and got the version below :

└── [email protected]

after all of above, I run react-native run-ios again, it build succeeded, and the MapView showed up. Hope this might be helpful.

[MMiller-Hairston]

After following all the iOS advice, I'm still just showing the red outline. Anyone have any other tricks up their sleeves?

[heron2014]

@MMiller-Hairston I have created a visual instruction of enabling Google Maps on IOS. If you still struggle, have a look, maybe this will help. https://gist.github.com/heron2014/e60fa003e9b117ce80d56bb1d5bfe9e0

[jmruiza]

This worked to me. Using the @heron2014 instructions:

After install react-native-maps, I just edit the package.json, update packages and link it and:

For IOS: Create and install Podfile. (I don't want use Google maps in IOS)
For Android: Edit AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 ...
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
 </manifest>
 ... 
<application>
  ...
   <meta-data
     android:name="com.google.android.gms.version"
     android:value="@integer/google_play_services_version" />
   <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="YOUR_API_KEY"/>
  ...
 </application>

This is all... To this point mi app works in IOS and Android with this basic component.

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import MapView from 'react-native-maps';

export default class MapScreen extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <MapView
        style={ styles.map }
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

module.exports = MapScreen

Hope this might be helpful. Regards

[gestefane]

Hi, I build a React Native course. See here: http://academiaandroid.com.br

Thanks!

Gestefane

Em 20/01/2017 11:36, Anita escreveu:
>

@MMiller-Hairston https://github.com/MMiller-Hairston I have created
a visual instruction of enabling Google Maps on IOS. If you still
struggle, have a look, maybe this will help.
https://gist.github.com/heron2014/e60fa003e9b117ce80d56bb1d5bfe9e0

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/react-native-maps/issues/118#issuecomment-274073395,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJELTCZC2rhNZ1Fvr2sqng6RMcyvZpxfks5rULhVgaJpZM4HpNAI.

[hnhatr]

modified in 'dependencies' in file package.json to this:
replace line "react-native-maps": [email protected]
to "react-native-maps": "git+https://github.com/airbnb/react-native-maps.git"

[onuar]

I still have the same problem.

OS: OSX 10.11.6

node --version
v7.5.0
npm --version
4.1.2

My package.json file:

"dependencies": {
"react": "15.4.2",
"react-native": "0.41.2",
"react-native-maps": "^0.12.4"
}

My Podfile:
Same as this one.

I tried everything that suggested above (~120 comments). Including restarting simulator, with react-native link instead of rnpm link, giving an absolute position to map and container, heating my mac on oven.

Anyway. I'm freaking out right now. I will almost give up. Using a component shouldn't be this hard. And intresting thing is nobody at Airbnb doesn't solve problem entirely.

If you are interested the problem, I can share my sources. Because I'm out of solution.

[onuar]

Ok guys. It works. It took two days for me. Ignore the useless Airbnb installation document.

All credit goes to @heron2014. You are the best. Here is the solution.

[Govind273]

i faced the same issue ...just look for ur view tag and try working with the flex contents

[Moussa112]

@Govind273 What exactly do you mean? Did you manage to fix the problem?
@onuar @heron2014 Is there a way to fix it without the podfile stuff? I have no idea what that is I haven't used it before either.

[Govind273]

Hi ,
if this regarding the blank android page which one see .
Then ,
For me it worked as i played around with flex and it worked.

On Thu, Mar 2, 2017 at 7:10 AM, Moussa112 [e-mail] wrote:

@Govind273 https://github.com/Govind273 What exactly do you mean? Did
you manage to fix the problem?
@onuar https://github.com/onuar @heron2014
https://github.com/heron2014 Is there a way to fix it without the
podfile stuff? I have no idea what that is I haven't used it before either.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/react-native-maps/issues/118#issuecomment-283637129,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AWHyov7KbV0lsVWPkbhEHlOGYD3K6rp2ks5rhrG1gaJpZM4HpNAI
.

[khle]

I am only seeing the empty box with red-border. I tried with both the iOS simulator and real iPhone.
I doubt this problem has anything with flexbox. The reason I believe so is because I tried them all such as: I tried with and without view container; I tried by changing top, left, right, bottom, and the red box changed accordingly, but still no map. The problem is more likely due to some linking issue on the XCode side.

The following screenshot (from the first poster) is similar to what I'm seeing.

I also tried the example. The error I'm getting is with AppRegistry.

[RoymanJing]

I run normally on iOS simulator, after I changed google map api key from example's to mine.

[fikilek]

Please help. I've been battling with this for a long time now.

Scenario: I have ERF data sitting in the MySQL DB with lat/long (GPS cooridnates). I display the tabular ERF data in one tab and lat/long in a map tab.

The Tabular ERF data display works well but the map does not. The map oly show after resizing the woindow and its not centered correctly. See code below: (I removed the Google API key)

---

• ERFs


• Map

Tabular data of the ERFs goes here

[onuar]

@Moussa112 I couldn't find any solution without Podfile. I simplified the solution in this project: https://github.com/onuar/AirMapPoc2
Let me know if it works.

[khle]

@onuar Your solutions works.

[garapricot]

https://github.com/garapricot/MapCluster this is a working google maps on IOS but now i want clusters can anyone help??

[monzerhijazi]

For IOS google maps, my issue was the API Key, specifically enabling IOS SDK in google console. Big props to @heron2014 for the checklist and guide. Link below to debugging ios SDK google maps key: https://gist.github.com/heron2014/e60fa003e9b117ce80d56bb1d5bfe9e0#important

[tyleragypt]

Android = Works...
iPhone = This Empty Gird...

Anyone else experience this or have suggestions? I have already gone through the majority of the iOS specific troubleshooting, but no luck so far.

[r2dev]

In case anyone use react-native-navigation on android, do not put MapsPackage in getPackages, put it in createAdditionalReactPackages from react-native-navigation to make it work

[mxcl]

I only figured this out once running adb logcat. Led me to the error message that I then found here and did the thing that fixed it.

[Sidhanthsur]

in IOS/Android putting the mapview in a view with a position: absolute etc messes up the whole UI. I want to embed the map as part of the screen with different elements too. Any workaround ?

[peterchappy]

Has anyone solved this issue on iOS without using google maps? I've followed the styling instructions, tried reinstalling and re-linking and have had no luck.

[fdbzn]

GRAY MAP - google
Hello guys,
In my case, when exist a gray map is because the api console doesnt work, not exist a link with the project,
i can fix it creating a new credencial with the same sha1 key.

[scotbond]

Here's what fixed it for us on Android:

Problem was blank map view and "Warning: Native component for "AIRMap" does not exist" on logs. (iOS was working perfectly)

Our app is using react-native-navigation by Wix. Which requires a modification in MainApplication.java;
Specifically adding the following function:

@Override
  public List<ReactPackage> createAdditionalReactPackages() {
    // Add the packages you require here.
    // No need to add RnnPackage and MainReactPackage
    return null;
    );
  }

The fix was to move the instantiation of MapsPackage to that function and away from getPackages ( as their comments explain ):

  @Override
  public List<ReactPackage> createAdditionalReactPackages() {
    // Add the packages you require here.
    // No need to add RnnPackage and MainReactPackage
    return Arrays.<ReactPackage>asList(
        new MapsPackage()
    );
  }

So I guess you should be making sure there are no such overrides on your code as well.
And the conclusion is that the AIRMap warning is an indication that MapsPackage was not linked properly. It must not be ignored and should be handled first in order for this to ever work.

[agustinaliagac]

@tyleragypt did you solve your issue ? if so, how ? thanks !

[tyleragypt]

@agustinaliagac I did resolve my issue. I opened up my project/workspace in Xcode and had to install a few recommended updates. I believe updating the google services library to the latest version did the trick, but since multiple updates were installed, I couldn't pinpoint the specific update that resolved my issue. Let me know if that approach doesn't help in anyway and I can try to assist further if you provide more details. Good luck!

[mshameer]

Here is a complete configured sample application for android just clone it and do npm install the application will show you the map

https://github.com/mshameer/react-native-maps-sample

[the-yadu]

fatal error: 'React/RCTConvert+MapKit.h' file not found

I am getting this issue and red box continues to haunt my life. Also I have followed all the above step to get the maps working, but no luck.

[ragnorc]

@the-yadu latest release of react-native-maps fixes this issue.

[the-yadu]

1310 @ragnorc No My friend it doesn't. I am still getting the white space of death with a red border. 👍 Please refer to this issue that I have opened. #1310

This part fatal error: 'React/RCTConvert+MapKit.h' file not found of the issue is solved by react-native upgrade

[pr-rojan]

Closing simulator and restarting the dev server worked for me.
I have figure some our weird issues, whenever I install any packages and do link (react-native link).
It doesnt work, when I restart everything then only it works. Thats what I have figured out using react native.

[romjear12]

@alexHlebnikov Hey, thank you very much. It's works for me.

[cltsang]

I had the same blank view with orange border on iOS simulator. I discovered that I just had to uninstall the app, then quit and re-launch the simulator. After that, the view loads up Apple Map just fine. Haven't tried on Android though.
I think this should be the process for every package that needs linking, but sometimes I forget it myself.
Hope that helps.

[OogieBoogieInJSON]

I have a similar issue. I can see the blank map, Google logo in the corner. Does this mean my API key is incorrect ? I did generate one, still doesn't work.

Later edit: Fixed, thanks.

[svjchrysler]

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

[khalid32]

Hey @OogieBoogieInJSON , can you plz share how to fix this? I've recreate project, used different api key but couldn't solve it.

react-native: 0.45.1
react-native-maps: ^0.15.3

Update: Fixed; forgot to enable 'Google Maps Android API'..

[LuisMesa]

From the beginning this is what I did:

1. Create project
   react-native init MAP

2. In android/app/src/main/AndroidManifest.xml add a new meta-data child to the application tag:

<meta-data
                android:name="com.google.android.maps.v2.API_KEY"
                android:value="YOUR_API_KEY"/>

1. Enable your API for Android or IOs:
   https://console.cloud.google.com/apis/api/maps_android_backend/overview?project=sage-etching-147318&duration=PT1H

2. Install and Link the package:
   npm i react-native-maps --save
react-native link

3. Add the MapView in index.android.js:

import React, { Component } from 'react';
import {AppRegistry, StyleSheet, Text, View, Dimensions} from 'react-native';
import MapView from 'react-native-maps';

export default class MAP extends Component {
  render() {
    return (
        <View style ={styles.container}>
          <MapView
              style={styles.map}
              region={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
          }}
          >
          </MapView>
        </View>
    );
  }
}

let { width, height } = Dimensions.get('window');
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    flex: 1,
    width: width,
    height: height,
  },
});

AppRegistry.registerComponent('MAP', () => MAP);

1. Run:
   npm start --clear-cache
react-native run-android

In Case Of Error
cd android
gradlew clean
cd ..
react-native run-android

It works for me, I hope it helps someone in the future.

[phamcongsonit]

I found out how to fix that issue
(Make sure you correctly installed: https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md)

If your map just show red border, because you don't install google service
(You can follow install in there: https://z3ntu.github.io/2015/12/10/play-services-with-genymotion.html)
If your map show Google logo on left bottom
Find debug keystore file (On my Ubuntu: /root/.android/debug.keystore)
Get SHA1 and add it in API Key on Google
We have 2 keystores (1 for release, 1 for debug), you should add all them

I hope it helps someone in future

[Ideasrefined]

SOLVED
Platform Android MM
Versions I am using (from Package.json):

"react-native": "0.47.1",
"react-native-maps": "^0.15.0"

I had red border and no map, and here is what worked for me.
_

(make sure your device has Google Play services)
For GenyMotion Emulator try installing gapps
"openGapps.org" => Choose x86 ==> choose nano package ==>Download ==>drag into genymotion ==>Reboot emulator ==>Signin (not sure if this is necessary)

_
1- yarn add react-native-maps
2- yarn
3- follow along the install guide for google maps key.

• 3.a Goto google developer console
• 3.b Create a project
• 3.c Generate credentials (i am using unrestricted key so any suggestions about getting android api key or browser key doesn't matter)
• 3.d Don't forget to "Enable the key"

1. Credit @nsxr51
   in build.gradle

dependencies {
...
compile "com.airbnb.android:react-native-maps:+"
}

at MainApplication.java add:

import com.airbnb.android.react.maps.MapsPackage;
...
@override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new MapsPackage() // <-- THIS
);
}
};

gist: Solve red border, no map for react-native-maps on Android

[ahmad2smile]

Just needed to enable Google Maps API for Android separately in Google's API Console.

[jimfilippou]

Just wanted to mention that i'm the most stupid developer in the planet.
I was struggling to make my maps work and i followed every step i could find here and the problem was....
My wifi on my physical device was turned off, and i spent 5 hours trying to solve this problem. Sometimes you need to just take a break to sudo reboot your brain.

Guys if you use physical devices, turn the wifi on!

[akajack]

@Ideasrefined I had the problem in the emulator. With step 4 I resolved !!! Thanks so much!!!

[hamxabaig]

If someone is using react-native-navigation by wix, You should follow @scotbond's answer here It worked for me, like a charm. 😁

[Etregoning]

Make sure you are setting your styles properly and using the right API for your platform. I ran into this issue as well, with the map not showing up at all at first, but then I fixed that by adding flex: 1 to my container styles, and then at that point I had an issue with the map showing up but being completely blank -- This one had me completely stumped until I realized I was using the google maps geocoding API, and not the google maps android API.

[ignindra]

@Ideasrefined Thank you very much for reminding me that I have to enable the google maps api first 😁. Spent hours to figure out why the google maps won't show up even after I created brand new react native project with only react native maps in it.

[abiduzz420]

The issue could also be due to not enabling Google Maps API in developer console.

[milon87]

please consider changing package name for Android.

[Mate38]

I did everything that was said above and I still have the same problem, open only a gray background with a Google symbol on the side

[infinite-wavelength]

@alexHlebnikov can you please tell...what did you do exactly to resolve that issue of blank(yellowish gray) google map?.....please reply asap....I already wasted whole day

[infinite-wavelength]

@Newbieyh did u get rid of that blank (yellowish gray) screen of google map?

[Jun711]

If you follow the steps listed on the following document closely, you should be able to see the mapView.
https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md

And, don't forget to clear cache, remove the app from your device and reinstall.

[umeshk-mmmut]

Hi ,
I was facing same problem related maps but after two days i got the solution simply match your API KEY(manifest file and google credential) same as google maps generating only this kinds of problem.

[infinite-wavelength]

Yes...if you are getting blank maps...the problem is with API_KEY or restrictions placed on that API_KEY.....try changing keys...It will work for sure

[icaoktavianita]

make sure you enable google maps android key, like this

[abiduzz420]

Refer here: https://github.com/airbnb/react-native-maps#my-map-is-blank

[alvelig]

I recently made a fresh example build with pods and GoogleMaps with no issues.
https://github.com/alvelig/react-native-maps-pods-example.
Try to check it out or build through the README.MD. If it does not help, let me know.

[anandbabud1987]

render(){
    return(


      <View accessible={true} style={styles.container}>



    <MapView
    style={ styles.map }
initialRegion={{
  latitude: 37.78825,
  longitude: -122.4324,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421,
}}
/>


      </View>



    );
  }
}



const styles = StyleSheet.create({
  fadeIn:{
    width:250,
    height:50,
    backgroundColor:'#bdc3c7',
  },
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

I had the same blank map view and found that it is do with styling map position should be absolute

[alvelig]

@anandbabud1987 yep, style={StyleSheet.absoluteFillObject} does pretty the same

[anandbabud1987]

@alvelig yes that does as well.

[anandbabud1987]

But Facing blank map in android , I have used correct api key and enabled for android apps with sha1.

[anandbabud1987]

Have found the root cause, your AVD API level should be 24 or 25. what I used was API 27.
Target should be Google Play API instead of Google API.

[alvelig]

@anandbabud1987 please comment in #1877. Your comment is really useful.

[rborn]

That’s an API key problem. Check your key.

Sent from my iPhone

On 25 Dec 2017, at 12:34, Farhad Mehryari [e-mail] wrote:

hi there
here is my code
also I've enabled API key in google console

import React, { Component } from 'react'
import { Text, View } from 'native-base'
import {StyleSheet} from 'react-native'
import MapView from 'react-native-maps';

export default class Map extends Component {
constructor(props){
super(props)
this.state = {
region: this.getInitialState().region,
markers: [
{
id: 1,
title: 'آتیه نگر',
description: 'شرکت آتیه نگر نمایندگی پازار',
latlng: {
latitude: 38.58825,
longitude: 40.6324,
}
}
]
}
}
getInitialState() {
return {
region: {
latitude: 37.78825,
longitude: 41.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
},
};
}

onRegionChange(region) {
    this.setState({ region });
}

render() {
    return (
        <View style={styles.container}>
            <MapView
                style={styles.map}
                region={this.state.region}
                onRegionChange={this.onRegionChange}
            >
                    {this.state.markers.map(marker => (
                        <MapView.Marker
                        key={marker.id}
                        coordinate={marker.latlng}
                        title={marker.title}
                        description={marker.description}
                        />
                    ))
                    }

            </MapView>
        </View>
    )
}

}

const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[vikram24051992]

hello i also getting same blank screen in android

Below is my code please help

'use strict';

import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
Alert,
View,
ListView,
Navigator,
TextInput,
Button,

} from 'react-native';
import NavBar, { NavButton, NavButtonText, NavTitle } from 'react-native-nav';
import Icon from 'react-native-vector-icons/dist/FontAwesome';
import iconFont from 'react-native-vector-icons/Fonts/FontAwesome.ttf';
import BottomNavigation, { Tab } from 'react-native-material-bottom-navigation';
import MapView from 'react-native-maps';

const Map = (props) => {
const { navigate } = props.navigation;

return (

    <TextInput 
        style={styles.textinput} 
        placeholder="Search"
    underlineColorAndroid='transparent' 
    />  

  <MapView
    style={ styles.map }
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'column',
//position: 'absolute',
backgroundColor: '#444446',
},
map:{
position: 'absolute',
top: 150,
left: 0,
right: 0,
bottom: 59,
},
});

Thanks in advance

[umeshk-mmmut]

Hi,
Yes vikram24051992 please check your API_KEY in Androidmanifest.xml
.......
android:name="com.google.android.geo.API_KEY"
android:value="your api key value"/>

[milon87]

@vikram24051992 please read all comment above. You will get interesting fact and solution. you will never face a problem with the map if you read all the comment above. Hope this will help

[vikram24051992]

yes done running perfectly thanks @umeshk-mmmut

[umeshk-mmmut]

ok

[anandbabud1987]

@vikram24051992 please make sure you android target is play service. if not create a new virtual device emulator with play store.

[umeshk-mmmut]

Hi,
Please check MapView opening and closing you are going wrong.
coordinate={{latitude: LATITUDE,
longitude: LONGITUDE}}
title={"title"}
description={"description"}
/>

On Tue, Jan 9, 2018 at 10:34 AM, vikram24051992 [e-mail]
wrote:

[image: selection_016]
https://user-images.githubusercontent.com/33919712/34705723-8c04994c-f528-11e7-83e7-ed9a3cae10f3.png
[image: screenshot_1515473970]
https://user-images.githubusercontent.com/33919712/34705731-a3c56624-f528-11e7-88ec-9af8d3ebadb0.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/react-community/react-native-maps/issues/118#issuecomment-356181206,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ab610zuoxuArP8W4KarrAjl9I71JgX-Aks5tIvNfgaJpZM4HpNAI
.

[rahulbhankar786]

Thanks all for such knowledgeable posts.

[flyandi]

flex:1 as only style to the map did it for me. Wrapping in a <container> element from NativeBase.

[sujitpk-perennial]

For me google map service was not enabled.

[agm1984]

If you are having this blank map problem on Android and not iOS but you think everything is installed correctly,

Open Android Studio, go to Virtual Devices and make sure you are not using a 86x_64 image.

You will have this problem if you rotate your device simulator screen and the map appears. For me, creating a Nougat x86 image made my Android map start working.

[hamzajameel]

1 after running npm istall make sure to run react-native-maps again and react-native link react-native-maps
2 be sure to style your View tag has styles.container and your MapView tag styles.map
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});

[Ahmad5448]

can anyone tell me that billing account is neccessary for get google map key API ???

[SangerNamrata]

@Ahmand5448 In my case when I created project more than 3 then it asks for billing account so there are limited number of trials after that if you want to create more Projects in google cloud console at that time it billing account is necessary.

[takdemir]

@magrinj Thanks, very thanks, many thanks and whatever :) style -> position -> absolute in MapView is the solution :)

[MUNEENDRA2019]

Hii guys, I've finally fixed my issue. the issue is a blank map

My Google Maps API Key. Insert in manifest.xml file

android:name="........"
android:value="API Key"/>

[Rutvik17]

It seems to be not the styles problem, but Google Maps API configuration problem.
Thank you for help anyway.

Now I have this:

And now I'm trying to configure Google API credentials.

I am getting this problem, do you know how you solved it ?

[johuder33]

It seems to be not the styles problem, but Google Maps API configuration problem.
Thank you for help anyway.
Now I have this:

And now I'm trying to configure Google API credentials.

I am getting this problem, do you know how you solved it ?

I had the same issue, but today I was able to fix it :), it not a problem related with styles, it is just a problem related to GOOGLE API KEY, so I highly recommend you to follow the troubleshooting section of the react-native-maps library.

but basically the steps you need to take to fix this issue, are following:

1. Make sure you Enable the Google Maps SDK for IOS (This was my case), or the Google Maps SDK Android
2. Once you have enabled the SDK, you need to make sure that your API KEY is restricted only for the platform that you are using, a good tip could be leave your api key without any restrictions, just to make it work :) (but remember restrict it later)
3. Enjoy Google Maps into your React Native app :D

[gezichenshan]

All solutions I tried didn't solve the _google logo/markers/polylines etc are displayed but the map background is otherwise blank_

I'm in China, we could only visit google through VPN. So I opened emulator's Setting > Proxy > Manual proxy configuration. Input Host name as 127.0.0.1 and the Port number as the one that vpn proxy server listening on my host > Apply. Finally I get the google map rendered.

[MUNEENDRA2019]

use map component under the view

thanks
muneendrashukla

On Fri, Sep 11, 2020 at 12:31 PM gezichenshan [e-mail]
wrote:

All solutions I tried didn't solve the google logo/markers/polylines etc
are displayed but the map background is otherwise blank

I'm in China, we could only visit google through VPN. So I opened
emulator's Setting > Proxy > Manual proxy configuration. Input Host name as
127.0.0.1 and the Port number as the one that vpn proxy server listening on
my host, Apply. Finally I get the google map rendered.

But now I got Could not connect to development server . How to solve it?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/react-native-community/react-native-maps/issues/118#issuecomment-690915396,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ANOQVHBWHQN3TGOPLTKC43TSFHDM5ANCNFSM4B5E2AEA
.

[PvtJones]

import React, { useState, useEffect } from 'react';
import MapView , { Marker } from 'react-native-maps';
import { StyleSheet, ScrollView, Dimensions } from 'react-native';
import { Block, Text, theme,Button} from 'galio-framework'
const { width , height} = Dimensions.get('screen');
import PlacesInput from 'react-native-places-input';
import Config from './../config';
import { Language, argonTheme } from '../constants';
import { Input } from './../components'
import API from './../services/api'

function AddAddress({navigation}){
const [places, setPlaces] = useState([]);
const [region, setRegion] = useState(null);
console.log(Config)
return (

<Block flex center style={styles.home}>
        <PlacesInput
            queryTypes={Config.queryTypes}
            stylesContainer={{marginTop:100}}
            placeHolder={Language.enterYourAddress}
            googleApiKey={Config.GOOGLE_API_KEY}
            queryCountries={Config.queryCountries}
            searchRadius={Config.searchRadius}
            searchLatitude={Config.searchLatitude}
            searchLongitude={Config.searchLongitude}
            onSelect={(place) => {
                console.log(place);
                setPlaces([place]);
                setRegion({
                    latitude: place.result.geometry.location.lat,
                    longitude:place.result.geometry.location.lng,
                    latitudeDelta: 0.008,
                    longitudeDelta: 0.009,
                });
            }} 
        />
     <MapView 
        region={region}
        style={styles.home}
        showsScale={true}
        showsBuildings={true}
     >
     {places.map((marker,index) => (
            <Marker draggable
            key={index}
            coordinate={{latitude:marker.result.geometry.location.lat,longitude:marker.result.geometry.location.lng}}
            title={marker.result.name}
            description={marker.formatted_address}
            onDragEnd={(e) =>{
                var thePlace=places[0];
                thePlace.result.geometry.location.lat=e.nativeEvent.coordinate.latitude;
                thePlace.result.geometry.location.lng=e.nativeEvent.coordinate.longitude;

                setPlaces([thePlace]);

                setRegion({
                    latitude: thePlace.result.geometry.location.lat,
                    longitude:thePlace.result.geometry.location.lng,
                    latitudeDelta: 0.008,
                    longitudeDelta: 0.009,
                });


            } }
            />
        ))}



     </MapView>
     <Block style={styles.buttonCallout}>
            {places.length==1?<Button onPress={()=>{navigation.navigate('CompleteAddress',{
                lat:places[0].result.geometry.location.lat,
                lng:places[0].result.geometry.location.lng,
                fa:places[0].result.formatted_address}
      )}} shadowless color="success">{Language.continue}</Button>:null}
        </Block>
</Block>
)

}
exports.AddAddress=AddAddress;

function CompleteAddress({ route, navigation }){

const lat =navigation.getParam('lat', '');
const lng =navigation.getParam('lng', '');

const [fa, setFa] = useState(navigation.getParam('fa', ''));
const [addressNumber, setAddressNumber] = useState('');
const [intercom, setIntercom] = useState('');
const [floor, setFloor] = useState('');
const [entry, setEntry] = useState('');
const [appartment, setAppartment] = useState('');

return (
    <Block flex center>
    <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 30 }}>


            <Text bold size={16} style={styles.title}>
                {Language.addressDetails}
            </Text>
            <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
                <Input right placeholder={Language.address} iconContent={<Block />} value={fa} onChange={({ nativeEvent: { text } }) => setFa(text)} />
            </Block>
            <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
                <Input right placeholder={Language.addressNumber} iconContent={<Block />} value={addressNumber} onChange={({ nativeEvent: { text } }) => setAddressNumber(text)}  />
            </Block>

            <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
                <Input right placeholder={Language.appartment} iconContent={<Block />} value={appartment} onChange={({ nativeEvent: { text } }) => setAppartment(text)} />
            </Block>
            <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
                <Input right placeholder={Language.intercom} iconContent={<Block />} value={intercom} onChange={({ nativeEvent: { text } }) => setIntercom(text)}  />
            </Block>
            <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
                <Input right placeholder={Language.entry} iconContent={<Block />} value={entry} onChange={({ nativeEvent: { text } }) => setEntry(text)}  />
            </Block>
            <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
                <Input right placeholder={Language.floor} iconContent={<Block />} value={floor}onChange={({ nativeEvent: { text } }) => setFloor(text)}   />
            </Block>
            <Block center>
            <Button shadowless uppercase color="success" style={[styles.button]}  onPress={()=>{
                API.saveAddress({
                    lng:lng,
                    lat:lat,
                    address:addressNumber+", "+fa,
                    intercom:intercom,
                    floor:floor,
                    entry:entry,
                    appartment:appartment
                },()=>{
                    console.log("address added");
                    navigation.navigate("SelectAddress",{newAddress:fa})
                })

            }}>
                {Language.addAddress}
            </Button>
        </Block>
      </ScrollView>
    </Block>
)

}

exports.CompleteAddress=CompleteAddress;

const styles = StyleSheet.create({
button: {
marginTop: theme.SIZES.BASE,
marginBottom: theme.SIZES.BASE,
width: width - theme.SIZES.BASE * 2,
paddingHorizontal: theme.SIZES.BASE
},
cartCheckout: {
backgroundColor:"white"
},
listStyle:{
padding:theme.SIZES.BASE,
},
home: {
width: width,
height: height,
},
articles: {
width: width - theme.SIZES.BASE * 2,
paddingVertical: theme.SIZES.BASE,
},
social: {
width: theme.SIZES.BASE * 3.5,
height: theme.SIZES.BASE * 3.5,
borderRadius: theme.SIZES.BASE * 1.75,
justifyContent: "center"
},
buttonCallout: {
flexDirection:'row',
position:'absolute',
bottom:30,
alignSelf: "center",
justifyContent: "space-between",
backgroundColor: "transparent"
},
group: {
paddingTop: theme.SIZES.BASE * 2
},
title: {
paddingBottom: theme.SIZES.BASE,
paddingHorizontal: theme.SIZES.BASE * 2,
marginTop: 44,
color: argonTheme.COLORS.HEADER
},
});

can anyone help i am getting white screen after opening my map screen.

[MUNEENDRA2019]

hi tanmay
use map under the component

On Wed, Sep 30, 2020 at 12:30 AM Tanmay Dey [e-mail]
wrote:

import React, { useState, useEffect } from 'react';
import MapView , { Marker } from 'react-native-maps';
import { StyleSheet, ScrollView, Dimensions } from 'react-native';
import { Block, Text, theme,Button} from 'galio-framework'
const { width , height} = Dimensions.get('screen');
import PlacesInput from 'react-native-places-input';
import Config from './../config';
import { Language, argonTheme } from '../constants';
import { Input } from './../components'
import API from './../services/api'

function AddAddress({navigation}){
const [places, setPlaces] = useState([]);
const [region, setRegion] = useState(null);
console.log(Config)
return (

queryTypes={Config.queryTypes}
stylesContainer={{marginTop:100}}
placeHolder={Language.enterYourAddress}
googleApiKey={Config.GOOGLE_API_KEY}
queryCountries={Config.queryCountries}
searchRadius={Config.searchRadius}
searchLatitude={Config.searchLatitude}
searchLongitude={Config.searchLongitude}
onSelect={(place) => {
console.log(place);
setPlaces([place]);
setRegion({
latitude: place.result.geometry.location.lat,
longitude:place.result.geometry.location.lng,
latitudeDelta: 0.008,
longitudeDelta: 0.009,
});
}}
/>
region={region}
style={styles.home}
showsScale={true}
showsBuildings={true}
>
{places.map((marker,index) => (
key={index}
coordinate={{latitude:marker.result.geometry.location.lat,longitude:marker.result.geometry.location.lng}}
title={marker.result.name}
description={marker.formatted_address}
onDragEnd={(e) =>{
var thePlace=places[0];
thePlace.result.geometry.location.lat=e.nativeEvent.coordinate.latitude;
thePlace.result.geometry.location.lng=e.nativeEvent.coordinate.longitude;

            setPlaces([thePlace]);

            setRegion({
                latitude: thePlace.result.geometry.location.lat,
                longitude:thePlace.result.geometry.location.lng,
                latitudeDelta: 0.008,
                longitudeDelta: 0.009,
            });


        } }
        />
    ))}



 </MapView>
 <Block style={styles.buttonCallout}>
        {places.length==1?<Button onPress={()=>{navigation.navigate('CompleteAddress',{
            lat:places[0].result.geometry.location.lat,
            lng:places[0].result.geometry.location.lng,
            fa:places[0].result.formatted_address}
  )}} shadowless color="success">{Language.continue}</Button>:null}
    </Block>

)

}
exports.AddAddress=AddAddress;

function CompleteAddress({ route, navigation }){

const lat =navigation.getParam('lat', '');
const lng =navigation.getParam('lng', '');

const [fa, setFa] = useState(navigation.getParam('fa', ''));
const [addressNumber, setAddressNumber] = useState('');
const [intercom, setIntercom] = useState('');
const [floor, setFloor] = useState('');
const [entry, setEntry] = useState('');
const [appartment, setAppartment] = useState('');

return (

        <Text bold size={16} style={styles.title}>
            {Language.addressDetails}
        </Text>
        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Input right placeholder={Language.address} iconContent={<Block />} value={fa} onChange={({ nativeEvent: { text } }) => setFa(text)} />
        </Block>
        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Input right placeholder={Language.addressNumber} iconContent={<Block />} value={addressNumber} onChange={({ nativeEvent: { text } }) => setAddressNumber(text)}  />
        </Block>

        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Input right placeholder={Language.appartment} iconContent={<Block />} value={appartment} onChange={({ nativeEvent: { text } }) => setAppartment(text)} />
        </Block>
        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Input right placeholder={Language.intercom} iconContent={<Block />} value={intercom} onChange={({ nativeEvent: { text } }) => setIntercom(text)}  />
        </Block>
        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Input right placeholder={Language.entry} iconContent={<Block />} value={entry} onChange={({ nativeEvent: { text } }) => setEntry(text)}  />
        </Block>
        <Block style={{ paddingHorizontal: theme.SIZES.BASE }}>
            <Input right placeholder={Language.floor} iconContent={<Block />} value={floor}onChange={({ nativeEvent: { text } }) => setFloor(text)}   />
        </Block>
        <Block center>
        <Button shadowless uppercase color="success" style={[styles.button]}  onPress={()=>{
            API.saveAddress({
                lng:lng,
                lat:lat,
                address:addressNumber+", "+fa,
                intercom:intercom,
                floor:floor,
                entry:entry,
                appartment:appartment
            },()=>{
                console.log("address added");
                navigation.navigate("SelectAddress",{newAddress:fa})
            })

        }}>
            {Language.addAddress}
        </Button>
    </Block>
  </ScrollView>
</Block>

)

}

exports.CompleteAddress=CompleteAddress;

const styles = StyleSheet.create({
button: {
marginTop: theme.SIZES.BASE,
marginBottom: theme.SIZES.BASE,
width: width - theme.SIZES.BASE * 2,
paddingHorizontal: theme.SIZES.BASE
},
cartCheckout: {
backgroundColor:"white"
},
listStyle:{
padding:theme.SIZES.BASE,
},
home: {
width: width,
height: height,
},
articles: {
width: width - theme.SIZES.BASE * 2,
paddingVertical: theme.SIZES.BASE,
},
social: {
width: theme.SIZES.BASE * 3.5,
height: theme.SIZES.BASE * 3.5,
borderRadius: theme.SIZES.BASE * 1.75,
justifyContent: "center"
},
buttonCallout: {
flexDirection:'row',
position:'absolute',
bottom:30,
alignSelf: "center",
justifyContent: "space-between",
backgroundColor: "transparent"
},
group: {
paddingTop: theme.SIZES.BASE * 2
},
title: {
paddingBottom: theme.SIZES.BASE,
paddingHorizontal: theme.SIZES.BASE * 2,
marginTop: 44,
color: argonTheme.COLORS.HEADER
},
});

can anyone help i am getting white screen after opening my map screen.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/react-native-maps/react-native-maps/issues/118#issuecomment-700917726,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ANOQVHHRWKBUGHX6QZAZL4LSIIVEHANCNFSM4B5E2AEA
.

[TaraSinghDanu]

When the api key is not restricted Map is visible on android device.After restricting the api key with package name and sha1 key map is blank.

The same restricted key is working on a native andoid app.

Only on react-native, map is blank.

import React, { Component } from "react";
import { AppRegistry, StyleSheet, Text, View } from "react-native";
import MapView, { PROVIDER_GOOGLE } from "react-native-maps";

export default class App extends Component {
render() {
return (
provider={PROVIDER_GOOGLE}
initialRegion={{
latitude: 20.993776,
longitude: 105.811417,
latitudeDelta: 0.021,
longitudeDelta: 0.021
}}
style={StyleSheet.absoluteFillObject}
/>

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red'
}
});

AppRegistry.registerComponent("MapExample", () => App);

[akshat-oyo-20]

It seems to be not the styles problem, but Google Maps API configuration problem.
Thank you for help anyway.

Now I have this:

And now I'm trying to configure Google API credentials.

Did you solve this issue and what was the cause?

[smajazayeri]

My issue was related to the SH1 cert and it was fixed by following these steps:
https://docs.expo.io/versions/latest/sdk/map-view/#deploying-to-the-google-play-store

[anhnch]

For me, the credential was right, but I forgot to manually enable the SDK.

"Add maps based on Google Maps data to your iOS application with the Maps SDK for iOS. The SDK automatically handles access to the Google Maps servers, map display and response to user gestures such as clicks and drags." As I understand, It guards the incoming request. Enabling it shows the map content.