react-native-maps not loaded fully

Question

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>

Answer 1

Firstly, avoid restricting your google API on https://console.cloud.google.com/ for now. Secondly, add flex:1; height:400; width:400 flex:1; height:400; width:400 flex:1; height:400; width:400 to your MapView from react-native-maps .