nativescript-swipe-card
swipcard plugin for nativescript
npm i --save nativescript-swipe-card

npm npm twitter: @rakhayyat

NPM

Nativescript Swipe Card plugin

This plugin is inspired by https://www.nativescript.org/blog/tinder-style-cards-with-nativescript---love-at-first-swipe

Nativescript-swipe-card

Tender cards, allow you to drag them, and detect swipe events.

Developed with :heart: by the team NativeBaguette 🥖

To know more about the {N} ambassador's program, you can check this video, or read this article.

Installation

tns plugin add nativescript-swipe-card

Usage

Typescript NativeScript

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
xmlns:customControls="nativescript-swipe-card"
loaded="pageLoaded" class="page">

<StackLayout>
<customControls:SwipeCard id="swipe"
height="90%"
width="80%"
items="{{ stackCards }}"
cardHeight="60"
cardWidth="70"
isRandomColor="1"
cardBorderRadius="20"
cardBorderWidth="2"
/>

</StackLayout>
</Page>

main-page

import * as observable from 'tns-core-modules/data/observable';
import * as pages from 'tns-core-modules/ui/page';
import {HelloWorldModel} from './main-view-model';
import {SwipeEvent} from 'nativescript-swipe-card';

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
// Get the event sender
let page = <pages.Page>args.object;
page.bindingContext = new HelloWorldModel();
let swipeCard = page.getViewById("swipe");
swipeCard.on("swipeEvent", (args:SwipeEvent) => {
if (args.direction === 1) {
//right
console.log('Swiped to right');
} else {
//left
console.log('Swiped to left');
}
});
}

main-view-model

import {Observable} from 'tns-core-modules/data/observable';
import {Layout} from "tns-core-modules/ui/layouts/layout";
import {StackLayout} from "tns-core-modules/ui/layouts/stack-layout";
import {GridLayout, ItemSpec} from "tns-core-modules/ui/layouts/grid-layout";
import {Label} from "tns-core-modules/ui/label";
import {Image} from "tns-core-modules/ui/image";
import {Button} from "tns-core-modules/ui/button";

export class HelloWorldModel extends Observable {
public stackCards:Layout[];

constructor() {
super();

let Grid = new GridLayout();
let Label1 = new Label();
let Label2 = new Label();
Label1.text = "The Swipable Card plugin";
Label1.textWrap=true;
Label2.text = "Welcome to {N} we present you";
Label2.textWrap=true;
Grid.addChild(Label1);
Grid.addChild(Label2);
// Star and Auto modes for rows behave like corresponding setting for columns but refer to row height.
var firstRow = new ItemSpec(1, "auto");
var secondRow = new ItemSpec(1, "auto");
Grid.addRow(firstRow);
Grid.addRow(secondRow);
GridLayout.setRow(Label1,0);
GridLayout.setRow(Label2,1);


let stack2 = new StackLayout();
let image = new Image();
image.src="~/images/apple.jpg"
image.height=100;
image.width=100;
stack2.verticalAlignment = "middle";
stack2.addChild(image);


let stack3 = new StackLayout();
let button = new Button();
button.text="Click me!";
button.width=100;
button.textAlignment = "center";
stack3.verticalAlignment = "middle";
stack3.addChild(button);
this.stackCards = [stack3,stack2,Grid];
}

}

Fun fact! Team Time-Travel (Luna Kang, Stefan Medjo and mentor Jen Looper used the plugin to complete their 'Fetching' app - a Tinder app for dogs that uses the Petfinder API to help dogs to find puppy playdates in their area! https://github.com/jlooper/fetching-app-vanilla

Angular NativeScript

XML

        <SwipeCard  height="75%"
width="100%"
[items]="stackCards"
(swipeEvent)="swipeEvent($event)"
cardHeight="50"
cardWidth="80"
isRandomColor="1"
cardBorderRadius="15"
cardBorderWidth="1">

</SwipeCard>

Component

import {Layout} from "tns-core-modules/ui/layouts/layout";
import {StackLayout} from "tns-core-modules/ui/layouts/stack-layout";
import {GridLayout, ItemSpec} from "tns-core-modules/ui/layouts/grid-layout";
import {Label} from "tns-core-modules/ui/label";
import {Image} from "tns-core-modules/ui/image";
import {Button} from "tns-core-modules/ui/button";
import * as elementRegistryModule from 'nativescript-angular/element-registry';
elementRegistryModule.registerElement("SwipeCard", () => require("nativescript-swipe-card").SwipeCard);
import {SwipeEvent} from 'nativescript-swipe-card';
@Component({
moduleId: module.id,
templateUrl: "helloworld.html"
})
export class helloworldComponent {

public stackCards:Array<Layout>=[];

constructor() {
let Grid = new GridLayout();
let Label1 = new Label();
let Label2 = new Label();
Label1.text = "The Swipable Card plugin";
Label1.textWrap=true;
Label2.text = "Welcome to {N} we present you";
Label2.textWrap=true;
Grid.addChild(Label1);
Grid.addChild(Label2);
// Star and Auto modes for rows behave like corresponding setting for columns but refer to row height.
var firstRow = new ItemSpec(1, "auto");
var secondRow = new ItemSpec(1, "auto");
Grid.addRow(firstRow);
Grid.addRow(secondRow);
GridLayout.setRow(Label1,0);
GridLayout.setRow(Label2,1);

let stack2 = new StackLayout();
let image = new Image();
image.src="~/images/apple.jpg"
image.height=100;
image.width=100;
stack2.verticalAlignment = "middle";
stack2.addChild(image);

let stack3 = new StackLayout();
let button = new Button();
button.text="Click me!";
button.width=100;
button.textAlignment = "center";
stack3.verticalAlignment = "middle";
stack3.addChild(button);
this.stackCards = [stack3,stack2,Grid];
}
swipeEvent(args:SwipeEvent) {
if (args.direction === 1) {
//right
console.log('Swiped to right');
} else {
//left
console.log('Swiped to left');
}
};
}

PS: I used this plugin in other application built in Angular, you can check it here: https://github.com/rkhayyat/SyrianForumFrance

API

Properties

Property Type Default Description
swipeEvent function SwipeEvent Callback called when the layout is swiped to the right or left and the swipe animation is done. Return args:SwipeEvent:
1- direction (1 if right/2 if left),
2- cardIndex contain the card index

Methods

Method Return Description
items Array<Layout> Array of card's layout, in which we can define the content of each card.
cardHeight (optional) number Card's height in percentage of their container's height.
cardWidth (optional) number Card's width in percentage of their container's width.
cardBorderRadius (optional) number Card's border radius.
cardBorderWidth (optional) number Card's border's width.
isRandomColor (optional) number 1: Set card's colors randomly & automatically.
2: Set card's colors manually.
Default is 1.

NativeBaguette 🥖

Jean-Baptiste Aniel Rachid Al Kayat triniwiz BradMartin JenLooper
rhanb rkhayyat triniwiz bradmartin jlooper