react-native-maps: Error using newLatLngBounds, int,int,int): map size cant be 0

I’m also having this issue. I have got it to work with:

import { Dimensions, StyleSheet } from 'react-native'

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height

export default StyleSheet.create({
  map: {
    flex: 1,
    width,
    height
  }
})

But I need it to bee 100% of parent height, not the window height.

I have solved this by using : var width = Dimensions.get(‘window’).width; //full width var height = Dimensions.get(‘window’).height; //full height

and flex: 1

In my case specifying the height of map + flex:1 solved the problem.

Still having the same problem on Android. Specifying hardcoded width / height / flex didn’t work. The react view is loaded inside fragment. Not sure if that matters.

Alright I resolved my issue on android, that was more related to fitToCoordinates.

This is due to some kind asynchronism between react and native layout.

My solution: wait for layout with onLayout (if you just iOS you don’t care) before calling fitToCoordinates:

<MapView
          style={styles.map}
          ref={this.setMapReference}
          onLayout={this.onMapReady}
          initialRegion={{
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
          }}
        >
          {markers.map((marker, i) => (
            <MapView.Marker key={i} coordinate={marker} />
          ))}
        </MapView>


 // #region map is ready event
  onMapReady = () => {
    if (this.map) {
      this.fitPadding(0); // custom method (for my own use-case) that will use fitToCoordinates
    }
  };
  // #endregion

AND ensure (as said above) to tell android precise style for map

map: {
      ...Platform.select({
        ios: { ...StyleSheet.absoluteFillObject },
        android: {
          flex: 1,
          // ...StyleSheet.absoluteFillObject,
          height: deviceHeight,
          width: deviceWidth,
        },
      }),
    },

To finish, please never forget to congratulate or encourage maintainers (doing this on they free time for free) of librairies you use sometimes for commercial applications.

Thank you guys really stunning work in react-native-maps! 👍

@gardner updating to react-native 0.46.4 and react 16.0.0-alpha.12 don’t change anything for me. I have fixed this by removing flex:1 from map style and specifying width and height:

const { width, height } = Dimensions.get('window');
const halfHeight = height / 2;
const themeStyles = themes.createStyleSheet({
    map: {
        width,
        height: halfHeight
    },
});

In my case I was having the error due to the call to animateToRegion before the map was ready. Using @MacKentoch solution worked for me by using a flag on the state of my component that is set to true on the onLayout event.

I am seeing this as well running in Android… works fine on iOS

@nonameolsson I made this:

const {height, width} = Dimensions.get('window');

for a concise way and ES6 nice looking.

Thanks for your comment, it helped me.

    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;
        //***
        //***
        mMap.setOnMapLoadedCallback(new GoogleMap.OnMapLoadedCallback() {
            @Override
            public void onMapLoaded() {
                mMap.moveCamera(CameraUpdateFactory.newLatLngBounds(builder.build(), padding));
            }
        });
    }

TO whom ever its not working, the solutions provided. They can also try one more thing, Mine MapView is nested, its a children component and down to 4-5 components… My flex 1 + static heights were not working, so i provided flex 1 to parent and window height and width to map and it solved the problem…here is my sameple code…

renderContent = () => {
    if (this.state.loading) {
      return <Loading />;
    }
    return (
      <View style={{ flex: 1 }}>
          <GooglePlaces
            onSelect={this.onPlacesSelect}
          />         
         <MapView
          provider='google'
          onLayout={this.onMapLayout}
          ref={ref => { this.map = ref; }}
          initialRegion={this.state.region}
          region={this.state.region}
          style={styles.map}
          onRegionChangeComplete={this.onRegionChange}
         > 
         { this.state.isMapReady &&
            this.renderMarker()
          }
         </MapView>
        <Button    
            icon={{ name: 'done' }}
            backgroundColor='#415041'
            buttonStyle={{ alignSelf: 'center', borderRadius: 6, width: 150, position: 'absolute', bottom: 50 }}
            title='Done'
            onPress={this.onDone}
        />
      </View>
    );
  }

and about styling

render() {
    return (
      <View style={{ flex: 1 }}>
        {this.renderContent()}
      </View>

    );
  }
}

const styles = StyleSheet.create({
  map: {
    height: height,
    width: width,
    position: 'relative'
  },
});

my imports:

const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

Hi, I have same issue after upgrade to RN 0.43.3. Is there any update yet?

Previously I used RN 0.42.3 & react-native-maps 0.13.1. My map is included in a View with flex=1. Before upgrading to RN 0.43.3, this code worked fine:

<MapView
        provider={provider}
        ref="map"
         rotateEnabled={false}
         maxZoomLevel={18}
        style={{ flex: 1, width: "100%" }}
         initialRegion={this.state._region}
         onRegionChange={region => this.onRegionChange(region)}
/>

But after upgrading, same error occurs, only changing style={{ flex: 1, width: "100%" }} to style={{ width: some-hard-code-value, height: "100%" }} can remove the error, but that’s not what I want, same reason with @nonameolsson