Visit the free getting started tutorials on nativescript.org for JavaScript or Angular.
Kindly note that we filter out plugins that:
package.json
$ tns plugin add nativescript-swipe-card
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 :heart: by the team NativeBaguette 🥖
To know more about the 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
swipeEvent
function
SwipeEvent
items
Array<Layout>
cardHeight
number
cardWidth
cardBorderRadius
cardBorderWidth
isRandomColor
Popularity metric based on:
Quality metric based on:
Maintenance metric based on: