NativeScript Snacks

        
<ListView.itemTemplate>
    <StackLayout id="">

        <StackLayout  visibility="">
            <GridLayout width="100%" columns="*" rows="auto, 20" class="msg them">
                <StackLayout orientation="horizontal">
                    <Image class="authorimg" width="30" height="30" stretch="aspectFill" verticalAlignment="top" src="" />
                    <Label text="" textWrap="true" verticalAlignment="top" class="msg_text"/>                                
                </StackLayout>

                <Label class="msg_timestamp" text="" verticalAlignment="top" row="1" colSpan="2" />
            </GridLayout>
        </StackLayout>

        <StackLayout  visibility="">
            <GridLayout columns="*" rows="auto, 40" class="msg me">
                <StackLayout orientation="horizontal" horizontalAlignment="right">
                    <Label text="" class="msg_text" textWrap="true" verticalAlignment="top" />
                    <Image class="authorimg" stretch="aspectFill" height="30" width="30" verticalAlignment="top" src="" col="1" />
                </StackLayout>
                <Label class="msg_timestamp" text="" verticalAlignment="top" row="1" />
            </GridLayout>
        </StackLayout>

    </StackLayout>
</ListView.itemTemplate>
		
  

  
.msg {
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 20;
}

.me .msg_text {
    background-color: #30A9FF;
    color: white;
    padding: 8px;
    margin-left: 40px;
    border-radius: 15;
    
}

.them .msg_text {
    background-color: #e0e0e0;
    color: #333;
    padding: 7px;
    border-radius: 15;
    margin-right: 40px;
}

.authorimg {
    margin: 0px 5px 5px 5px;
    width: 30;
    height: 30;
    border-radius: 15;
}

.them .msg_timestamp {
    color: gray;
    font-size: 11px;
    margin-left: 40px;
}

.me .msg_timestamp {
    color: gray;
    font-size: 11px;
    margin-right: 40px;
    text-align: right;
}

   
  

It took me forever to figure this one out, but with a little help from my friends (http://stackoverflow.com/questions/39236005/nativescript-make-label-span-width-of-its-content-then-wrap-at-a-max-width), I now have a beautiful chat UI. My struggle was figuring out a way to make a Label span only the width of its textual content, but wrap at the bounds of the UI. Turns out a StackLayout with orientation="horizontal" is the way to achieve this. And horizontalAlign="right" does the job for the blue (me) bubbles. Enjoy!