React Native react-native-maps Mapview does not show up

Question

I'm trying to use airbnb's react-native-maps but the map is not showing up on the simulator. My code seems to be the same as other that have resolved the issue but the simulator is just a blank white screen with a red border. Out of the box Mapview works but I would like to use airbnb's version.

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

export default class Haulr extends Component {
  render() {
    return (
    <MapView
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

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

Malvaceous

Did you manage to fix this? I currently have the same issue :( – Managerial

Found this helpful medium.com/@suchydan/… – Halley

Answer 1

You forgot to add styles to the MapView:

<MapView

  style={styles.map}

  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
/>

Don't forget to define your styles:

    const styles = StyleSheet.create({
      map: {
        ...StyleSheet.absoluteFillObject,
      },
});

Because for the mapView to work, you need to set the style of the MapView to an absolute position with top, left, right and bottom values set. As stated in the repo

Jaffna

This doesn't work for me I get a white screen with a red border for some reason – Managerial

can you share some of your code? + what platform are you using. P.S: It might be better to ask the question once again – Jaffna

Answer 2

1. Go to the Google Cloud Platform Console. https://cloud.google.com/console/google/maps-apis/overview

2. Select your project with dropdown in top navigation bar.

3. Click on Menu and go to "APIs & Services" > "Library"

4. Activate "Maps SDK for Android" and "Maps SDK for iOS".

5. Then create new API key and add it to your project in AndroidManifest.xml inside <application> tag:

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

Helices

Answer 3

Firstly, you need to enable the Maps SDK for Android, and then you need to add a width and height to the MapView style.

 return (
    <View>
      <MapView style={styles.map} />
    </View>
  );

const styles = StyleSheet.create({
 
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

Traver

ax , msmm\ nbc b – Beefsteak

Answer 4

I had mess up with my google API key, I regenrated and in google developer console I have atttached the SHA key and it worked.

Johppa

Answer 5

Make sure that you're using the Android Key (in my case I was using the wrong key). In credentials, inside the Google Cloud Platform, copy the Android key and past in the AndroidManifest.xml.

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

Roemer

Answer 6

you have to give style to MapView

<MapView
  style={{flex:1}}
  region={{latitude: 52.5200066,
  longitude: 13.404954,
  latitudeDelta: 0.005,
  longitudeDelta: 0.005}}
   />

Here value of flex is 1 so map is visible on whole screen.

Widower

Answer 7

this worked for me, set height:

import { Dimensions } from "react-native";

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

const styles = StyleSheet.create({
    map: {
        ...StyleSheet.absoluteFillObject,
        height: Dimensions.get("window").height,
    },
});

Drunk

Answer 8

For me adding MAPS_API_KEY= my_api_key in local.properties in android directory solved the issue for me.

Thermit

Answer 9

I discovered that I had wrapped the MapView inside a View tag, which was incorrect. I removed the View tag and only returned the MapView, which fixed the issue. below is the correct approach:-

const Map = () => {
  return (
      <MapView
      style={tw`flex-1`}
  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
/>
  )
}

Masthead

Answer 10

Make sure the height is not a percentage! height:'100%' // map didn't display height:300 // map displayed

Waggery

Your answer could be improved with additional supporting information. Please edit to add details, so that others can confirm that your answer is correct. – Lastditch

Answer 11

The reason that you see the red-bordered box around the blank map is because very likely in the package.json, you have to specify the version >=0.12.4 and NOT ^0.12.4 (which means compatible with 0.12.4). So look for the dependencies section and change from

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

to

"dependencies": {
    "react": "15.4.2",
    "react-native": "0.41.2",
    "react-native-maps": ">=0.12.4",
    ....
},

Then, run the following command:

$ npm update
$ react-native link
$ cd ios
$ touch Podfile

Copy and paste the sample Podfile to your Podfile. Change the target and save the file. Then run

$ pod install

You might also have to add style attribute to your MapView:

<MapView style={styles.map}
   initialRegion={{
    ... 
   }}
/>

Credit goes to this post Fuck the red borders of react-native-maps by AirBnb

Cinderella

Answer 12

I was having this issue and all I had to do was re-compile the project. Once I did that the red border went away and I got the map to render.

Llanes

Answer 13

Solution: enable the billing on your Google Cloud platform account.

Basically you have to follow this guide: https://docs.expo.io/versions/latest/sdk/map-view/

Then, you have to enable Maps SDK for Android (or iOS) and then enable the billing. Even if Maps SDK for Android is totally free, they want your credit card. After that, it will work fine.

Mccollum

Answer 14

try this code and mandatory use

{ enableHighAccuracy: false, timeout: 50000},

Venetian