How to position element at the bottom of Absolute Layout in NativeScript?

Question

I want to position an element at the bottom of the screen in Absolute Layout in NativeScript.

I have this code:

<AbsoluteLayout>
    <maps:mapView 
        left="0"
        top="0"
        width="100%"
        height="100%"
        latitude="{{ map.latitude }}" 
        longitude="{{ map.longitude }}" 
        zoom="{{ map.zoom }}"
        padding="{{ map.padding }}"  
        mapReady="onMapReady"
        coordinateTapped="onCoordinateTapped"
        markerSelect="onMarkerSelect"
        shapeSelect="onShapeSelect"
        cameraChanged="onMapCameraChanged"/>

    <ScrollView
        left="0"
        top="0"
        width="100%"
        orientation="horizontal">
        <!-- More XML -->
    </ScrollView>

    <StackLayout
        left="0"
        bottom="0"
        width="100%"
        visibility="visible"
        orientation="horizontal"
        style="background-color: red;">

        <Label text="TITLE"></Label>

    </StackLayout>
</AbsoluteLayout>

I figured out that there is no bottom attribute for AbsoluteLayout... Here is the picture of what I want to create:

So how to arange items like in the picture, especially the bottom one?

EDIT: I should note that dimensions of this bottom rectangle may not be always same....

Answer 1

Another option is using FlexboxLayout in your AbsoluteLayout container like this:

<FlexboxLayout flexDirection="column" justifyContent="space-between" height="100%">
    <ScrollView
        width="100%"
        orientation="horizontal">
        <!-- More XML -->
    </ScrollView>

    <StackLayout
        width="100%"
        visibility="visible"
        orientation="horizontal"
        style="background-color: red;">

        <Label text="TITLE"></Label>

    </StackLayout>
</FlexboxLayout>

Answer 2

This is the absolute best solution, got it from one of the devs: https://github.com/NativeScript/NativeScript/issues/5591#issuecomment-482640921

<GridLayout rows="*,auto">
   <ItemTakingFullScreen rowSpan="2"/>
   <ItemShownUnder row="1"/>
   <ItemShownAbove row="1">
</GridLayout>

Basically, you can use grid layout and have a item take up multiple grid spaces, sharing them with some other item.