MapView occupies whole react-native-cardview space

[san37puj]

Is this a bug report?

Yes

Have you read the Installation Instructions?

Yes

Environment

Steps to Reproduce

I was using react-native-maps to display google maps in my app. The layout hirarchy was as below:

• CardView from 'react-native-cardview' ==> style={cardviewContainer}
  |- View from 'react-native' ==> style={defaultContainerStyle}
  |- View from 'react-native' ==> header
  |- View from 'react-native' ==> style={mapContainer}
  |- MapView from 'react-native-maps' [provider='google'] ==> style={map}

Styles:
mapContainer: {
marginLeft: -20,
marginRight: -20,
marginTop: 20,
marginBottom: -20,
height: 300,
}
map: {
...StyleSheet.absoluteFillObject,
}
defaultContainerStyle: {
padding: 20,
paddingTop: 25,
paddingBottom: 25,
}
cardviewContainer: {
backgroundColor: '#fff',
marginLeft: -2,
marginRight: -2,
marginBottom: 10,
}

With above components and their cards map was rendering within required area.
But, when I changed same above configuration with below, the OSM map accoupies whole CardView area. Here the problem is the Card header is not displayed/overlapped by map.

• CardView from 'react-native-cardview' ==> style={cardviewContainer}
  |- View from 'react-native' ==> style={defaultContainerStyle}
  |- View from 'react-native' ==> header
  |- View from 'react-native' ==> style={mapContainer}
  |- MapView from 'react-native-maps-osmdroid' [provider=PROVIDER_OSMDROID] ==> style={map}

Expected Behavior

Actual Behavior

"Some header" and Icon is overlapped here.

Reproducible Demo

SampleGoogleMapApp.zip

SampleOSMDroidMapApp.zip

[fqborges]

Yes, I noticed that before on some containers views. I did not have the time to debug that yet, but I guess it is related to how react-native merge multiple empty "Views" in a single native view.

No time to fix this right now, though.

[arieldll]

Hi all,

Any solution for this bug?

Best Regards

[san37puj]

Yes, a workaroud! :)

I just used CardView (instead of View) inside CardView as below:

CardView from 'react-native-cardview' ==> style={cardviewContainer}
|- View from 'react-native' ==> style={defaultContainerStyle}
|- View from 'react-native' ==> header
|- CardView from 'react-native' ==> style={mapContainer}
|- MapView from 'react-native-maps-osmdroid' [provider=PROVIDER_OSMDROID] ==> style={map}

[arieldll]

Hi all,

Working for me too.
Thank you @san37puj

Best Regards,