"Error using newLatLngBounds(LatLngBounds, int): Map size can't be zero...." using react-native-maps on Android

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 fixed it! So i tried setting mapStyle's width and height but it wasn't working, changed API key, and it still wasn't showing up, tried adding 'flex:1' to containerStyle but it still didn't work until I passed actual height & width values to the container containing my map!

this happens because the map view was not initialized yet. move the call to within the onMapLoaded overriden event. within your

  @Override
    public void onMapReady(GoogleMap googleMap)

add :

googleMap.setOnMapLoadedCallback(new GoogleMap.OnMapLoadedCallback() {
                    @Override
                    public void onMapLoaded() {
                        //Your code where the exception occurred goes here    
                    }
                }); 

In you Map Styles you Should Provide Screen Width and Height or Flex :1

mapStyle: {
       width : SCREEN_WIDTH | SomeValue ,
       height : SCREEN_HEIGHT | SomeValue 
    }

Change Api Key. That only the reason to show functional map.

I fixed it using onMapReady strategy , whenever you render a polyline or markers make sure you MapView is loaded.

Reason : Once your MapView get ready render your Markers.

const { width, height } = Dimensions.get("window");
    class Map extends Component {
    constructor(props) {
        super(props);
        this.state = {
          isMapReady: false
        };
      }
     onMapLayout = () => {
        this.setState({ isMapReady: true });
      };

    render(){
    return(
        <MapView
                  initialRegion={{
                    latitude:"your lat" ,
                    longitude:"your lng" ,
                    latitudeDelta: 0.0922,
                    longitudeDelta: 0.0421
                  }}
                  onMapReady={this.onMapLayout}
                  provider={PROVIDER_GOOGLE}
                  loadingIndicatorColor="#e21d1d"
                  ref={map => (this.map = map)}
                  style={{
                    width,
                    height,
                  }}
                  loadingEnabled={true}
                >
     {this.state.isMapReady && <MapView.Marker
            key="your key"
            identifier="marker"
            coordinate={{
              latitude: "lat",
              longitude: "lng"
            }}
            flat={true}
            anchor={anchor}
            image={image}
          />
         }
          </MapView>
         );
      }
    }