I occasionally get this error in Firebase counsel when rendering a map with react-native-maps on android. I have a check in place to see if there is a latitude and a longitude before rendering the MapView. However I'm missing something somewhere. Any help is greatly appreciated. Below is the code for my Map component.
import React, { Component } from 'react';
import { View, TouchableOpacity } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import Icon from 'react-native-vector-icons/MaterialIcons';
const renderMarker = ({withMarker, onPress}) =>{
const { overlayStyle } = styles;
if(withMarker){
if(onPress){
return (
<TouchableOpacity
onPress={onPress}
style={overlayStyle}>
<Icon
pointerEvents="none"
style={{
marginBottom:32,
width: 40,
height:40
}}
allowFontScaling={false}
color="#31cce5"
name="place"
size={44}
/>
</TouchableOpacity>
);
}else{
return(
<View
pointerEvents={"none"}
style={overlayStyle}>
<Icon
pointerEvents="none"
style={{
marginBottom:32,
width: 40,
height:40
}}
allowFontScaling={false}
color="#31cce5"
name="place"
size={44}
/>
</View>
);
}
}
}
class Map extends Component{
componentDidMount() {
if(this.props.onRef){
this.props.onRef(this)
console.log(this.props);
}
}
render(){
const { style, lat, long, region, mapType, initialRegion, onRegionChange, onRegionChangeComplete, cacheEnabled, withMarker, onPress } = this.props;
const { containerStyle } = styles;
if(lat != null && long != null && initialRegion.latitude != null && initialRegion.longitude != null){
const customMapStyle = [
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
];
return (
<View style={[containerStyle, style]}>
<MapView
ref="map"
provider={PROVIDER_GOOGLE}
customMapStyle={customMapStyle}
style={{
flex: 1
}}
mapType={mapType}
initialRegion={initialRegion}
region={region}
onRegionChange={onRegionChange}
onRegionChangeComplete={onRegionChangeComplete}
cacheEnabled={cacheEnabled}
/>
{renderMarker({withMarker, onPress})}
</View>
)
}
return <View />
}
}
const styles = {
containerStyle:{
position: "relative",
backgroundColor: "transparent"
},
overlayStyle:{
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: "transparent",
justifyContent: "center",
alignItems: "center"
}
}
export { Map };
LatLngBounds.Builderbased on the location ofMarkers. I solved my issue by adding the width and height of my view to theCameraUpdateFactory.newLatLngBounds(bounds, w, h, padding);method, thus giving it the needed initial size. – Towland