react-native-maps not loaded fully

Viewed 263

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>

enter image description here

1 Answers

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.

Related