by Franci Zidar | v0.0.6
Card stack view component for NativeScript (iOS & Android).
npm i --save nativescript-card-stack-view

NativeScript Card Stack View

A Tinder like card stack view component for NativeScript for iOS and Android with support for Angular.

Platform Supported NativeView
iOS Yes MDCSwipeToChoose
Android Yes CardStackView

Demo screen capture

iOS Android
iOS Android


This plugin is a work in progress. All key features should work but please test thoroughly before deploying to production and report any issues.

The angular demo is properly setup. The core should work but the demo is very basic.


Run tns plugin add nativescript-card-stack-view in the ROOT directory of your project. You must clean your project after adding a plugin with native dependencies. This can be done by executing tns platform remove android (or ios) and then tns platform add android (or ios). The newer versions of the NS CLI, provide a clean command that does this in one script if you like that option as well.


For any implementation make sure you use ObservableArray<Observable> for the items. You can push to the array and have the cards appear as they are added but any other array manipulations could result in issues. If you a have a specific case in mind write an issue.


Make sure you include the namespace on the Page element:

<ns:CardStack id="cardStack" height="100%" width="100%" color="white" dragging="onDrag" swiped="onSwiped" items="{{ myDataArray }}">
<ns:CardStackItem backgroundColor="#ff0000" verticalAlignment="middle" margin="15" borderRadius="6">
<Image src="{{image}}" stretch="aspectFill" height="100%" width="100%" borderRadius="6"/>
<Label text="{{title}}" horizontalAlignment="center" backgroundColor="#50000000" height="30" />
<Label text="WOW" horizontalAlignment="center" backgroundColor="#50000000" height="30" marginTop="50" />



Import the module:

bootstrap: [AppComponent],
imports: [
CardStackModule // Import the module!
declarations: [AppComponent],

Create the layout:

<CardStack #cardStack

<ng-template let-i="index" let-item="item">
<!-- Your template here -->


Event Description
swiped Fires when the cards is swiped and returns direction and position
dragging Fires when dragging occurs
canceled Fires when card swiping canceled and returns position of the card in the array
loaded Fires when the CardStack is loaded ant returns the instance


Name Description
selectedIndex Current front card index

DragEvent event.object:

side :string; // `"Left"`,`"Right"`
ratio: number; // 0-1 ratio of center to right or left edge

SwipedEvent event.object:

direction :string; // `"Left"`,`"Right"`
position: number; // index of the swiped card

Attributes - Common

  • items (must be used with itemTemplate or ng-template, see demo)

  • options optional

visibleCount: number; // how many cards should be visible in the stack

Assign a data-array to generate the slides and apply the bindingContext. If items is populated then you must use the template-option.



  • Added LICENSE


  • Initial release



Used the nativescript-carousel plugin as a scaffold.

Learned from:


I will accept pull requests that improve this and assign credit.