react-native + native-base. Make MapView fill <Content> area

native-base, react-native

Solution

Try wrapping your `<MapView>` in a `<View>` instead of `<Content>`:

<View style={{flex: 1}}>
<MapView
  style={styles.map}
  showsUserLocation={true}/>
</View>

Problem

I am using react-native + native-base and am using a simple layout - header content footer. I am using a MapView in the section and I would like for the Map to fill the Content area. If I specify a width and height in the style of the MapView the map shows up fine. If I set the styles of the MapView to flex : 1 the map does not show up Here is my code .. All I want is for the Map to fill the Content .. ``` /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, MapView } from 'react-native'; import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon } from 'native-base'; class Project extends Component { render() { return ( <Container> <Header> <Title>TEST</Title> </Header> <Content> <MapView style={styles.map} showsUserLocation={true} /> </Content> <Footer> <FooterTab> <Button transparent> <Icon name='ios-call' /> </Button> </FooterTab> </Footer> </Container> ); } } 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:{ flex:1 } }); AppRegistry.registerComponent('Project', () => Project); ```

Original source