react-native-maps blank page in ios

Question

I am having the same issue in this question: react-native - How to display map using react-native-maps

Someone suggested to execute react-native link to solve this but it doesn't work for me.

Are there any other solution for this problem?

The screen:

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

var { width, height} = Dimensions.get('window');

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

class TestMap extends Component {

  constructor() {
    super();
  }

  render() {
    return (
        <View style={ styles.container }>
          <MapView
            style={ styles.map }
            initialRegion={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }}
          />
        </View>
    );
  }

}

export default TestMap;

Answer 1

Try to rewrite your styles like this:

const styles = StyleSheet.create({
  container: { 
    flex: 1,
  },
  map: {
    flex: 1,
  },
});