{"id":4359,"url":"https://github.com/pankod/react-native-picker-modal-view","last_synced_at":"2025-04-04T22:02:37.744Z","repository":{"id":40813366,"uuid":"180972113","full_name":"pankod/react-native-picker-modal-view","owner":"pankod","description":"An unified React Native Picker Modal component for iOS and Android.","archived":false,"fork":false,"pushed_at":"2023-01-03T20:18:15.000Z","size":6073,"stargazers_count":204,"open_issues_count":61,"forks_count":56,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-28T09:04:33.145Z","etag":null,"topics":["picker-component","react-native","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pankod.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-12T09:05:38.000Z","updated_at":"2025-03-06T13:56:47.000Z","dependencies_parsed_at":"2023-02-01T09:30:24.972Z","dependency_job_id":null,"html_url":"https://github.com/pankod/react-native-picker-modal-view","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pankod%2Freact-native-picker-modal-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pankod%2Freact-native-picker-modal-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pankod%2Freact-native-picker-modal-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pankod%2Freact-native-picker-modal-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pankod","download_url":"https://codeload.github.com/pankod/react-native-picker-modal-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256103,"owners_count":20909240,"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":["picker-component","react-native","typescript"],"created_at":"2024-01-05T20:17:09.453Z","updated_at":"2025-04-04T22:02:37.713Z","avatar_url":"https://github.com/pankod.png","language":"TypeScript","funding_links":[],"categories":["Components","Uncategorized","React Native [🔝](#readme)"],"sub_categories":["UI","Uncategorized"],"readme":"\n\u003cdiv align=\"center\"\u003e\n \u003cimg src=\"screenshots/ios.gif\" width=\"200\" height=\"400\"\u003e\n \u003cimg src=\"screenshots/android.gif\" width=\"200\" height=\"400\"\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\n\n\u003cbr/\u003e\n\u003cdiv align=\"center\"\u003e\u003ch3\u003eReact Native Picker Modal View\u003ch3\u003e\u003c/div\u003e\n\u003cdiv align=\"center\"\u003eReact Native Module to select item picker modal.\u003c/div\u003e\n\n\u003cbr/\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Maintainability](https://api.codeclimate.com/v1/badges/516712bad4032cba5439/maintainability)](https://codeclimate.com/github/pankod/react-native-picker-modal-view/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/516712bad4032cba5439/test_coverage)](https://codeclimate.com/github/pankod/react-native-picker-modal-view/test_coverage)\n[![npm version](https://img.shields.io/npm/v/react-native-picker-modal-view.svg)](https://www.npmjs.com/package/react-native-picker-modal-view)\n[![npm downloads per month](https://img.shields.io/npm/dm/react-native-picker-modal-view.svg)](https://www.npmjs.com/package/react-native-picker-modal-view)\n[![dependencies Status](https://david-dm.org/pankod/react-native-picker-modal-view/status.svg)](https://david-dm.org/pankod/react-native-picker-modal-view)\n[![dev-dependencies Status](https://david-dm.org/pankod/react-native-picker-modal-view/dev-status.svg)](https://david-dm.org/pankod/react-native-picker-modal-view?type=dev)\n[![Build Status](https://travis-ci.com/pankod/react-native-picker-modal-view.svg?branch=master)](https://travis-ci.com/pankod/react-native-picker-modal-view) [![Meercode CI Score](https://meercode.io/badge/pankod/react-native-picker-modal-view?type=ci-score\u0026branch=master)](https://meercode.io/pankod/react-native-picker-modal-view)\n\n\u003c/div\u003e\n\u003cbr/\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003csub\u003eCreated by \u003ca href=\"https://www.pankod.com\"\u003ePankod\u003c/a\u003e\u003c/sub\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\nAn alternative to [Picker](https://facebook.github.io/react-native/docs/picker) and [PickerIOS](https://facebook.github.io/react-native/docs/pickerios) components with an unified API and consistent look \u0026 feel on both plaforms. It's fully configurable and includes built-in support for text search and alphabetical index. Ideal for longer lists not suitable for \"wheel-pickers\".\n\n\n## Getting started\n```\n$ npm install react-native-picker-modal-view --save\n```\n\nor\n\n```\n$ yarn add react-native-picker-modal-view\n```\n\n\u003c!-- ## Usage --\u003e\n\n\n## Live Demo with Expo\n\n\u003cdiv align=\"center\"\u003e\n\n[![Explore with Expo Snack](screenshots/expo_preview.png)](https://snack.expo.io/@pankod/github.com-pankod-react-native-picker-modal-view:example)\n\n\u003c/div\u003e\n\n## Example\n\n```javascript\nimport * as React from 'react';\nimport { Button, SafeAreaView, Text, View } from 'react-native';\n\nimport PickerModal from 'react-native-picker-modal-view';\n\nimport data from '../../../top20.json';\n\nexport default class Main extends React.Component\u003c{}, { selectedItem: {} }\u003e {\n\n\tconstructor(props: {}) {\n\t\tsuper(props);\n\n\t\tthis.state = {\n\t\t\tselectedItem: {}\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { selectedItem } = this.state;\n\n\t\treturn (\n\t\t\t\u003cSafeAreaView style={{ flex: 1, justifyContent: 'center', marginHorizontal: 20 }}\u003e\n\t\t\t\t\u003cPickerModal\n\t\t\t\t\trenderSelectView={(disabled, selected, showModal) =\u003e\n\t\t\t\t\t\t\u003cButton disabled={disabled} title={'Show me!'} onPress={showModal} /\u003e\n\t\t\t\t\t}\n\t\t\t\t\tonSelected={this.onSelected.bind(this)}\n\t\t\t\t\tonClosed={this.onClosed.bind(this)}\n\t\t\t\t\tonBackButtonPressed={this.onBackButtonPressed.bind(this)}\n\t\t\t\t\titems={data}\n\t\t\t\t\tsortingLanguage={'tr'}\n\t\t\t\t\tshowToTopButton={true}\n\t\t\t\t\tselected={selectedItem}\n\t\t\t\t\tshowAlphabeticalIndex={true}\n\t\t\t\t\tautoGenerateAlphabeticalIndex={true}\n\t\t\t\t\tselectPlaceholderText={'Choose one...'}\n\t\t\t\t\tonEndReached={() =\u003e console.log('list ended...')}\n\t\t\t\t\tsearchPlaceholderText={'Search...'}\n\t\t\t\t\trequireSelection={false}\n\t\t\t\t\tautoSort={false}\n\t\t\t\t/\u003e\n\t\t\t\t\u003cView style={{ padding: 10, alignItems: 'center', backgroundColor: '#ddd' }}\u003e\n\t\t\t\t\t\u003cText\u003eChosen: \u003c/Text\u003e\n\t\t\t\t\t\u003cText\u003e{JSON.stringify(selectedItem)}\u003c/Text\u003e\n\t\t\t\t\u003c/View\u003e\n\t\t\t\u003c/SafeAreaView\u003e\n\t\t);\n\t}\n\n\tprivate onClosed(): void {\n\t\tconsole.log('close key pressed');\n\t}\n\n\tprivate onSelected(selected: any): void {\n\t\tthis.setState({ selectedItem: selected });\n\n\t\treturn selected;\n\t}\n\n\tprivate onBackButtonPressed(): void {\n\t\tconsole.log('back key pressed');\n\t}\n}\n\n```\n\n\u003cbr/\u003e\n\n## Options\n\u003cbr/\u003e\n\n| Properties                        | Type       | Description                                            | Default                                     |\n| --------------------------------- | ---------- | ------------------------------------------------------ | ------------------------------------------- |\n| **modalAnimationType**            | `string`   | The RN Modal show/hide animation type                  | `\"slide\"`                                   |\n| **showAlphabeticalIndex**         | `boolean`  | Hides alphabetical index                               | `\"true\"`                                    |\n| **onClosed**                      | `Function` | Fired when the modal is closed                         |                                             |\n| **onBackButtonPressed**           | `Function` | Fired when the back key is pressed                     |                                             |\n| **onSelected** \u003cbr\u003e **required*   | `Function` | Returns selected item object                           | `\"{Id, Name, Value, [key: string]: any}\"`   |\n| **items** \u003cbr\u003e **required*        | `array`    | Array of list items                                    | `\"[{Id, Name, Value, [key: string]: any}]\"` |\n| **renderSelectView**              | `Element`  | Render Select Component                                | `\u003cSelectBoxComponent (built-in)\u003e`           |\n| **renderListItem**                | `Element`  | Render List item                                       | `\u003cListItemComponent (built-in)/\u003e`           |\n| **alphabeticalIndexChars**        | `array`    | Chracters array for the alphabetical index             | `\u003cTurkish alphabet chracters\u003e`              |\n| **searchInputTextColor**          | `string`   | Search input placeholder text color                    | `\"#252525\"`                                 |\n| **keyExtractor**                  | `Function` | Flatlist defined {key} function                        | `\u003cPredefined return map index\u003e`             |\n| **autoGenerateAlphabeticalIndex** | `boolean`  | Auto-generates alphabetical index from list items data | `\"false\"`                                   |\n| **sortingLanguage**               | `string`   | Country ISO (Alpha 2) Code for localeCompare           | `\"tr\"`                                      |\n| **showToTopButton**               | `boolean`  | Button for scroll to offset 0                          | `\"true\"`                                    |\n| **onEndReached**                  | `Function` | Fired when the list reaches the end                    |                                             |\n| **selectPlaceholderText**         | `string`   | Select box placeholder text                            | `\"Choose one...\"`                           |\n| **searchPlaceholderText**         | `string`   | Search input placeholder text                          | `\"Search...\"`                               |\n| **selected**                      | `object`   | Default selected item                                  |                                             |\n| **autoSort**                      | `boolean`  | Auto-sort data list                                    | `\"false\"`                                   |\n| **disabled**                      | `boolean`  | Disable Select box                                     |                                             |\n| **requireSelection**              | `boolean`  | Require at least one list item is selected             | `\"false\"`                                   |\n| **backButtonDisabled**            | `boolean`  | Hide to back button             \t\t\t\t\t\t  | `\"false\"`                                   |\n| **renderSearch**            | `Function`  | Render custom search input             \t\t\t\t\t\t  | ``                                   |\n\n# Core Props of React Native\n\u003cbr/\u003e\n\n| Properties           | Type     | Description                  | Default |\n| -------------------- | -------- | ---------------------------- | ------- |\n| **ModalProps**       | `object` | React Native Modal Props     |         |\n| **FlatListProps**    | `object` | React Native Flatlist Props  |         |\n| **SearchInputProps** | `object` | React Native TextInput Props |         |\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n\n## Running example project\n\n1. You should have React Expo CLI to be installed in order to run example. Follow this [instructions](https://facebook.github.io/react-native/docs/getting-started) if you need to install Expo CLI.\n\u003cbr/\u003e\n   \n\n2. Install the dependencies:\n\n```sh\nnpm install\n```\n\n3. Once the installation is done, you can run the following command:\n \n **npm**\n ```\n npm start\n ```\n You can also use:\n\n **expo**\n  ```\n expo start\n ```\n\n  **yarn**\n  ```\n expo start\n ```\n \u003cbr/\u003e\n\n#### Notes\n\n- Auto-alphabetical index supported for Turkish and English languages.\n\n#### Releases\n\n- 1.3.2 - Added renderSearch feature \u003ca href=\"https://github.com/pankod/react-native-picker-modal-view/pull/54\"\u003e#54\u003c/a\u003e Thanks to @murilo-campaner\n- 1.3.1 - Fixed \u003ca href=\"https://github.com/pankod/react-native-picker-modal-view/issues/44\"\u003e#44\u003c/a\u003e Thanks to @fnando\n- 1.3.0 - No back button support \u003ca href=\"https://github.com/pankod/react-native-picker-modal-view/issues/42\"\u003e#42\u003c/a\u003e Thanks to @ChildishForces\n- 1.2.8 - Fixed \u003ca href=\"https://github.com/pankod/react-native-picker-modal-view/issues/37\"\u003e#37\u003c/a\u003e\n- 1.2.6 - Deprecated lifecycle methods fix\n- 1.2.5 - Flatlist initialNumToRender property hotfix\n- 1.2.3 - Refactor and code coverage\n- 1.2.2 - Fixed \u003ca href=\"https://github.com/pankod/react-native-picker-modal-view/issues/5\"\u003e#5\u003c/a\u003e\n- 1.2.0 - Added renderSelectView and renderListItem properties.\n- 1.0.0 - Initial release\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpankod%2Freact-native-picker-modal-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpankod%2Freact-native-picker-modal-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpankod%2Freact-native-picker-modal-view/lists"}