Having map fill and fit to screen. Does not work - react-native

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.

Answer 1

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