{"id":15018465,"url":"https://github.com/nativescript/nativescript-picker","last_synced_at":"2025-10-19T16:31:07.289Z","repository":{"id":54230146,"uuid":"166965939","full_name":"NativeScript/nativescript-picker","owner":"NativeScript","description":"Plugin that provides a custom TextField which lets you pick a value from a list opened in a modal popup.","archived":false,"fork":false,"pushed_at":"2021-04-13T05:12:43.000Z","size":6874,"stargazers_count":22,"open_issues_count":5,"forks_count":8,"subscribers_count":24,"default_branch":"master","last_synced_at":"2024-10-29T15:51:53.601Z","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.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-22T09:29:13.000Z","updated_at":"2021-09-06T17:10:18.000Z","dependencies_parsed_at":"2022-08-13T09:40:47.900Z","dependency_job_id":null,"html_url":"https://github.com/NativeScript/nativescript-picker","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NativeScript","download_url":"https://codeload.github.com/NativeScript/nativescript-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237163230,"owners_count":19265230,"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-09-24T19:51:59.959Z","updated_at":"2025-10-19T16:31:01.445Z","avatar_url":"https://github.com/NativeScript.png","language":"TypeScript","readme":"## NativeScript 7+\n\n* Use `@nativescript/picker`: `~3.0.0`\n* [Source managed here](https://github.com/NativeScript/plugins)\n\n## If using 6 and below, see the following:\n\n# nativescript-picker\n\n\n[![Build Status](https://travis-ci.org/NativeScript/nativescript-picker.svg?branch=master)](https://travis-ci.org/NativeScript/nativescript-picker)\n[![npm](https://img.shields.io/npm/v/nativescript-picker.svg)](https://www.npmjs.com/package/nativescript-picker)\n[![npm](https://img.shields.io/npm/dt/nativescript-picker.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-picker)\n[![Dependency status](https://david-dm.org/NativeScript/nativescript-picker.svg)](https://david-dm.org/NativeScript/nativescript-picker)\n[![peerDependencies Status](https://david-dm.org/NativeScript/nativescript-picker/peer-status.svg)](https://david-dm.org/NativeScript/nativescript-picker?type=peer)\n\nA NativeScript plugin that provides ui element for picking an object/value from a list opened in a modal popup.\n\n- [Installation](#installation)\n- [Configuration](#configuration)\n- [Usage](#usage)\n- [Features](#features)\n    - [PickerField](#PickerField)\n- [API](#api)\n- [Contribute](#contribute)\n- [Get Help](#get-help)\n\n## Screenshots\n\n\u003cimg alt=\"PickerField on iOS\" src=\"https://raw.githubusercontent.com/NativeScript/nativescript-picker/master/docs/picker-ios.gif\" height=\"590px\"/\u003e\u003cimg alt=\"PickerField on Android\" src=\"https://raw.githubusercontent.com/NativeScript/nativescript-picker/master/docs/picker-android.gif\" height=\"590px\"/\u003e\n\n## Installation\n\n```javascript\ntns plugin add nativescript-picker\n```\n\n## Configuration\nNo additional configuration required!\n\n## Usage\nTo use the `PickerField` in markup you need to:\n - If you are developing a NativeScript Core app, you need to register the plugin namespace in the xml:\n ```xml\n \u003cPage\n    xmlns=\"http://schemas.nativescript.org/tns.xsd\"\n    xmlns:picker=\"nativescript-picker\"\u003e\n    \u003cpicker:PickerField hint=\"Click here\" items=\"{{ pickerItems }}\"/\u003e\n...\n ```\n - If you are developing a NativeScript Angular app, you need to import the plugin module in the module of your component: \n```ts\nimport { NativeScriptPickerModule } from \"nativescript-picker/angular\";\n...\n@NgModule({\n    imports: [\n        NativeScriptPickerModule,\n        ...\n    ],\n    ...\n ```\n Then you will be able to declare the fields in the html of your component:\n```html\n\u003cPickerField hint=\"Click here\" [items]=\"pickerItems\"\u003e\u003c/PickerField\u003e\n```\n - If you are developing a NativeScript Vue app, you need to install the plugin in you app.js file:\n ```js\nimport Vue from \"nativescript-vue\";\nimport { PickerField } from 'nativescript-picker/vue';\n\nVue.use(PickerField);\n ```\nThen you will be able to declare the fields in the template of your component:\n```html\n\u003cPickerField hint=\"Click here\"\u003e\u003c/PickerField\u003e\n```\n\n## Features\n\n### PickerField\n\nThe `PickerField` is a NativeScript `TextField` which means that any functionality the default `TextField` provides is also available in the `PickerField` component. The only difference is that by design it is in \"read-only\" mode, or simply put you cannot change its text by input or select that text. Changing the text of the `PickerField` is done by its main functionality which is opening a modal popup that shows a list of objects from which you can select one by tapping it.\n\n## API\n\n| Property | Description |\n| --- | --- |\n| `pickerTitle` | The title of the modal view. |\n| `items` | The source collection used to populate the list of the modal view. |\n| `itemTemplate` | Тhe UI template for list view items of the list of the modal view. |\n| `modalAnimated` | Optional parameter specifying whether to show the modal view with animation. |\n| `textField` | The 'property' of the object from the 'items' collection that will be used by the 'text' property of the PickerField. |\n| `valueField` | The 'property' of the object from the 'items' collection that will be used by when setting the 'selectedValue' property of the PickerField. |\n| `selectedValue` | The object selected from the list in the modal view. |\n| `selectedIndex` | The index of the object from the 'items' collection that has been selected from the list in the modal view. |\n| `iOSCloseButtonPosition` | The position of the 'close' button of the ActionBar of the modal view. |\n| `iOSCloseButtonIcon` | The icon of the 'close' button of the ActionBar of the modal view. |\n| `androidCloseButtonPosition` | The position of the 'close' button of the ActionBar of the modal view. |\n| `androidCloseButtonIcon` | The icon of the 'close' button of the ActionBar of the modal view. |\n\n\n## Styling\n\n### PickerField\nThe `PickerField` can be targeted in CSS through its element selector and additionally by setting a class. The `PickerField` also opens a modal window containing a Page element that contains an ActionBar and a ListView. This Page element can be targeted with the `PickerPage` selector and through it style all picker modals with selectors like `PickerPage ActionBar` and `PickerPage ListView`. In addition to that, if you set a class on the PickerField, it will be transferred on the `PickerPage` and with it you can style individual modals.\n    \n## Contribute\nWe love PRs! Check out the [contributing guidelines](https://github.com/NativeScript/nativescript-picker/blob/master/CONTRIBUTING.md). If you want to contribute, but you are not sure where to start - look for [issues labeled `help wanted`](https://github.com/NativeScript/nativescript-picker/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22).\n\n## Get Help\nPlease, use [github issues](https://github.com/NativeScript/nativescript-picker/issues) strictly for [reporting bugs](https://github.com/NativeScript/nativescript-picker/blob/master/CONTRIBUTING.md#reporting-bugs) or [requesting features](https://github.com/NativeScript/nativescript-picker/blob/master/CONTRIBUTING.md#requesting-features). For general questions and support, check out [Stack Overflow](https://stackoverflow.com/questions/tagged/nativescript) or ask our experts in [NativeScript community Slack channel](http://developer.telerik.com/wp-login.php?action=slack-invitation).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Fnativescript-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript%2Fnativescript-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Fnativescript-picker/lists"}