Having map fill and fit to screen. Does not work

Question

I am trying to make the map fit and fill the screen

The map just covers some part of the screen, but in this case I would like to have it fill the screen on any android device. I need someone to help.

My source code looks like this.

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

export default class ShowMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
        <View style={styles.container}>
            <MapView
        style={styles.map}
        region={{
            latitude: 6.406070,
            longitude: 3.407350,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
        }}
        >
       <Marker
      coordinate={{ latitude: 6.406070, longitude: 3.407350 }}
      title='Emi School of Engineering'
      description='This is where the magic happens!'
   ></Marker >
        </MapView>
        </View>
    );
  }
}


const styles = StyleSheet.create({
    container: {
      ...StyleSheet.absoluteFillObject,
      height: 660,
      width: 420,
      justifyContent: 'flex-start',
      alignItems: 'stretch',
    },
    map: {
      ...StyleSheet.absoluteFillObject,
    },
   });

Looks like there is something i need to do, I am not doing correctly.

score 1 · Accepted Answer · answered Jan 19 '21 at 14:01

you can get the screen height from Dimension Interface provided by react-native and set replace height value from it.

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

//get screen height
const deviceHeight =Dimensions.get("window").height


export default class ShowMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
        <View style={styles.container}>
            <MapView
        style={styles.map}
        region={{
            latitude: 6.406070,
            longitude: 3.407350,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
        }}
        >
       <Marker
      coordinate={{ latitude: 6.406070, longitude: 3.407350 }}
      title='Emi School of Engineering'
      description='This is where the magic happens!'
   ></Marker >
        </MapView>
        </View>
    );
  }
}


const styles = StyleSheet.create({
    container: {
      ...StyleSheet.absoluteFillObject,
      height: deviceHeight,
      width: 420,
      justifyContent: 'flex-start',
      alignItems: 'stretch',
    },
    map: {
      ...StyleSheet.absoluteFillObject,
    },
   });

Works good , how do I get the Longitude Delta and Latitude Delta programatically? — Evans, Jan 19 '21 at 14:19
kindly check answer in following link, this might be helpful. https://stackoverflow.com/questions/43176862/get-current-location-latitude-and-longitude-in-reactnative-using-react-native-m — S.N.B, Jan 19 '21 at 14:28

Having map fill and fit to screen. Does not work

1 Answers1