Nativebase: react native maps are not showing with Native base

[adnanmayo]

Hi how to show the react native map inside the content.? is there is any solution?

[sankhadeeproy007]

Can you get it to render inside <ScrollView> from react-native?

[lopezjurip]

Is there a way to not render a Scrollview?

[lopezjurip]

Made it work:

Not tested in Android.

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Dimensions,
  InteractionManager,
} from 'react-native';
import {
  Container,
  Header,
  Title,
  Content,
  Footer,
  FooterTab,
  Button,
  Icon,
} from 'native-base';
import MapView from 'react-native-maps';


export default class Events extends Component {
  state = {
    loading: true,
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.setState({ loading: false });
    });
  }

  render() {
    const { width, height } = Dimensions.get('window');
    const ratio = width / height;

    const coordinates = {
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0922 * ratio,
    };


    return (
      <Container>
        <Header>
          <Title>Map</Title>
          <Button transparent>
            <Icon name="ios-menu" />
          </Button>
        </Header>

        <Content scrollEnabled={false}>
          <View style={{ width, height }}>
            {this.state.loading ? (
              <Loading />
            ) : (
              <MapView
                style={styles.map}
                initialRegion={coordinates}
              />
            )}
          </View>
        </Content>

        <Footer>
          <FooterTab>
            <Button transparent>
              Maps
              <Icon name="ios-map" />
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}

const Loading = () => (
  <View style={styles.container}>
    <Text>Loading...</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
  },
  map: {
    marginTop: 1.5,
    ...StyleSheet.absoluteFillObject,
  },
});

[lopezjurip]

Much better without Content:

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Dimensions,
  InteractionManager,
} from 'react-native';
import {
  Container,
  Header,
  Title,
  // Content,
  Footer,
  FooterTab,
  Button,
  Icon,
} from 'native-base';
import MapView from 'react-native-maps';


export default class Events extends Component {
  state = {
    loading: true,
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.setState({ loading: false });
    });
  }

  render() {
    const { width, height } = Dimensions.get('window');
    const ratio = width / height;

    const coordinates = {
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0922 * ratio,
    };

    return (
      <Container>
        <Header>
          <Title>Map</Title>
          <Button transparent>
            <Icon name="ios-menu" />
          </Button>
        </Header>

        <View style={styles.container}>
          {this.state.loading ? (
            <Loading />
          ) : (
            <MapView
              style={styles.map}
              initialRegion={coordinates}
            />
          )}
        </View>

        <Footer>
          <FooterTab>
            <Button transparent>
              Maps
              <Icon name="ios-map" />
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}

const Loading = () => (
  <View style={styles.container}>
    <Text>Loading...</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  map: {
    marginTop: 1.5,
    ...StyleSheet.absoluteFillObject,
  },
});

[RomanGalochkin]

A huge thank you! The last solution had helped me.

[jimmysoh]

Thank you so much! The last solution worked for me :)

[evantahler]

👍

[the-yadu]

I am still not able to render the map even after following your steps. I have raised an issue with react-native-maps as well

[ChrisWphoto]

<MapView/> will work inside a ScrollView, just make sure you set a minHeight on it's containing view

  _renderMap() {
    if (!this.state.mapLoaded) {
      return (
        <View style={{ flex: 1, justifyContent: 'center' }}>
          <Spinner />
        </View>
      )
    }
    return (
      <View style={{ flex: 1, minHeight: 150 }}>
        <MapView initialRegion={this.state.region} style={{ flex: 1 }} />
      </View>
    )
  }
render() {
    const { navigation } = this.props
    return (
      <Container>
        <StatusBar barStyle="light-content" />
        <Content>
          <Text> {navigation.state.params.id} </Text>
          {this._renderMap()}
        </Content>
      </Container>
    )
  }
}

[arfa123]

@mrpatiwi this also working in android

[SKempin]

I had to set the view width to the device width, along with the mi-height, to render the mapview inside the modal.