Yandex карты в Webview React Native android

Question:

Map rendering issue in webview React Native. The webview is stretched to full screen, but on startup, the maps are 8px high.

<script type="text/javascript">
    ymaps.ready(init);
    function init () {
        new ymaps.Map('map', {
                    center:[52.076015,23.723014],
                    zoom:10
                },
                {
                    suppressMapOpenBlock: true
                });
    }
</script>
<style type="text/css">
    html{
        min-height:100%;
        position:relative;
    }
    body{
        height:100%;
    }
    #map{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        overflow:hidden;
    }
</style>

In Chrom'e, the display is correct, it remains to understand why it behaves differently in the browser in the application.

Answer:

Have you tried setting the width-height of the map via vw and vh?

#map {
  width: 100vw;
  height: 100vh;
}
Scroll to Top
AllEscort