[![npm](https://img.shields.io/npm/v/nativescript-chatview.svg)](https://www.npmjs.com/package/nativescript-chatview) [![npm](https://img.shields.io/npm/dt/nativescript-chatview.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-chatview) # NativeScript ChatView A [NativeScript](https://nativescript.org/) UI module for implementing WhatsApp like chat applications. [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=SSS259WRLTWU2) ## License [MIT license](https://raw.githubusercontent.com/mkloubert/nativescript-chatview/master/LICENSE) ## Platforms * Android * iOS ## Installation Run ```bash tns plugin add nativescript-chatview ``` inside your app project to install the module. ## Demo The demo app can be found [here](https://github.com/mkloubert/nativescript-chatview/tree/master/demo). ![Demo app](https://raw.githubusercontent.com/mkloubert/nativescript-chatview/master/demo.gif) ## Usage ### Include ```javascript import ChatView = require("nativescript-chatview"); ``` ### Create view ```xml ``` ```typescript import ChatView = require("nativescript-chatview"); function getTime() : string { var now = new Date(); var hours = now.getHours(); return numberToString(hours == 12 ? 12 : (hours % 12)) + ":" + numberToString(now.getMinutes()) + " " + (hours < 13 ? "AM" : "PM"); } export function onNavigatingTo(args) { var page = args.object; // create view var chatView = new ChatView.ChatView(); // register event when user taps // on SEND button chatView.notifyOnSendMessageTap((eventData: ChatView.SendMessageTappedEventData) => { // add a chat message eventData.object.appendMessages({ date: getTime(), isRight: true, image: "~/img/avatar.jpg", message: eventData.message, }); }); // focus text field chatView.focusMessageField(); page.content = chatView; } ``` #### The XML way ```xml ``` ### Styling Add the following CSS to your code: ```css .nsChatView-view .nsChatView-sendMessageArea { margin: 4,0,0,0; background-color: #e8e8e8; } .nsChatView-view .nsChatView-sendMessageArea Button { background-color: transparent; margin: 0; } .nsChatView-view .nsChatView-messageList { background-color: transparent; border-color: transparent; border-width: 0; margin: 0; } .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-avatar, .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-avatar { margin: 8; border-radius: 32; width: 64; } .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-separator, .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-separator { border-color: transparent; border-width: 0; width: 32; } .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-message, .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-message { margin: 8; } .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea, .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea { border-radius: 8; } .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea { background-color: #edeef2; } .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea { background-color: #00b863; } .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea .nsChatView-content, .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea .nsChatView-content { margin: 12,16,12,16; } .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea Label, .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea Label { margin: 0; } .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea .nsChatView-content Label { color: black; } .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea .nsChatView-content Label { color: white; } .nsChatView-view .nsChatView-messageList .nsChatView-item-left .nsChatView-messageArea .nsChatView-content .nsChatView-date, .nsChatView-view .nsChatView-messageList .nsChatView-item-right .nsChatView-messageArea .nsChatView-content .nsChatView-date { font-size: 11; margin-bottom: 12; } .nsChatView-view .nsChatView-messageField { font-size: 14; } ``` To understand how a `ChatView` is defined, you can have a look at the following XML definition: ```xml