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