Dynamically size Nativescript ContentView within ScrollView based on device height

Question

I have a Nativescript Vue component template defined as:

<ScrollView>
    <StackLayout>
        <ContentView ref="mapContainer" height="500" width="100%">
            <Mapbox
            accessToken="my access key"
            mapStyle="outdoors-v9"
            hideCompass="true"
            zoomLevel="10.2" , 
            latitude="51.949266"
            longitude="-12.183571"
            showUserLocation="true"
            disableZoom="true"
            disableRotation="true"
            disableScroll="true"
            disableTilt="true"
            @mapReady="onMapReady($event)">
            </Mapbox>
        </ContentView>
        <Label text="A test label"/>
    </StackLayout>
</ScrollView>

When the component is mounted, I want to set the height of mapContainer to roughly 75% of the screen height. To do so, I have:

export default {
    name: "MyPage",

    mounted () {
        this.$refs.mapContainer.height = platform.screen.mainScreen.heightDIPs
    }

    ...

}

But this does nothing, and the ContentView remains at 500dp tall.

height is meant to be a setter, but I figure I'm missing a redraw (?) to get this change to take effect, but not sure how?

Manoj Manoj · Accepted Answer · 2018-11-26T15:43:42

In order to access the ContentView via refs, you must use .nativeView property.

this.$refs.mapContainer.nativeView.height = platform.screen.mainScreen.heightDIPs

Also you don't have to calculate the height but simply set the height in percentage (70%) instead of fixed value (500) Or use a GridLayout with 7 partition (7*).

Dynamically size Nativescript ContentView within ScrollView based on device height

1 Answers