NativeScript ChatView
A NativeScript UI module for implementing WhatsApp like chat applications.
License
Platforms
- Android
- iOS
Installation
Run
tns plugin add nativescript-chatview
inside your app project to install the module.
Demo
The demo app can be found here.
Usage
Include
;
Create view
;
The XML way
Styling
Add the following CSS to your code:
To understand how a ChatView
is defined, you can have a look at the following XML definition:
<!-- list of messages --> <!-- template for an IChatMessage item --> <!-- chat message item --> <!-- avatar --> <!-- the message --> <!-- the message area --> <!-- the date / time --> <!-- the message text --> <!-- The invisible separator --> <!-- message input field and SEND button --> <!-- chat message field --> <!-- SEND button -->
The following properties of a ChatView
can be used to access the controls defined in the XML:
Name | CSS class |
---|---|
messageField | nsChatView-messageField |
messageList | nsChatView-messageList |
sendMessageArea | nsChatView-sendMessageArea |
sendMessageButton | nsChatView-sendMessageButton |
Add messages
Chat messages are wrapped into an IChatMessage
object:
Add
Use appendMessages()
method to add one or more chat messages:
object.appendMessages, ;
Insert
Use insertMessages()
method to insert one or more chat messages at a specific position:
object.insertMessages1, , ;
Prepend
Use insertMessages()
method to prepend one or more chat messages:
object.prependMessages, ;
SEND button
Use the notifyOnSendMessageTap()
method to register for a "click" event:
chatView.notifyOnSendMessageTap;
The eventData
object has the following structure:
;