{"id":15659640,"url":"https://github.com/rhanb/nativescript-swipe-layout","last_synced_at":"2025-05-05T19:42:24.421Z","repository":{"id":53991369,"uuid":"94413750","full_name":"rhanb/nativescript-swipe-layout","owner":"rhanb","description":":fireworks:","archived":false,"fork":false,"pushed_at":"2022-12-21T09:57:37.000Z","size":5236,"stargazers_count":21,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T12:23:16.319Z","etag":null,"topics":["android","animation","ios","nativescript","swipe","ui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rhanb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-15T07:43:56.000Z","updated_at":"2024-05-30T16:02:23.000Z","dependencies_parsed_at":"2023-01-30T03:16:04.098Z","dependency_job_id":null,"html_url":"https://github.com/rhanb/nativescript-swipe-layout","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhanb%2Fnativescript-swipe-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhanb%2Fnativescript-swipe-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhanb%2Fnativescript-swipe-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhanb%2Fnativescript-swipe-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rhanb","download_url":"https://codeload.github.com/rhanb/nativescript-swipe-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252563885,"owners_count":21768539,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","animation","ios","nativescript","swipe","ui"],"created_at":"2024-10-03T13:17:58.152Z","updated_at":"2025-05-05T19:42:24.404Z","avatar_url":"https://github.com/rhanb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nativescript-swipe-layout\n\n[![npm](https://img.shields.io/npm/v/nativescript-swipe-layout.svg)](https://www.npmjs.com/package/nativescript-swipe-layout)\n[![npm](https://img.shields.io/npm/dt/nativescript-swipe-layout.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-swipe-layout)\n\n[![NPM](https://nodei.co/npm/nativescript-swipe-layout.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/nativescript-swipe-layout/)\n\nSimple swipeable layout, which allow you to drag it, detect swipe events, and perform swipe animations. \n\nDeveloped with :heart: by the team NativeBaguette 🥖\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/rhanb/nativescript-swipe-layout/master/screenshots/demo.gif\" width=\"208\" height=\"368\" /\u003e\u003c/p\u003e\n\n\n\n## Installation\n\n```javascript\ntns plugin add nativescript-swipe-layout\n```\n\n## Usage \n\n## NativeScript with Angular\n\nHere is an example of how you can use this plugin to build a tinder like stack of cards. Here, the plugin [nativescript-cardview](https://github.com/bradmartin/nativescript-cardview) is used.\n\n### XML\n#### app.component.html\n   \n```xml\n\u003cActionBar title=\"swipe-layout\" icon=\"\" class=\"action-bar\"\u003e\n\u003c/ActionBar\u003e\n\u003cGridLayout rows=\"*, auto\" columns=\"*\" backgroundColor=\"#77849F\"\u003e\n    \u003cSwipeLayout *ngFor=\"let card of cards\" row=\"0\" colSpan=\"3\" col=\"0\" (loaded)=\"swipeLayoutLoaded($event)\" (swipeDown)=\"swipeDownCallback($event)\" (swipeUp)=\"swipeUpCallback($event)\" [animationState]=\"swipeLayoutAnimated\" [gestureMode]=\"gestureMode\"\u003e\n        \u003cCardView width=\"300\" height=\"300\" backgroundColor=\"white\" margin=\"10\" elevation=\"40\" radius=\"5\"\u003e\n            \u003cGridLayout rows=\"200, auto\" columns=\"*\"\u003e\n                \u003cimage [src]=\"card.img\" stretch=\"aspectFill\" colSpan=\"3\" row=\"0\"\u003e\u003c/image\u003e\n                \u003clabel [text]=\"card.test\" class=\"info\" textWrap=\"true\" row=\"1\" colSpan=\"3\" class=\"p-20\"\u003e\u003c/label\u003e\n            \u003c/GridLayout\u003e\n        \u003c/CardView\u003e\n    \u003c/SwipeLayout\u003e\n    \u003cGridLayout row=\"1\" rows=\"*\" columns=\"auto, auto, auto\"\u003e\n        \u003cButton (tap)=\"like()\" row=\"0\" col=\"0\" class=\"p-20\" class=\"btn btn-primary p-20\" text=\"LIKE\"\u003e\n                \u003c/Button\u003e\n        \u003cButton text=\"SUPER\" (tap)=\"super()\" row=\"0\" col=\"1\" class=\"btn p-20\" backgroundColor=\"#5BD6BB\" color=\"white\"\u003e\u003c/Button\u003e\n        \u003cButton text=\"DECLINE\" (tap)=\"decline()\" row=\"0\" col=\"2\" class=\"btn p-20\" backgroundColor=\"#B33A3A\" color=\"white\"\u003e\u003c/Button\u003e\n    \u003c/GridLayout\u003e\n\u003c/GridLayout\u003e\n```\n### Component\n#### app.component.ts\n\n```typescript\nimport { Component, ElementRef, ViewChild } from \"@angular/core\";\n.\n. // other imports\n.\nregisterElement(\"CardView\", () =\u003e CardView);\nregisterElement('SwipeLayout', () =\u003e SwipeLayout);\n\n@Component({\n    selector: \"ns-app\",\n    templateUrl: \"app.component.html\",\n})\n\nexport class AppComponent {\n    private _swipeLayouts: Array\u003cSwipeLayout\u003e;\n    private currentSwipeLayout: SwipeLayout;\n    public swipeLayoutAnimated: ANIMATION_STATE;\n    public gestureMode: GESTURE_MODE;\n\n    public cards: Array\u003cany\u003e = [{ // dumb cards\n        img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",\n        test: \"Batman is pretty cool right?\"\n    },\n    {\n        img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",\n        test: \"Batman is pretty cool right?\"\n    }, {\n        img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",\n        test: \"Batman is pretty cool right?\"\n    }, {\n        img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",\n        test: \"Batman is pretty cool right?\"\n    }, {\n        img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",\n        test: \"Batman is pretty cool right?\"\n    }, {\n        img: \"https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg\",\n        test: \"Batman is pretty cool right?\"\n    }]\n\n    constructor(private fonticon: TNSFontIconService) {\n        this._swipeLayouts = new Array();\n        this.swipeLayoutAnimated = ANIMATION_STATE.ON_EVENTS; // Will animate only on swipe down and up events\n        this.gestureMode = GESTURE_MODE.DRAG; // Cards will be draggable\n    }\n\n    swipeLayoutLoaded(event) {\n        this._swipeLayouts.push(\u003cSwipeLayout\u003eevent.object); // Since it's an Array everytime a SwipeLayout load we add it\n    }\n\n    ngAfterViewInit(): void {\n        this.currentSwipeLayout = this._swipeLayouts[this._swipeLayouts.length - 1];\n    }\n\n    private next() {\n        this._swipeLayouts.pop();\n        this.currentSwipeLayout = this._swipeLayouts[this._swipeLayouts.length - 1];\n    }\n    \n    swipeLeftCallback(swipeLeftEvent: SwipeLeftEventData) { // never called (not binded to the XML)\n        console.log('swipeLeft');\n        this.next();\n    }\n\n    swipeRightCallback(swipeRightEvent: SwipeRightEventData) { // never called (not binded to the XML)\n        console.log('swipeRight');\n        this.next();\n    }\n    \n    swipeUpCallback(swipeUpEvent: SwipeUpEventData) { // called once the swipe up animation is done\n        console.log('swipeUp');\n        this.next();\n    }\n    \n    swipeDownCallback(swipeDownEvent: SwipeDownEventData) { // called once the swipe down animation is done\n        console.log('swipeDown');\n        this.next();\n    }\n\n    decline() { // red button  on tap callback\n        let that = this;\n        this.currentSwipeLayout.animateSwipeRight().then(() =\u003e {\n            that.next();\n            console.log('swipeLeft done');\n        });\n    }\n\n\n    like() { // blue button on tap callback\n        let that = this;\n        this.currentSwipeLayout.animateSwipeLeft().then(() =\u003e {\n            that.next();\n            console.log('swipeRight done');\n        });\n    }\n\n    super() { // green button on tap callback\n        let that = this;\n        this.currentSwipeLayout.animateSwipeUp().then(() =\u003e {\n            that.next();\n            console.log(\"swipeUp done\");\n        });\n    }\n}\n```\n\n## API\n\nFurther reading [here](https://github.com/rhanb/nativescript-swipe-layout/blob/master/API.MD).\n\n### Properties\n\n| Property | Type | Default | Description |\n| --- | --- | --- | --- |\n| `swipeRight` | `function` | `null` | Callback called when the layout is swiped to the right and the swipe animation is done. |\n| `swipeLeft` | `function` | `null` | Callback called when the layout is swiped to the left and the swipe animation is done.  |\n| `swipeUp` | `function` | `null` | Callback called when the layout is swiped up and the swipe animation is done.  |\n| `swipeDown` | `function` | `null` | Callback called when the layout is swiped down and the swipe animation is done.  |\n| `animationState` | `ANIMATION_STATE` | `ANIMATION_STATE.ALWAYS` | Enable to perform animation when swipe events are fired, not at all or only on swipe events with a callback  |\n| `gestureMode` | `GESTURE_MODE` | `GESTURE_MODE.SWIPE` | Allow to choose between the `drag` behavior or the `swipe` behavior |\n\n### Methods\n\n| Method | Return | Parameters | Description | \n| --- | --- | --- | --- | \n| `animateSwipeRight` | `Promise\u003cvoid\u003e`| None | Method to manually start the swipe right animation. |\n| `animateSwipeLeft` | `Promise\u003cvoid\u003e`| None | Method to manually start the swipe left animation |\n| `animateSwipeUp` | `Promise\u003cvoid\u003e`| None | Method to manually start the swipe up animation |\n| `animateSwipeDown` | `Promise\u003cvoid\u003e`| None | Method to manually start the swipe down animation |\n| `swipe` | `Promise\u003cvoid\u003e`| (swipeEvent: SwipeEventData) | Method to manually start the swipe animation but has a parameter. From the direction given, will perform the right animation |\n\nAll the method abose can be override, you can customise the animations as you want. If you wan't to override the animation which is performed on a swipe event you'll have to override the `swipe` method, since it's the one which is called when the event is fired :fire: \n\n\n## NativeBaguette 🥖\n\n[\u003cimg alt=\"Rachid Al Kayat\" src=\"https://avatars1.githubusercontent.com/u/10686043?v=3\u0026s=400\" width=\"117\"\u003e](https://github.com/rkhayyat) | [\u003cimg alt=\"Jean-Baptiste Aniel\" src=\"https://avatars1.githubusercontent.com/u/9477179?v=3\u0026u=bb0e7ce0e5afcfb810e2741921d6e6012423b60f\u0026s=400\" width=\"117\"\u003e](https://github.com/rhanbIT) | [\u003cimg alt=\"triniwiz\" src=\"https://avatars1.githubusercontent.com/u/6695919?v=3\u0026s=400\" width=\"117\"\u003e](https://github.com/triniwiz) | [\u003cimg alt=\"BradMartin\" src=\"https://avatars1.githubusercontent.com/u/6006148?v=3\u0026s=400\" width=\"117\"\u003e](https://github.com/bradmartin) | [\u003cimg alt=\"JenLooper\" src=\"https://avatars1.githubusercontent.com/u/1450004?v=3\u0026s=400\" width=\"117\"\u003e](https://github.com/jlooper) |\n:---: |:---: |:---: |:---: |:---: |\n[rkhayyat](https://github.com/rkhayyat) |[rhanb](https://github.com/rhanbIT) |[triniwiz](https://github.com/triniwiz) |[bradmartin](https://github.com/bradmartin) |[jlooper](https://github.com/jlooper) |\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhanb%2Fnativescript-swipe-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frhanb%2Fnativescript-swipe-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhanb%2Fnativescript-swipe-layout/lists"}