{"id":15141946,"url":"https://github.com/bgrand-ch/nativescript-getters","last_synced_at":"2025-07-08T23:07:22.370Z","repository":{"id":51696127,"uuid":"216430192","full_name":"bgrand-ch/nativescript-getters","owner":"bgrand-ch","description":"A NativeScript plugin that adds six new getters – in addition to the native \"getViewById\" method – to retrieve one or more views by tag, type, class, style, value pair or property.","archived":false,"fork":false,"pushed_at":"2022-10-21T11:51:10.000Z","size":2379,"stargazers_count":13,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-06T10:12:43.483Z","etag":null,"topics":["get","getters","nativescript","ns","plugin","tns"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bgrand-ch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-20T21:31:45.000Z","updated_at":"2024-05-30T16:11:08.000Z","dependencies_parsed_at":"2022-08-28T23:03:28.006Z","dependency_job_id":null,"html_url":"https://github.com/bgrand-ch/nativescript-getters","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/bgrand-ch/nativescript-getters","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bgrand-ch%2Fnativescript-getters","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bgrand-ch%2Fnativescript-getters/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bgrand-ch%2Fnativescript-getters/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bgrand-ch%2Fnativescript-getters/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bgrand-ch","download_url":"https://codeload.github.com/bgrand-ch/nativescript-getters/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bgrand-ch%2Fnativescript-getters/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264363793,"owners_count":23596507,"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":["get","getters","nativescript","ns","plugin","tns"],"created_at":"2024-09-26T09:20:55.839Z","updated_at":"2025-07-08T23:07:22.352Z","avatar_url":"https://github.com/bgrand-ch.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NativeScript Getters Plugin\n\n![NPM version](https://img.shields.io/npm/v/nativescript-getters)\n![NPM bundle size](https://img.shields.io/bundlephobia/min/nativescript-getters)\n![NPM total downloads](https://img.shields.io/npm/dt/nativescript-getters)\n![GitHub last commit](https://img.shields.io/github/last-commit/bgrand-ch/nativescript-getters)\n\nA NativeScript plugin that adds six new getters – in addition to the native `getViewById` method – to retrieve one or more views by tag, type, class, property, value pair or style.\n\n## Getting Started\n\n### Prerequisites\n\n#### Basics\n\n- NativeScript installed and configured. (see [CLI setup](https://docs.nativescript.org/environment-setup.html))\n- An IDE with intelligent code completion. (see [VS Code](https://docs.nativescript.org/development-workflow.html#visual-studio-code))\n- A functional project to use the plugin. (see [app templates](https://docs.nativescript.org/development-workflow.html#create))\n\n#### Minimum versions\n\n- [@nativescript/core](https://docs.nativescript.org/development-workflow.html#updating), 7.0.0 or higher\n- [@nativescript/android](https://docs.nativescript.org/development-workflow.html#upgrading-platforms), 7.0.0 or higher\n- [@nativescript/ios](https://docs.nativescript.org/development-workflow.html#upgrading-platforms), 7.0.0 or higher\n- ECMAScript, 2015 (ES6) or higher\n\n### Installation\n\nIn Command prompt or Terminal navigate to your application root folder and run one of the following commands to install the plugin. (see [docs](https://docs.nativescript.org/development-workflow.html#plugins))\n\n```shell\nns plugin add nativescript-getters\n```\n\nor\n\n```shell\nnpm install --save nativescript-getters\n```\n\n\u003e The `--save` flag will add the plugin as dependency in your `package.json` file.\n\n## Usage\n\nImport the plugin at the top of your JavaScript or TypeScript file. It can be imported only once into the application entry point file. (see [docs](https://v7.docs.nativescript.org/core-concepts/application-architecture#entry-point))\n\n```typescript\nimport 'nativescript-getters'\n```\n\n\u003e New methods have been added into the Frame, Page, layouts, tabs and texts classes. (see [methods](#methods))\n\n### Examples\n\n#### Get views by tags\n\n```typescript\nexport function navigatingTo(args: EventData) {\n  const page = \u003cPage\u003eargs.object\n  const actionBar = page.getViewsByTags('ActionBar')[0] // case sensitive\n  const foundViews = page.getViewsByTags('Label', 'Button')\n\n  console.log('action bar:', actionBar)\n  console.log('found views:', foundViews)\n}\n```\n\nThe list of possible tags can be found on the [modules page](https://v7.docs.nativescript.org/api-reference/modules.html) of the NativeScript API documentation. (see \"Classes\")\n\n#### Get views by types\n\n```typescript\nexport function navigatingTo(args: EventData) {\n  const page = \u003cPage\u003eargs.object\n  const layouts = page.getViewsByTypes('layout')\n  const foundViews = page.getViewsByTypes('field', 'list')\n\n  console.log('layouts:', layouts)\n  console.log('found views:', foundViews)\n}\n```\n\nThe list of available types: `bar`, `picker`, `view`, `layout`, `list`, `text`, `tab`, `field` and `form`. (see [types.ts](https://github.com/bgrand-ch/nativescript-getters/blob/main/src/functions/types.ts))\n\n#### Get views by classes\n\n```typescript\nexport function navigatingTo(args: EventData) {\n  const page = \u003cPage\u003eargs.object\n  const mainTitle = page.getViewsByClasses('h1')[0]\n  const foundViews = page.getViewsByClasses('text-primary', 'font-italic')\n\n  console.log('main title:', mainTitle)\n  console.log('found views:', foundViews)\n}\n```\n\n#### Get views by identifiers\n\n```typescript\nexport function navigatingTo(args: EventData) {\n  const page = \u003cPage\u003eargs.object\n  const debugIds = page.getViewsByIdentifiers('debug') // alias: getViewsByIds('debug')\n  const foundViews = page.getViewsByIdentifiers('my-id', 'another-id')\n\n  console.log('debug ids:', debugIds)\n  console.log('found views:', foundViews)\n}\n```\n\n#### Get views by properties\n\n```typescript\nexport function navigatingTo(args: EventData) {\n  const page = \u003cPage\u003eargs.object\n  const texts = page.getViewsByProperties('text') // alias: getViewsByProps('text')\n  const foundViews = page.getViewsByProperties('columns', 'width')\n\n  console.log('texts:', texts)\n  console.log('found views:', foundViews)\n}\n```\n\nThe list of possible property names can be found on the [view page](https://v7.docs.nativescript.org/api-reference/classes/view.html) of the NativeScript API documentation.\n\n#### Get views by val pairs\n\n```typescript\nexport function navigatingTo(args: EventData) {\n  const page = \u003cPage\u003eargs.object\n  const welcomeTexts = page.getViewsByValPairs(\n    { name: 'text', value: 'Welcome' }\n  )\n  const foundViews = page.getViewsByValPairs(\n    { name: 'columns', value: 'auto' },\n    { name: 'width', value: '210' }\n  )\n\n  console.log('welcome texts:', welcomeTexts)\n  console.log('found views:', foundViews)\n}\n```\n\nThe list of possible property names and their values can be found on the [view page](https://v7.docs.nativescript.org/api-reference/classes/view.html) of the NativeScript API documentation.\n\n#### Get views by styles\n\n```typescript\nexport function navigatingTo(args: EventData) {\n  const page = \u003cPage\u003eargs.object\n  const redViews = page.getViewsByStyles(\n    { name: 'background', value: 'FF0000' }\n  )\n  const foundViews = page.getViewsByStyles(\n    { name: 'visibility', value: 'collapsed' },\n    { name: 'opacity', value: '0.5' }\n  )\n\n  console.log('red views:', redViews)\n  console.log('found views:', foundViews)\n}\n```\n\n\u003e Note: The color name (example: red or white) is converted by NativeScript to hexadecimal.\n\nThe list of possible styles can be found on the [style page](https://v7.docs.nativescript.org/api-reference/classes/style.html) of the NativeScript API documentation.\n\n### Example in stand-alone mode\n\n```typescript\nimport { getViewsByTags } from 'nativescript-getters'\n\nexport function standaloneMode(view: View) {\n  const foundViews = getViewsByTags.call(view, 'Label', 'Button')\n\n  console.log('found views:', foundViews)\n}\n```\n\nMore info about `call()`:\n\n- [Difference between call, apply and bind](https://dev.to/hebashakeel/difference-between-call-apply-and-bind-4p98), by [@hebashakeel](https://twitter.com/hebashakeel)\n- [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call), by [@MozDevNet](https://twitter.com/MozDevNet)\n\n## API\n\n### Methods\n\nAll methods **return an array of [views](https://v7.docs.nativescript.org/api-reference/classes/view.html)**, except for the native method [`getViewById`](https://v7.docs.nativescript.org/api-reference/classes/view.html#getviewbyid).\n\nName | Parameter(s) | Returns\n:--- | :----------- | :-----\n`getViewsByTags` | `...tagNames: string[]` | `View[]`\n`getViewsByTypes` | `...typeNames: string[]` | `View[]`\n`getViewsByClasses` | `...classNames: string[]` | `View[]`\n`getViewsByIdentifiers` \u003cbr\u003e _Alias: getViewsByIds_ | `...idNames: string[]` | `View[]`\n`getViewsByProperties` \u003cbr\u003e _Alias: getViewsByProps_ | `...propNames: string[]` | `View[]`\n`getViewsByValPairs` | `...valPairs: ValPair[]` \u003cbr\u003e _ValPair: { name: string, value: string }_ | `View[]`\n`getViewsByStyles` | `...styles: ValPair[]` \u003cbr\u003e _ValPair: { name: string, value: string }_ | `View[]`\n\n### Native method\n\nThe native method **returns only a [view](https://v7.docs.nativescript.org/api-reference/classes/view.html)**. Its name is written in the singular (`getView`...).\n\nName | Parameter | Returns\n:--- | :-------- | :-----\n`getViewById` | `idName: string` | `View`\n\n## Known issues\n\n### VSCode IntelliSense\n\nIf the following **TypeScript declaration error occurs**, you need to open the application entry point file (**and keep it open**) or click on the tab of the file already open.\n\n```\nProperty 'getViewsBy...' does not exist on type 'View'. ts(2339)\n```\n\nVSCode IntelliSense now remembers the entry point of the application and recognizes the declaration of new methods.\n\n### Vue.js\n\nThe plugin may not work properly with these symlinked. It is because webpack resolves symlinks to their real locations by default.\n\nA workaround for this issue is to manually disable symlinks resolution in webpack:\n\n```javascript\nconst config = {\n  resolve: {\n    // resolve symlinks to symlinked modules\n    symlinks: false\n  }\n}\n```\n\n## Question? Idea?\n\nIf you have a question about how `nativescript-getters` works or an idea to improve it, the [Discussions](https://github.com/bgrand-ch/nativescript-getters/discussions) tab in GitHub is the place to be.\n\nHowever, if you get an error, you should open an [issue](https://github.com/bgrand-ch/nativescript-getters/issues).\n\n## Contributing\n\nSee [CONTRIBUTING](https://github.com/bgrand-ch/nativescript-getters/blob/main/CONTRIBUTING.md) for more information.\n\n## License\n\nDistributed under the MIT License. See [LICENSE](https://github.com/bgrand-ch/nativescript-getters/blob/main/LICENSE.md) for more information.\n\n## Contact\n\nBenjamin Grand [@bgrand_ch](https://twitter.com/bgrand_ch)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbgrand-ch%2Fnativescript-getters","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbgrand-ch%2Fnativescript-getters","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbgrand-ch%2Fnativescript-getters/lists"}