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);

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

Answer 2

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.

Answer 3

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.

Answer 4

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"/>

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"/>

Answer 6

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,
    },
});

Answer 7

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.

Answer 8

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

Answer 9

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,
  },
});

Answer 10

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.

Answer 11

try this code and mandatory use

{ enableHighAccuracy: false, timeout: 50000},