Chat Bubbles with Nativescript

Dave shows us how to make a simple chat UI with an iMessage type interface

  •         
    <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!