GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account.
Upon running it, all I get is an empty box with red outline. There is another ticket 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 :. Just out of curiosity, is everyone using ES6 syntax class extends componentor the older JS syntax React.
ES6 for me as well. The examples are done with the other syntax so maybe that's throwing something off. 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:. 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.
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.
Show Map on React Native
So if you want to use my code create a new file Home. It's explain right here in the Installation guideStep 4 in Android installation. Thank you for help anyway. Now I have this:. 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.I am using react-native-maps to render a Google map on my phone. I was struggling through the documentation and received lots of Xcode errors during implementation, so that spurred me to write this tutorial in order to show you my steps that allowed me to eventually get a Google map on my simulator and phone!
I created a new React Native repo. Now you will want to cd into your project and run the command react-native run-ioswhich should open your iOS simulator. Here are the React Native docs to help with that. Now onward to mapping! If you want to use the same version as I did in this repo you can npm install react-native-maps 0.
I immediately got this horrible red screen yelling at me! Whenever I see that question mark in the white diamond in an error message I know that I need to restart the simulator. After you shut down the simulator and rerun react-native run-ios that red screen should be gone.
Now you will want to link your native dependencies with Xcode. Below is the code that should go into your Podfile. Next you will need to install the Pods. Now you will no longer be using your. Open your. Drag the AirGoogleMaps folder into your project. After dropping that folder into your project there will be a pop-up window in which you will specify to Create groups.
Your project file structure should now look like this:. And your libraries in your Build Phases should look like this:. Now navigate to your Build Settings to the Search Paths section. Double click on the file path in the Header Search Paths.
Another pop-up window will appear and you will want to click on the plus sign to add this line to it:. Now is the fun part of actually generating a map! Time for Android development. This has a much easier set-up, especially if you ran react-native link react-native-maps since this command does must of the heavy lifting for you.
Open up your Android Studio and make sure you have an emulator running before you run react-native run-android. But now you should have a map rendering on an Android, hooray! Now for some real fun we can customize the styling of the map through the Google style generator. Select the style you like and then copy the json object into your code and then you can use those styles by customMapStyle.
Having fun yet?! If you run the simulator through your personal device it will show your actual current location.See Installation Instructions. Due to the rapid changes being made in the React Native ecosystem, we are not officially going to support this module on anything but the latest version of React Native.
If you are using an older version of React Native with this module though, some features may be buggy.
Since react-native 0. React Native versions from 0. This MapView component is built so that features on the map such as Markers, Polygons, etc. This provides an intuitive and react-like API for declaratively controlling features on the map.
Tiles can be stored locally within device using xyz tiling scheme and displayed as tile overlay as well. This is usefull especially for offline map usage when tiles are available for selected map region within device storage.
For Android: LocalTile is still just overlay over original map tiles. It means that if device is online, underlying tiles will be still downloaded. For example:. See OSM Wiki for how to download tiles for offline usage. Place components you that wish to overlay MapView underneath the MapView closing tag. Absolutely position these elements. Create the json object, or download a generated one from the google style generator.React Native Maps Installation
This example displays some of them in a log as a demonstration. One can change the mapview's position using refs and component methods, or by passing in an updated region prop. The component methods will allow one to animate to a given position like the native API could. This allows one to animate the zoom and position of the MapView along with other gestures, giving a nice feel. Issue: Since android needs to render its marker views as a bitmap, the animations APIs may not be compatible with the Marker views.
Not sure if this can be worked around yet or not. Default markers will be rendered unless a custom marker is specified. One can optionally adjust the color of the default marker by using the pinColor prop. Callouts to markers can be completely arbitrary react views, similar to markers.
As a result, they can be interacted with like any other view. Custom callout views can be the entire tooltip bubble, or just the content inside of the system default bubble.
How to Add Maps in React Native Using react-native-maps
See Callouts. Enable lite mode on Android with liteMode prop. Ideal when having multiple maps in a View or ScrollView. Poi are clickable, you can catch the event to get its information usually to get the full detail from Google Place using the placeId. The MapView can accept an AnimatedRegion value as its region prop.
Subscribe to RSS
The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. React native is blank on my android device. It's just a grey screen with the google logo. Unlike React-native-maps Blank page Only google logo it is is working on a simulator but not on real device.
Perfectly working on Expo but not when I download the app from playstore. The meta-data in AndroidManifest. I think you've enabled Google Play's app signing service. The issues are with different hashes between expo app and a standalone app. If all else fails, like was in my case, don't forget the basic stuff.
So added style to my View, styles.
Learn more. Asked 1 year, 8 months ago. Active 3 months ago.
Viewed 3k times. I searched for the problem online: The API should be fine stylesheet is ok it's working on genymotion emulator working on android virtual device Perfectly working on Expo but not when I download the app from playstore.
This question helped me : I just forgot to put flex in style so the map was loading but not displaying on the screen because mapview was not taking height or width. I know it's a very small mistake. Active Oldest Votes. Mounish Sai Mounish Sai 46 5 5 bronze badges. Thanks I'll just try it. Wich one do I have to add? Thanks for your help. Do I need the generated client-id somewhere?
Hi I had the same error and this fixed it for me. Basically I had the app signed for development but not for production. You should have two entries in credentials.
I had similar problem and spent a lot of time before solve it. Usually all was OK on real device, but fails to show Google Map on some of my emulator variants. Obviously, the program code was OK, so the question was why? That was my major mistake to do not get it works! I also had the same issue for the same target-version and i resolve this issue by changing the google-api key.
React Native Google Map
Regenerate the google api-key using the link. If you use emulator of real device like Genymotionplease make sure you have installed Google Play support. Learn more. Asked 3 years, 3 months ago. Active 9 months ago. Viewed 13k times. Zoe 20k 12 12 gold badges 77 77 silver badges bronze badges.
Yash Yash 2 2 gold badges 3 3 silver badges 7 7 bronze badges. Active Oldest Votes. Ernest Zamelczyk Ernest Zamelczyk 1, 11 11 silver badges 22 22 bronze badges. It worked. What I have observed so far: If hardware acceleration is disabled - all is back working. If use pure android image, cpu-arm not accelerated x86, it was slowerbut also works.
Stephen Rauch Mihail Mihov Mihail Mihov 51 3 3 bronze badges. Kiwi Rupela Kiwi Rupela 1, 2 2 gold badges 12 12 silver badges 30 30 bronze badges.
And don't forget add width and height to styles of map. David Lee 5 5 silver badges 17 17 bronze badges. For the blank screen using the maps there are usually 2 main reasons: When you are using the wrong Google Api Key.
If you import the web api key it shall work, try it. Android Emulator mainly is too poor working with maps and google services.
I never had my emulator running maps. So try an actual device. Ramy M. Mousa Ramy M. Mousa 2, 3 3 gold badges 23 23 silver badges 33 33 bronze badges. The example that I followed asked me to use browser key for the maps to work on it. Also I don't have a physical device so emulator is the only option for me. Yash Try keeping the Restriction to None. For the emulator issue, as I said, I never got maps running on the emulator.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
Already on GitHub? Sign in to your account. 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:. 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. Can you try taking a look at ? What do you mean by "WEB" api key? Restarting the packager and it's ok. Other developer in our company told me, to use "Browser or web" key, not some other key. It was a little confusing. If Not i can do it. But if you need any more details from me, you can ask anytime. 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. Install plugin manually works for me. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
Sign up. New issue. Jump to bottom.This week Josh, Dillon, and I have been using react-native-maps to render a Google map with geolocation search on mobile. Hours of our lives were lost to debugging.
Our hope is that the same will not be true for you. All hangups worth avoiding if you can afford to build on Android. If you need to build on iOS:. React Native does not automatically adjust the MapView to display the searched location from Google Maps. The differences between these props are not entirely clear in the documentation. Maps have layers — searching at the street, city, and state level, we expect to see different features and different amounts of surrounding space.
Viewport is the designation in Google Maps that determines the northeast and southwest borders that should frame your search coordinates. But unfortunately, the react-native-maps component does not use northeast and southwest coordinates as borders — instead, it centers itself around a single set of coordinates, with zoom level being determined by a longitudeDelta and latitudeDelta.
Then we set a new state for viewport at the same time that we set a new state for the searched location coordinates. Note that Google Maps returns latitude, longitude, and viewport data as strings. To get additional components rendering alongside a functional map, MapView needs to be a direct sibling to all other components on page.
Wrapping the non-map components in their own View can block access to the map, making it difficult to scroll and zoom. You can also download the prebuilt version on Google Play Store. Thanks to Josh Leichtung and Dillon Arevalo for their feedback and edits. Sign in. Ginny Fahs Follow. The iOS react-native-maps installation contains typos! Try not to rely on the Xcode Simulator for testing. One alternative is regularly deploying to a real device to check your work.
Cannot accommodate updates. Ex- UberEngineering. Bursts of code to power through your day. Web Development articles, tutorials, and news. See responses 5. More From Medium.