Numbers Prefer Multiplication

    nativescript-swipe-card
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published

    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 ❤️ 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

    Install

    npm i nativescript-swipe-card

    DownloadsWeekly Downloads

    3

    Version

    1.0.8

    License

    MIT

    Last publish

    Collaborators

    • jenlooper
    • triniwiz
    • rhanb
    • bradmartin
    • rakhayyat