I get an error: "Error using newLatLngBounds(LatLngBounds, int): Map size can't be zero. Most likely layout has not yet occured for the map view. Either wait until layout has occurred or use newLatLngBounds(LatLngBounds, int, int, int) which allows you to specify the map's dimensions".
But I set up an alert for getCurrentPosition and I'm receiving coordinates from getCurrentPosition().
import React, { Component } from 'react';
import { View, Dimensions } from 'react-native';
import MapView from 'react-native-maps';
const {width, height} = Dimensions.get('window')
const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = width / height
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO
class Map extends Component {
constructor(props) {
super(props)
this.state = {
isMapReady: false,
initialPosition: {
longitude: 0,
latitude: 0,
longitudeDelta: 0,
latitudeDelta: 0
},
markerPosition: {
longitude: 0,
latitude: 0
}
}
}
watchID: ?number = null
componentDidMount() {
navigator.geolocation.getCurrentPosition((position) => {
alert(JSON.stringify(position))
var lat = parseFloat(position.coords.latitude)
var long = parseFloat(position.coords.longitude)
var initialRegion = {
latitude: lat,
longitude: long,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
this.setState({initialPosition: initialRegion})
this.setState({markerPosition: initialRegion})
},
(error) => alert(JSON.stringify(error)))
this.watchID = navigator.geolocation.watchPosition((position) => {
var lat = parseFloat(position.coords.latitude)
var long = parseFloat(position.coords.longitude)
var lastRegion = {
latitude: lat,
longitude: long,
longitudeDelta: LONGITUDE_DELTA,
latitudeDelta: LATITUDE_DELTA
}
this.setState({initialPosition: lastRegion})
this.setState({markerPosition: lastRegion})
})
}
componentWillUnmount() {
navigator.geolocation.clearWatch(this.watchID)
}
onMapLayout = () => {
this.setState({ isMapReady: true });
}
render() {
return (
<View style={styles.containerStyle}>
<MapView style={styles.mapStyle} initialRegion={this.state.initialPosition} onLayout={this.onMapLayout}>
{ this.state.isMapReady &&
<MapView.Marker coordinate={this.state.markerPosition}>
</MapView.Marker>
}
</MapView>
</View>
)
}
}
const styles = {
containerStyle: {
flex:1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'lightblue'
},
mapStyle: {
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'absolute'
}
}
export default Map;I have no idea what's going wrong to be honest... would really appreciate some help! Thank you!!