I have used react-native-maps in my project. But, after I zoom out or navigate inside the map, the map turns blank as shown in the figure as it is not loading. What would be the solution?
Here is the code snippet :
<MapView
ref={mapRef}
provider={PROVIDER_GOOGLE}
showsUserLocation={true}
showsMyLocationButton={true}
zoomEnabled={true}
style={styles.map}
initialRegion={initialOrigin}
onRegionChangeComplete={initialOriginChangeHandler}>
<Marker
coordinate={{
latitude: initialOrigin.latitude,
longitude: initialOrigin.longitude,
}}
/>
</MapView>
Firstly, avoid restricting your google API on https://console.cloud.google.com/ for now.
Secondly, add flex:1; height:400; width:400
to your MapView from react-native-maps
.