{"id":19220110,"url":"https://github.com/nativescript-community/ui-collectionview","last_synced_at":"2025-05-07T15:07:49.306Z","repository":{"id":41307795,"uuid":"131695162","full_name":"nativescript-community/ui-collectionview","owner":"nativescript-community","description":"Allows you to easily add a collection view (grid list view) to your projects. Supports vertical and horizontal modes, templating, and more.","archived":false,"fork":false,"pushed_at":"2025-02-09T14:27:22.000Z","size":21393,"stargazers_count":59,"open_issues_count":14,"forks_count":18,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-07T15:07:03.673Z","etag":null,"topics":[],"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/nativescript-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["farfromrefug"]}},"created_at":"2018-05-01T09:14:49.000Z","updated_at":"2025-03-07T11:55:05.000Z","dependencies_parsed_at":"2023-10-10T17:30:31.579Z","dependency_job_id":"d3544108-062f-4951-bfc5-91983b362e4d","html_url":"https://github.com/nativescript-community/ui-collectionview","commit_stats":{"total_commits":763,"total_committers":18,"mean_commits":"42.388888888888886","dds":"0.42070773263433814","last_synced_commit":"3f5cfbd9eb6ef5c9ab145351f1bf577c05f03d6f"},"previous_names":["akylas/nativescript-collectionview"],"tags_count":206,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-collectionview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-collectionview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-collectionview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-collectionview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/ui-collectionview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252902614,"owners_count":21822261,"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":[],"created_at":"2024-11-09T14:34:03.172Z","updated_at":"2025-05-07T15:07:49.283Z","avatar_url":"https://github.com/nativescript-community.png","language":"TypeScript","funding_links":["https://github.com/sponsors/farfromrefug"],"categories":["Plugins"],"sub_categories":["UI Plugins"],"readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003eThis monorepo contains multiple packages:\u003cbr\u003e\u003cbr\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003ealignedflowlayout\u003c/b\u003e\u003c/summary\u003e\n\n\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\n\u003c!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      DO NOT EDIT THIS READEME DIRECTLY! Edit \"bluesprint.md\" instead.\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --\u003e\n\u003ch1 align=\"center\"\u003e@nativescript-community/ui-collectionview-alignedflowlayout\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@nativescript-community/ui-collectionview-alignedflowlayout?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@nativescript-community/ui-collectionview-alignedflowlayout.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@nativescript-community/ui-collectionview-alignedflowlayout\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@nativescript-community/ui-collectionview-alignedflowlayout.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eA NativeScript CollectionView For Custom aligned Layout Plugin.\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n\r\n[](#table-of-contents)\r\n\r\n\r\n[](#table-of-contents)\r\n\r\n## Table of Contents\n\n* [Installation](#installation)\r\n* [Configuration](#configuration)\r\n* [Demos and Development](#demos-and-development)\r\n\t* [Repo Setup](#repo-setup)\r\n\t* [Build](#build)\r\n\t* [Demos](#demos)\r\n* [Contributing](#contributing)\r\n\t* [Update repo ](#update-repo-)\r\n\t* [Update readme ](#update-readme-)\r\n\t* [Update doc ](#update-doc-)\r\n\t* [Publish](#publish)\r\n\t* [modifying submodules](#modifying-submodules)\r\n* [Questions](#questions)\n\n\r\n[](#installation)\r\n\r\n\r\n[](#installation)\r\n\r\n## Installation\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/ui-collectionview-alignedflowlayout`\n\n\r\n[](#configuration)\r\n\r\n\r\n[](#configuration)\r\n\r\n## Configuration\n\nTo install the plugin run:\n```typescript\nimport install from '@nativescript-community/ui-collectionview-alignedflowlayout';\ninstall();\n```\n\nthen simply use the `layoutStyle=\"align\"` as a collectionview property\nYou can then use `layoutHorizontalAlignment`(left, right, justified) and `verticalHorizontalAlignment` (top, bottom, center)\n\n\r\n[](#demos-and-development)\r\n\r\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\n\r\n[](#questions)\r\n\r\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003ecollectionview\u003c/b\u003e\u003c/summary\u003e\n\n\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\n\u003c!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      DO NOT EDIT THIS READEME DIRECTLY! Edit \"bluesprint.md\" instead.\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --\u003e\n\u003ch1 align=\"center\"\u003e@nativescript-community/ui-collectionview\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@nativescript-community/ui-collectionview?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@nativescript-community/ui-collectionview.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@nativescript-community/ui-collectionview\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@nativescript-community/ui-collectionview.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eAllows you to easily add a collection view (grid list view) to your projects. Supports vertical and horizontal modes, templating, and more.\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n| \u003cimg src=\"https://github.com/nativescript-community/ui-collectionview/raw/master/images/demo-ios.gif\" height=\"500\" /\u003e | \u003cimg src=\"https://github.com/nativescript-community/ui-collectionview/raw/master/images/demo-android.gif\" height=\"500\" /\u003e |\n| --- | ----------- |\n| iOS Demo | Android Demo |\n\n\r\n[](#table-of-contents)\r\n\r\n\r\n[](#table-of-contents)\r\n\r\n## Table of Contents\n\n* [Installation](#installation)\r\n* [API](#api)\r\n\t* [Events](#events)\r\n\t* [Properties](#properties)\r\n\t* [Methods](#methods)\r\n* [Usage](#usage)\r\n\t* [Simple Example](#simple-example)\r\n\t* [Templates Example](#templates-example)\r\n* [Usage in Angular](#usage-in-angular)\r\n\t* [Simple Example](#simple-example-1)\r\n\t* [Templates Example](#templates-example-1)\r\n* [Usage in Vue 3](#usage-in-vue-3)\r\n\t* [Simple Example](#simple-example-2)\r\n* [Usage in Vue 2](#usage-in-vue-2)\r\n\t* [Simple Example](#simple-example-3)\r\n* [Usage in Svelte](#usage-in-svelte)\r\n\t* [Simple Example](#simple-example-4)\r\n* [Usage in React](#usage-in-react)\r\n\t* [Simple Example](#simple-example-5)\r\n* [Demos](#demos)\r\n* [Demos and Development](#demos-and-development)\r\n\t* [Repo Setup](#repo-setup)\r\n\t* [Build](#build)\r\n\t* [Demos](#demos-1)\r\n* [Contributing](#contributing)\r\n\t* [Update repo ](#update-repo-)\r\n\t* [Update readme ](#update-readme-)\r\n\t* [Update doc ](#update-doc-)\r\n\t* [Publish](#publish)\r\n\t* [modifying submodules](#modifying-submodules)\r\n* [Questions](#questions)\n\n\r\n[](#installation)\r\n\r\n\r\n[](#installation)\r\n\r\n## Installation\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/ui-collectionview`\n\n\r\n[](#api)\r\n\r\n\r\n[](#api)\r\n\r\n## API\n\n### Events\n\n| Property            | Description                                                                  |\n| ------------------- | ---------------------------------------------------------------------------- |\n| itemLoading         | Triggered when generating an item in the CollectionView.                     |\n| itemTap             | Triggered when the user taps on an item in the CollectionView.               |\n| loadMoreItems       | Triggered when the generated items reached the end of the items property.    |\n| scroll              | Triggered on collectionview scroll.                                          |\n| scrollEnd           | Triggered on collectionview scroll end.    |\n| itemReorderStarting       | Triggered when a reorder is starting. Changing the `returnValue` of the event data allows you to cancel it    |\n| itemReorderStarted       | Triggered when a reorder started.    |\n| itemReordered       | Triggered when a reorder finished.    |\n| dataPopulated       | Triggered when a refresh has been called.    |\n\n\n\n### Properties\n\n| Property      | Type                                             | Description                                             |\n| ------------- | ------------------------------------------------ | ------------------------------------------------------- |\n| ios           | [UICollectionView](https://tinyurl.com/y4ugbfgc) | Gets the native iOS view that represents the user interface for this component. Valid only when running on iOS.    |\n| android       | [android.support.v7.widget.RecyclerView](https://tinyurl.com/lvqebpq) | Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS.    |\n| items         | `array` or `ItemsSource`  | Gets or sets the items collection of the CollectionView. The items property can be set to an array or an object defining length and getItem(index) method.    |\n| itemTemplate  | `string`  | Gets or sets the item template of the CollectionView.    |\n| rowHeight     | `PercentLength`  | Gets or sets the height for every row in the CollectionView.    |\n| colWidth      | `PercentLength`  | Gets or sets the width for every column in the CollectionView.    |\n| spanSize      | `function` | Triggered when an item is loaded. Returns the number of columns that the element should occupy taking into account `colWidth` when the device is vertical and `rowHeight` when horizontal. Parameters: (item, index: number).    |\n| scrollOffset  | `number` | Gets the current scroll. |\n| orientation  | `vertical` or `horizontal` | Sets the orientation of the CollectionView. Defaults to `vertical`. |\n\n### Methods\n\n| Name                                                   | Return | Description                                                                                                            |\n| ------------------------------------------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------- |\n| refresh()                                              | `void` | Forces the CollectionView to reload all its items.                                                                     |\n| refreshVisibleItem()                                   | `void` | Forces CollectionView to reload visible items. |\n| scrollToIndex(index: number, animated: boolean = true) | `void` | Scrolls the CollectionView to the item with the given index. This can be either animated or not. Defaults to animated. |\n| isItemAtIndexVisible(index: number)                    | `boolean` | Returns a boolean indicating whether the item is visible. |\n\n\r\n[](#usage)\r\n\r\n\r\n[](#usage)\r\n\r\n## Usage\nYou need to add `xmlns:gv=\"@nativescript-community/ui-collectionview\"` to your page tag, and then simply use `\u003cgv:CollectionView/\u003e` in order to add the widget to your page. Use `\u003cgv:Gridview.itemTemplate/\u003e` to specify the template for each cell:\n\n### Simple Example\n\nCreate a simple array of objects in your JS/TS file.\n\n```typescript\nconst items = [\n    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },\n    { index: 1, name: 'EMERALD', color: '#2ecc71' },\n    { index: 2, name: 'PETER RIVER', color: '#3498db' },\n    { index: 3, name: 'AMETHYST', color: '#9b59b6' },\n    { index: 4, name: 'WET ASPHALT', color: '#34495e' },\n    { index: 5, name: 'GREEN SEA', color: '#16a085' },\n    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },\n    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },\n    { index: 8, name: 'WISTERIA', color: '#8e44ad' },\n    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }\n];\n```\n\n```xml\n\u003c!-- test-page.xml --\u003e\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"@nativescript-community/ui-collectionview\" loaded=\"pageLoaded\"\u003e\n    \u003cGridLayout\u003e\n        \u003cgv:CollectionView items=\"items\" colWidth=\"50%\" rowHeight=\"100\"\u003e\n            \u003cgv:CollectionView.itemTemplate\u003e\n                \u003cLabel text=\"value\" verticalAlignment=\"center\"/\u003e\n            \u003c/gv:CollectionView.itemTemplate\u003e\n        \u003c/gv:CollectionView\u003e\n    \u003c/GridLayout\u003e\n\u003c/Page\u003e\n```\n\n### Templates Example\nYou can also have multiple templates the same way you add them in the builtin `ListView` control:\n```xml\n\u003cgv:CollectionView id=\"gv\" row=\"0\" class=\"cssClass\" items=\"items\" \n                colWidth=\"colWidth\" rowHeight=\"rowHeight\" itemTemplateSelector=\"templateSelector\"\n                itemTap=\"gridViewItemTap\" itemLoading=\"gridViewItemLoading\" loadMoreItems=\"gridViewLoadMoreItems\"\u003e\n    \u003cgv:CollectionView.itemTemplates\u003e\n        \u003ctemplate key=\"odd\"\u003e\n            \u003cGridLayout backgroundColor=\"#33ffff\" style=\"margin: 10 10 0 0\"\u003e\n                \u003cLabel text=\"value\" verticalAlignment=\"center\"/\u003e\n            \u003c/GridLayout\u003e\n        \u003c/template\u003e\n\n        \u003ctemplate key=\"even\"\u003e\n            \u003cGridLayout backgroundColor=\"#33ffff\" rows=\"auto, auto\" style=\"margin: 10 10 0 0\"\u003e\n                \u003cLabel row=\"0\" text=\"value\" verticalAlignment=\"center\"/\u003e\n                \u003cLabel row=\"1\" text=\"value\" verticalAlignment=\"center\"/\u003e\n            \u003c/GridLayout\u003e\n        \u003c/template\u003e\n    \u003c/gv:CollectionView.itemTemplates\u003e\n\u003c/gv:CollectionView\u003e\n```\n```ts\nexport function templateSelector(item: any, index: number, items: any) {\n    return index % 2 === 0 ? \"even\" : \"odd\";\n}\n```\n\n\r\n[](#usage-in-angular)\r\n\r\n\r\n[](#usage-in-angular)\r\n\r\n## Usage in Angular\n\nImport the module into your project.\n\n```typescript\nimport { CollectionViewModule } from '@nativescript-community/ui-collectionview/angular';\n\n@NgModule({\n    imports: [\n        CollectionViewModule,\n    ],\n})\n```\n### Simple Example\n\nCreate a simple array of objects in your Typescript file.\n\n```typescript\nitems = [\n    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },\n    { index: 1, name: 'EMERALD', color: '#2ecc71' },\n    { index: 2, name: 'PETER RIVER', color: '#3498db' },\n    { index: 3, name: 'AMETHYST', color: '#9b59b6' },\n    { index: 4, name: 'WET ASPHALT', color: '#34495e' },\n    { index: 5, name: 'GREEN SEA', color: '#16a085' },\n    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },\n    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },\n    { index: 8, name: 'WISTERIA', color: '#8e44ad' },\n    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }\n];\n```\n\nAdd the following to your component HTML.\n```xml\n\u003cCollectionView [items]=\"items\" colWidth=\"50%\" rowHeight=\"100\"\u003e\n    \u003cng-template let-item=\"item\"\u003e\n        \u003cLabel [text]=\"item.name\"\u003e\u003c/Label\u003e\n    \u003c/ng-template\u003e\n\u003c/CollectionView\u003e\n```\n\n### Templates Example\nIf you want to use multiple item templates, you can do that very similarly to how you do it for the builtin `ListView` control. The only difference is that due to current limitations instead of using the `nsTemplateKey` directive you need to use the `cvTemplateKey` directive that comes from the CollectionView. (In a future version, once the framework allows it this will be changed and you will be able to use the same directive for the `CollectionView` as well)\n```html\n\u003cCollectionView row=\"1\" [items]=\"items\" colWidth=\"33%\" rowHeight=\"100\" [itemTemplateSelector]=\"templateSelector\"\u003e\n    \u003cng-template cvTemplateKey=\"Defender\" let-item=\"item\" let-odd=\"odd\"\u003e\n        \u003cStackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"blue\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\"\u003e\n        \u003cLabel verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"\u003e\u003c/Label\u003e\n        \u003c/StackLayout\u003e\n    \u003c/ng-template\u003e\n\n    \u003cng-template cvTemplateKey=\"Goalkeeper\" let-item=\"item\" let-odd=\"odd\"\u003e\n        \u003cStackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"black\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\"\u003e\n        \u003cLabel verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"\u003e\u003c/Label\u003e\n        \u003c/StackLayout\u003e\n    \u003c/ng-template\u003e\n\n    \u003cng-template cvTemplateKey=\"Midfielder\" let-item=\"item\" let-odd=\"odd\"\u003e\n        \u003cStackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"yellow\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\"\u003e\n        \u003cLabel verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"\u003e\u003c/Label\u003e\n        \u003c/StackLayout\u003e\n    \u003c/ng-template\u003e\n\n    \u003cng-template cvTemplateKey=\"Forward\" let-item=\"item\" let-odd=\"odd\"\u003e\n        \u003cStackLayout [nsRouterLink]=\"['/item', item.id]\" borderColor=\"red\" borderWidth=\"2\" borderRadius=\"5\" verticalAlignment=\"stretch\" class=\"list-group-item\" [class.odd]=\"odd\"\u003e\n        \u003cLabel verticalAlignment=\"center\" [text]=\"item.name\" class=\"list-group-item-text\" textWrap=\"true\"\u003e\u003c/Label\u003e\n        \u003c/StackLayout\u003e\n    \u003c/ng-template\u003e\n\u003c/CollectionView\u003e\n```\n\nFor a more complete example, look in the `demo-ng` directory.\n\n\r\n[](#usage-in-vue-3)\r\n\r\n\r\n[](#usage-in-vue-3)\r\n\r\n## Usage in Vue 3\n\nRegister the plugin in your `app.ts`.\n\n```ts\nimport CollectionView from '@nativescript-community/ui-collectionview/vue3';\n\nconst app = createApp(YourComponent);\napp.use(CollectionView);\napp.start();\n```\n\n### Simple Example\nIn your component, add the following to make a simple array of objects.\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport { ObservableArray } from '@nativescript/core';\nimport { ref } from \"nativescript-vue\";\n\nconst itemList = ref(new ObservableArray([\n    { name: 'TURQUOISE', color: '#1abc9c' },\n    { name: 'EMERALD', color: '#2ecc71' },\n    { name: 'PETER RIVER', color: '#3498db' },\n    { name: 'AMETHYST', color: '#9b59b6' },\n    { name: 'WET ASPHALT', color: '#34495e' }\n]));\n\u003c/script\u003e\n```\n\nThen add the following XML to your component.\n\n```xml\n\u003cCollectionView :items=\"itemList\" colWidth=\"50%\" rowHeight=\"100\"\u003e\n     \u003ctemplate #default=\"{ item }\"\u003e\n        \u003cStackLayout :backgroundColor=\"item.color\" \u003e\n            \u003cLabel :text=\"item.name\"/\u003e\n        \u003c/StackLayout\u003e\n    \u003c/template\u003e\n\u003c/CollectionView\u003e\n```\n\nFor a more complete example, look in the `demo-vue3` and [demo-snippets/vue3](https://github.com/nativescript-community/ui-collectionview/tree/master/demo-snippets/vue3) directory.\n\n\r\n[](#usage-in-vue-2)\r\n\r\n\r\n[](#usage-in-vue-2)\r\n\r\n## Usage in Vue 2\n\nRegister the plugin in your `app.ts`.\n\n```typescript\nimport CollectionView from '@nativescript-community/ui-collectionview/vue';\nVue.use(CollectionView);\n```\n\n### Simple Example\nIn your component, add the following to make a simple array of objects.\n\n```typescript\nexport default {\n    // ...\n    data() {\n        const items = [\n            { index: 0, name: 'TURQUOISE', color: '#1abc9c' },\n            { index: 1, name: 'EMERALD', color: '#2ecc71' },\n            { index: 2, name: 'PETER RIVER', color: '#3498db' },\n            { index: 3, name: 'AMETHYST', color: '#9b59b6' },\n            { index: 4, name: 'WET ASPHALT', color: '#34495e' },\n            { index: 5, name: 'GREEN SEA', color: '#16a085' },\n            { index: 6, name: 'NEPHRITIS', color: '#27ae60' },\n            { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },\n            { index: 8, name: 'WISTERIA', color: '#8e44ad' },\n            { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }\n        ];\n        return {\n            itemList: items\n        };\n    },\n    // ...\n};\n```\n\nThen add the following XML to your component.\n\n```xml\n\u003cCollectionView\n    :items=\"itemList\"\n    colWidth=\"50%\"\n    rowHeight=\"100\"\n\u003e\n    \u003cv-template\u003e\n        \u003cLabel :text=\"item.name\"\u003e\u003c/Label\u003e\n    \u003c/v-template\u003e\n\u003c/CollectionView\u003e\n```\n\nFor a more complete example, look in the `demo-vue` directory.\n\n\r\n[](#usage-in-svelte)\r\n\r\n\r\n[](#usage-in-svelte)\r\n\r\n## Usage in Svelte\n\nRegister the plugin in your `app.ts`.\n\n```typescript\nimport CollectionViewElement from '@nativescript-community/ui-collectionview/svelte';\nCollectionViewElement.register();\n```\n\n### Simple Example\n\nIn you component, add the following to import Svelte `Templates` and to create a simple array of objects.\n\n```typescript\nimport { Template } from 'svelte-native/components';\n\nconst items = [\n    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },\n    { index: 1, name: 'EMERALD', color: '#2ecc71' },\n    { index: 2, name: 'PETER RIVER', color: '#3498db' },\n    { index: 3, name: 'AMETHYST', color: '#9b59b6' },\n    { index: 4, name: 'WET ASPHALT', color: '#34495e' },\n    { index: 5, name: 'GREEN SEA', color: '#16a085' },\n    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },\n    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },\n    { index: 8, name: 'WISTERIA', color: '#8e44ad' },\n    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }\n];\n```\n\nThen add the following XML to your component:\n\n```xml\n\u003ccollectionView \n    {items} \n    colWidth=\"50%\"\n    rowHeight=\"100\"\n\u003e\n    \u003cTemplate let:item\u003e\n        \u003clabel text=\"{item.name}\" /\u003e\n    \u003c/Template\u003e\n\u003c/collectionView\u003e\n```\n\nFor a more complete example, look in the `demo-svelte` directory.\n\n\r\n[](#usage-in-react)\r\n\r\n\r\n[](#usage-in-react)\r\n\r\n## Usage in React\n\nRegister the plugin in your `app.ts`.\n\n```typescript\nimport { registerCollectionView } from '@nativescript-community/ui-collectionview/react';\nregisterCollectionView();\n```\n\n### Simple Example\n\nIn your component, add the following code to create a simple list.\n\n```tsx\nimport { CollectionView } from '@nativescript-community/ui-collectionview/react';\n\nconst items = [\n    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },\n    { index: 1, name: 'EMERALD', color: '#2ecc71' },\n    { index: 2, name: 'PETER RIVER', color: '#3498db' },\n    { index: 3, name: 'AMETHYST', color: '#9b59b6' },\n    { index: 4, name: 'WET ASPHALT', color: '#34495e' },\n    { index: 5, name: 'GREEN SEA', color: '#16a085' },\n    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },\n    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },\n    { index: 8, name: 'WISTERIA', color: '#8e44ad' },\n    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }\n];\n\ninterface Item {\n    index: number;\n    name: string;\n    color: string;\n}\n\nconst cellFactory = (item: Item) =\u003e (\n    \u003clabel text={item.name} /\u003e\n);\n\nexport function First() {\n    return (\n        \u003cCollectionView items={items} colWidth=\"50%\" rowHeight=\"100\" cellFactory={cellFactory} width=\"100%\" height=\"100%\" /\u003e\n    );\n}\n```\n\nFor a more complete example, look in the `demo-react` directory.\n\n\r\n[](#demos)\r\n\r\n\r\n[](#demos)\r\n\r\n## Demos\nThis repository includes Angular, Vue.js, and Svelte demos. In order to run these execute the following in your shell:\n```shell\n$ git clone https://github.com/@nativescript-community/ui-collectionview\n$ cd ui-collectionview\n$ npm i\n$ npm run setup\n$ npm run build # \u0026\u0026 npm run build.angular\n$ cd demo-ng # or demo-vue or demo-svelte\n$ ns run ios|android\n```\n\n\r\n[](#demos-and-development)\r\n\r\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\n\r\n[](#questions)\r\n\r\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003eswipemenu\u003c/b\u003e\u003c/summary\u003e\n\n\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\n\u003c!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      DO NOT EDIT THIS READEME DIRECTLY! Edit \"bluesprint.md\" instead.\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --\u003e\n\u003ch1 align=\"center\"\u003e@nativescript-community/ui-collectionview-swipemenu\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@nativescript-community/ui-collectionview-swipemenu?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@nativescript-community/ui-collectionview-swipemenu.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@nativescript-community/ui-collectionview-swipemenu\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@nativescript-community/ui-collectionview-swipemenu.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eA NativeScript CollectionView SwipeMenu Plugin.\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n\r\n[](#table-of-contents)\r\n\r\n\r\n[](#table-of-contents)\r\n\r\n## Table of Contents\n\n* [Installation](#installation)\r\n* [Configuration](#configuration)\r\n* [API](#api)\r\n* [CollectionView extensions](#collectionview-extensions)\r\n\t* [Events](#events)\r\n\t* [Propert](#propert)\r\n\t* [Methods](#methods)\r\n* [Usage](#usage)\r\n\t* [Simple Example](#simple-example)\r\n* [Demos and Development](#demos-and-development)\r\n\t* [Repo Setup](#repo-setup)\r\n\t* [Build](#build)\r\n\t* [Demos](#demos)\r\n* [Contributing](#contributing)\r\n\t* [Update repo ](#update-repo-)\r\n\t* [Update readme ](#update-readme-)\r\n\t* [Update doc ](#update-doc-)\r\n\t* [Publish](#publish)\r\n\t* [modifying submodules](#modifying-submodules)\r\n* [Questions](#questions)\n\n\r\n[](#installation)\r\n\r\n\r\n[](#installation)\r\n\r\n## Installation\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/ui-collectionview-swipemenu`\n\n\r\n[](#configuration)\r\n\r\n\r\n[](#configuration)\r\n\r\n## Configuration\n\nTo install the plugin run:\n```typescript\nimport install from '@nativescript-community/ui-collectionview-swipemenu';\ninstall();\n```\n\r\n[](#api)\r\n\r\n\r\n[](#api)\r\n\r\n## API\n\n\n\r\n[](#collectionview-extensions)\r\n\r\n\r\n[](#collectionview-extensions)\r\n\r\n## CollectionView extensions\n### Events\n\n| Property            | Description                                                                  |\n| ------------------- | ---------------------------------------------------------------------------- |\n| swipeMenuOpen         | Triggered when a menu is opened in the CollectionView.                     |\n| swipeMenuClose             | Triggered when a menu is closed in the CollectionView.               |\n\n\n### Propert\n### Methods\n\n| Name                                                   | Return | Description                                                                                                            |\n| ------------------------------------------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------- |\n| closeCurrentMenu()                                              | `void` | Close any opened menu in the CollectionView.                                                                     |\n\n\r\n[](#usage)\r\n\r\n\r\n[](#usage)\r\n\r\n## Usage\n\nFirst very important note. For this plugin to work correctly, collectionview items must be an object!\nThe plugin will add `startingSide` property to your items as needed to keep knowledge of which menu is opened and notify the template `SwipeMenu`. Might change in the future\n\nYou need to add `xmlns:gvs=\"@nativescript-community/ui-collectionview-swipemenu\"` to your page tag, and then simply use `\u003cgvs:SwipeMenu/\u003e` in order to add the widget to your page. Use `\u003cgv:Gridview.itemTemplate/\u003e` to specify the template for each cell:\n\n### Simple Example\n\nCreate a simple array of objects in your JS/TS file.\n\n```typescript\nconst items = [\n    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },\n    { index: 1, name: 'EMERALD', color: '#2ecc71' },\n    { index: 2, name: 'PETER RIVER', color: '#3498db' },\n    { index: 3, name: 'AMETHYST', color: '#9b59b6' },\n    { index: 4, name: 'WET ASPHALT', color: '#34495e' },\n    { index: 5, name: 'GREEN SEA', color: '#16a085' },\n    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },\n    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },\n    { index: 8, name: 'WISTERIA', color: '#8e44ad' },\n    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }\n];\n```\n\n```xml\n\u003c!-- test-page.xml --\u003e\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\" xmlns:gv=\"@nativescript-community/ui-collectionview\" xmlns:gvs=\"@nativescript-community/ui-collectionview-swipemenu\" \u003e\n    \u003cGridLayout\u003e\n        \u003cgv:CollectionView items=\"items\" rowHeight=\"100\"\u003e\n            \u003cgv:CollectionView.itemTemplate\u003e\n                \u003cgvs:SwipeMenu startingSide=\"startingSide\"\u003e\n                    \u003cLabel text=\"value\" verticalAlignment=\"center\"/\u003e\n                \u003c/gvs:SwipeMenu\u003e\n            \u003c/gv:CollectionView.itemTemplate\u003e\n        \u003c/gv:CollectionView\u003e\n    \u003c/GridLayout\u003e\n\u003c/Page\u003e\n```\n\n\r\n[](#demos-and-development)\r\n\r\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\n\r\n[](#questions)\r\n\r\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003ewaterfall\u003c/b\u003e\u003c/summary\u003e\n\n\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\n\u003c!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      DO NOT EDIT THIS READEME DIRECTLY! Edit \"bluesprint.md\" instead.\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --\u003e\n\u003ch1 align=\"center\"\u003e@nativescript-community/ui-collectionview-waterfall\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@nativescript-community/ui-collectionview-waterfall?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@nativescript-community/ui-collectionview-waterfall.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@nativescript-community/ui-collectionview-waterfall\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@nativescript-community/ui-collectionview-waterfall.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eA NativeScript CollectionView waterfall Plugin.\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n\r\n[](#table-of-contents)\r\n\r\n\r\n[](#table-of-contents)\r\n\r\n## Table of Contents\n\n* [Installation](#installation)\r\n* [Configuration](#configuration)\r\n* [Demos and Development](#demos-and-development)\r\n\t* [Repo Setup](#repo-setup)\r\n\t* [Build](#build)\r\n\t* [Demos](#demos)\r\n* [Contributing](#contributing)\r\n\t* [Update repo ](#update-repo-)\r\n\t* [Update readme ](#update-readme-)\r\n\t* [Update doc ](#update-doc-)\r\n\t* [Publish](#publish)\r\n\t* [modifying submodules](#modifying-submodules)\r\n* [Questions](#questions)\n\n\r\n[](#installation)\r\n\r\n\r\n[](#installation)\r\n\r\n## Installation\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/ui-collectionview-waterfall`\n\n\r\n[](#configuration)\r\n\r\n\r\n[](#configuration)\r\n\r\n## Configuration\n\nTo install the plugin run:\n```typescript\nimport install from '@nativescript-community/ui-collectionview-waterfall';\ninstall();\n```\n\nthen simply use the `layoutStyle=\"waterfall\"` as a collectionview property\n\n\r\n[](#demos-and-development)\r\n\r\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\n\r\n[](#questions)\r\n\r\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).\n\u003c/details\u003e\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-collectionview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Fui-collectionview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-collectionview/lists"}