Map is not showing inside the Content

Question

I am using Expo with Native-Base. Tried different ways to make Map shown, But none of them worked as they should be. Inside the Content, it's not showing at all. When I put out of content it looks terrible since content is scrolling while it stays fixed. When I put ScrolVew instead of Content it again doesn't show and when Map is outside of ScrolView it shows but its super terrible. Please help me to solve this problem. I need to make it as a part of the whole content on the bottom. Here is the code:

import React, {Component} from "react";
import {View, Image, StyleSheet, Dimensions,InteractionManager, ScrollView} from "react-native";
import {
  Container,
  Header,
  Content,
  Footer,
  FooterTab,
  Button,
  Icon,
  Text,
  Left,
  Right,
  Body,
  Title,
  Thumbnail,
  Grid,
  Row,
  Col,

} from "native-base";

import  typographystyles  from '../styles/typographystyles'; 
import { primary, secondary } from '../styles/variables';
import { MapView } from 'expo';
class PostScreen extends Component {


  render() {

    return (
      <Container>
     <Content>



        <View>  
              <Grid>
              <Row>
       <Col style={styles.col} >

        <Text style={typographystyles.heading1}> Jennifer </Text>
        <Text style={{marginTop:-20, fontSize:16, marginLeft:15}}> Vew and Edit Profile </Text>
       </Col>
<Col style={styles.col}>       
        <Thumbnail style={{marginTop:20}} source={require("../img/profile2.jpg")}/ >
     </Col> 
     </Row>
     </Grid>       

       </View>
       <View style={{marginLeft:15, marginBottom:20}}>
       <Text style={{marginTop:10,marginBottom:10, fontSize:18}}> 90 EUR per night </Text>
       <View style={{flexDirection:'row'}}>
        <Icon name="star" style={{color: primary}} />
         <Icon name="star" style={{color: primary}} />
          <Icon name="star" style={{color: primary}} />
           <Icon name="star" style={{color: primary}} />
            <Icon name="star" style={{color: primary}} />
            <Text style={{marginLeft:10, fontSize:18, color:primary}}> 247 votes </Text>
           </View>


           </View>
           <Text style={{marginLeft:5, marginRight:5}}>
           Lorem ipsum dolor sit amet, eum iisque accommodare cu, ex enim eligendi appareat nec. Magna quando aliquid mel ea, exerci nonumes maiestatis eum ei, harum possim sed ut. Mea omnis bonorum posidonium ne, pri ne illud suavitate assentior. His choro numquam ad, mei te integre vituperatoribus. An vim nobis similique theophrastus, mazim mandamus assentior pro id.

Ad bonorum senserit postulant eum, quo et virtute feugiat. Reque laudem referrentur ex mei. Eu vel dico sonet iudicabit. Eos et falli fabulas, eam quis timeam voluptatum ea. Nullam persequeris ne nec. Reque error vivendum sit id, te sit partem aeterno feugait.
</Text>

   <MapView
        style={{ flex: 1 }}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />         
     </Content>
     </Container>
    );
  }
}

What is wrong and how can I fix it?