This plugin is inspired by https://www.nativescript.org/blog/tinder-style-cards-with-nativescript---love-at-first-swipe
Tender cards, allow you to drag them, and detect swipe events.
Developed with ❤️ by the team NativeBaguette 🥖
To know more about the {N} ambassador's program, you can check this video, or read this article.
tns plugin add nativescript-swipe-card
<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>
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');
}
});
}
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
<SwipeCard height="75%"
width="100%"
[items]="stackCards"
(swipeEvent)="swipeEvent($event)"
cardHeight="50"
cardWidth="80"
isRandomColor="1"
cardBorderRadius="15"
cardBorderWidth="1">
</SwipeCard>
elementRegistryModule.registerElement("SwipeCard", () => require("nativescript-swipe-card").SwipeCard);
import {SwipeEvent} from 'nativescript-swipe-card';
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';
@Component({
moduleId: module.id,
templateUrl: "helloworld.html"
})
export class helloworldComponent {
public stackCards:Array<Layout>=[];
constructor(swipeEvent: SwipeEvent) {
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
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 |
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. |
rhanb | rkhayyat | triniwiz | bradmartin | jlooper |