Your awesome NativeScript plugin for render a comments box .
npm i --save nativescript-comments

Nativescript Comments

npm npm

Comments box ready for integration inside you'r native script app



  • tns plugin add nativescript-comments

add comments.ios.css and css for styling

*Be sure to run a new build after adding plugins to avoid any issues


    <Page xmlns="" xmlns:UI="nativescript-comments">
<UI:Comments like="{{ like }}" add="{{ add }}" items="{{ comments }}" />

access events

     public like(args) {
// args.object.toggle( function increase or decrease the like count inside the comment
// has the id of the liked item

public add(args) {
// args.object.busy(true) show the activity indicator
// args.object.busy(false) hide the activity indicator
// args.object.push({}) push new comment to the items
let self = this;

// setTimeout is just to emulate server delay time
setTimeout(function () {
args.object.push({ image: "~/images/icon-50.png", id: self.random(1000), comment: args.comment, replyTo:, username: "Demo User", likes: 0, isLike: false, datetime: });
}, 2000);

public edit(args) {
// the edited comment
//the id of the edited comment

public delete(args) {
//the id of the deleted comment

you can edit or delete by longPress on the comment that have {editing:true} in the comment object


see demo for more details

Property Default Description
items required Array of comment object { image:" image src ", id: "unique identifier of the comment", comment: "comment text ", username: "user name ", likes: " number of how many likes ", isLike: "boolean is the user like this or not ", datetime: "datetime of the comment" }
add function(arg){} event on comment added you can access the object to push the comment buy args.object.push($comment-object) and you can get the id of the comment that replyed to by
like function(arg){} event on like clicked send with and you can toggle the like with args.object.toggle(
scroll true enable or disable scrollview inside the comments holder
canComment true disable or enable submission
imagetag the xml element of the image so you can change it if you need to add cache plugin or something
plugin empty string plugin include statment like xmlns:IC="nativescript-web-image-cache"
title Comments the title of the comments box
replyText reply the reply button text
likeText like the like button text
toText replying to : replying to text
sendText comment the comment send button text
fontClass fa the font library class
editingText editing your comment the editing help text when you hit edit
xbtn x the exit edit or reply text can be font icon
textview false boolean flag to make comment field textview or textfield


Apache License Version 2.0, January 2004