I have been trying to follow this https://github.com/airbnb/react-native-maps tutorial I tried everything they said but getting a blank screen on my emulator of android stu
If you use emulator of real device (like Genymotion
), please make sure you have installed Google Play support
.
Check Internet (GPS/Wifi/Data) is enabled on your device.
And don't forget add width and height to styles of 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,
width:200,
height:200
}
});
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?
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 slower), but also works.
If you are under x86_64 OS - macOS 10.13.2 in my case, USE x86_64 version of emulator image, instead of universal x86!!! That was my major mistake to do not get it works! Replacing my emulator's image with x86_64 variants, solve all of them!
I also had the same issue for the same target-version and i resolve this issue by changing the google-api key.Regenerate the google api-key using the link
https://developers.google.com/maps/documentation/android-api/signup#release-cert
and add it in AndroidManifest.xml File as you added
For the blank screen using the maps there are usually 2 main reasons: