{"id":24206258,"url":"https://github.com/telenko/react-native-paper-autocomplete","last_synced_at":"2025-10-09T11:08:52.072Z","repository":{"id":45896211,"uuid":"353505047","full_name":"telenko/react-native-paper-autocomplete","owner":"telenko","description":null,"archived":false,"fork":false,"pushed_at":"2021-04-06T13:46:46.000Z","size":562,"stargazers_count":4,"open_issues_count":3,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-22T04:46:51.780Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/telenko.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":"2021-03-31T22:20:42.000Z","updated_at":"2023-07-25T14:32:43.000Z","dependencies_parsed_at":"2022-09-26T17:41:20.899Z","dependency_job_id":null,"html_url":"https://github.com/telenko/react-native-paper-autocomplete","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/telenko/react-native-paper-autocomplete","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/telenko%2Freact-native-paper-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/telenko%2Freact-native-paper-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/telenko%2Freact-native-paper-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/telenko%2Freact-native-paper-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/telenko","download_url":"https://codeload.github.com/telenko/react-native-paper-autocomplete/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/telenko%2Freact-native-paper-autocomplete/sbom","scorecard":{"id":873178,"data":{"date":"2025-08-11","repo":{"name":"github.com/telenko/react-native-paper-autocomplete","commit":"665d7d3b7951d933237ff960e29eee73d39d1790"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/9 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"101 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-f5x2-xv93-4p23","Warn: Project is vulnerable to: GHSA-gmpm-xp43-f7g6","Warn: Project is vulnerable to: GHSA-pf27-929j-9pmm","Warn: Project is vulnerable to: GHSA-327c-qx3v-h673","Warn: Project is vulnerable to: GHSA-x4cf-6jr3-3qvp","Warn: Project is vulnerable to: GHSA-mph8-6787-r8hw","Warn: Project is vulnerable to: GHSA-7mhc-prgv-r3q4","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877","Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q","Warn: Project is vulnerable to: GHSA-crh6-fp67-6883","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q","Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx","Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-xvf7-4v9q-58w6","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9","Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-x565-32qp-m3vf","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9","Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w","Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg","Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96","Warn: Project is vulnerable to: GHSA-3949-f494-cm99","Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-24T04:56:07.570Z","repository_id":45896211,"created_at":"2025-08-24T04:56:07.571Z","updated_at":"2025-08-24T04:56:07.571Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001286,"owners_count":26083058,"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","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-01-14T00:19:50.579Z","updated_at":"2025-10-09T11:08:52.050Z","avatar_url":"https://github.com/telenko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# General description\n\nLibrary is a set of easy to use, customizable components (based on [react-native-paper](https://reactnativepaper.com/)) which can help with building autocomplete/dropdown components.\n\n![default mode](https://media.giphy.com/media/dX1enKz3tW8CjY8BjU/giphy.gif)\n\n# Getting started\n\n1. Install library\n\n```\nnpm install @telenko/react-native-paper-autocomplete --save\n```\n\n2. Import components\n\n```tsx\nimport {\n  Autocomplete,\n  FlatDropdown,\n  ModalDropdown,\n} from \"@telenko/react-native-paper-autocomplete\";\n```\n\n3. Using Autocomplete with multiple mode\n\n```tsx\nconst SomeForm: React.FC = () =\u003e {\n  const [selectedIds, setIds] = useState([]);\n  const options = useMemo(\n    () =\u003e [\n      { label: \"option 1\", value: \"1\" },\n      { label: \"option 2\", value: \"2\" },\n      { label: \"option 3\", value: \"3\" },\n    ],\n    []\n  );\n  return (\n    \u003cAutocomplete\n      multiple\n      value={selectedIds}\n      onChange={setIds}\n      options={options}\n    /\u003e\n  );\n};\n```\n\n4. Using Autocomplete with single mode\n\n```tsx\nconst SomeForm: React.FC = () =\u003e {\n  const [id, setId] = useState(\"\");\n  const options = useMemo(\n    () =\u003e [\n      { label: \"option 1\", value: \"1\" },\n      { label: \"option 2\", value: \"2\" },\n      { label: \"option 3\", value: \"3\" },\n    ],\n    []\n  );\n  return \u003cAutocomplete value={id} onChange={setId} options={options} /\u003e;\n};\n```\n\n5.  For more examples go to [showcase](#Showcase) section or checkout [stories of storybook](https://github.com/telenko/react-native-paper-autocomplete/tree/main/storybook/storybook/stories)\n\n**!Note, to run storybook follow such steps:**\n\n1.  Go to /storybook folder\n2.  Run: `npm run \u003cplatrofm\u003e` (f.e. `npm run android`)\n3.  [Expo](https://expo.io/) application of storybook should run\n\n# API\n\n1. ## Autocomplete\n\n   ```ts\n   import { Autocomplete } from \"@telenko/react-native-paper-autocomplete\";\n   ```\n\n   ### Autocomplete props:\n\n   ### multiple\n\n   - **Type**: boolean\n   - **Required**: false\n   - **Default**: false\n   - **Description**: Sets whether component will work in **multiple** or **single** mode\n\n   ### value\n\n   - **Type**: string _(single mode)_ | string[] _(multiple mode)_\n   - **Required**: true\n   - **Default**: \"\" _(single mode)_ | [] _(multiple mode)_\n   - **Description**: Sets value of autocomplete\n\n   ### onChange\n\n   - **Type**: (v: string) =\u003e void _(single mode)_ | (v: string[]) =\u003e void _(multiple mode)_\n   - **Required**: true\n   - **Default**: -\n   - **Description**: Sets value of autocomplete\n\n   ### renderHelper\n\n   - **Type**: () =\u003e React.ReactElement\n   - **Required**: false\n   - **Default**: -\n   - **Description**: Element will be rendered between host/trigger input and chips (can be useful for validation)\n\n   ### renderDropdown\n\n   - **Type**: (props: [DropdownProps](#Dropdown)) =\u003e React.ReactElement\n   - **Required**: false\n   - **Default**: _uses FlatDropdown for single mode_ | _uses ModalDropdown for multiple mode_\n   - **Description**: Renders dropdown component\n\n   ### renderOption\n\n   - **Type**: ({ value, label, selected, onSelect }, optionItem) =\u003e React.ReactElement\n   - **Required**: false\n   - **Default**: _uses inner widget_\n   - **Description**: Renders single option inside dropdown\n\n   ### filterOptions\n\n   - **Type**: (options: any[], inputV: string) =\u003e any[]\n   - **Required**: false\n   - **Default**: _local implementation, checks that option label includes query input string_\n   - **Description**: Filters options list depending on text input value\n\n   ### labelExtractor\n\n   - **Type**: (item: any) =\u003e string\n   - **Required**: false\n   - **Default**: item =\u003e item.label\n   - **Description**: Gets option view text from option item\n\n   ### [...Inherits all other common dropdown props](#Dropdown)\n\n   ## Multiple mode specific props\n\n   ### renderSelectedItem\n\n   - **Type**: ({ value, label, style, onDelete }, optionItem: any) =\u003e React.ReactElement\n   - **Required**: false\n   - **Default**: _Renders Chip component_\n   - **Description**: Renders single selected item (below dropdown)\n\n2. ## Dropdown\n\n   ```ts\n   import {\n     FlatDropdown, // used as default dropdown for single mode\n     ModalDropdown, // used as default dropdown for multiple mode\n   } from \"@telenko/react-native-paper-autocomplete\";\n   ```\n\n   ### Dropdown props:\n\n   ### inputValue\n\n   - **Type**: string\n   - **Required**: true\n   - **Description**: Value for text input inside dropdown\n\n   ### options\n\n   - **Type**: any[]\n   - **Required**: true\n   - **Description**: options list\n\n   ### renderOption\n\n   - **Type**: ({ item: any, index: number }) =\u003e React.ReactElement\n   - **Required**: false\n   - **Default**: _uses Menu.Item component of react-native-paper_\n   - **Description**: Renders single option\n\n   ### renderHost\n\n   - **Type**: (props: [TextInputProps](https://callstack.github.io/react-native-paper/text-input.html)) =\u003e React.ReactElement\n   - **Required**: false\n   - **Default**: _uses TextInput of react-native-paper_\n   - **Description**: Renders main trigger element\n\n   ### renderNoItems\n\n   - **Type**: () =\u003e React.ReactElement\n   - **Required**: false\n   - **Default**: _uses internal layout_\n   - **Description**: Renders when no items available in dropdown\n\n   ### noItemsLabel\n\n   - **Type**: string\n   - **Required**: false (will be used only if _renderNoItems_ is not specified)\n   - **Default**: \"No items\"\n   - **Description**: Sets string value of noItems default widget\n\n   ### onPress\n\n   - **Type**: () =\u003e void\n   - **Required**: false\n   - **Default**: -\n   - **Description**: Triggered when user presses on dropdown\n\n   ### keyExtractor\n\n   - **Type**: (item: any) =\u003e string\n   - **Required**: false\n   - **Default**: item =\u003e item.value\n   - **Description**: Used to generate uniq key for each option\n\n   ### openOnMount\n\n   - **Type**: boolean\n   - **Required**: false\n   - **Default**: false\n   - **Description**: Will open dropdown options after initial render\n\n   ### [...Inherits all TextInput props](https://callstack.github.io/react-native-paper/text-input.html)\n\n   All TextInput props will be applied to host and search inputs\n\n   ## FlatDropdown specific props\n\n   ### menuOffset\n\n   - **Type**: number\n   - **Required**: false\n   - **Default**: 65\n   - **Description**: Offset of menu from trigger (host) element\n\n   ## ModalDropdown specific props\n\n   ### renderSearchInput\n\n   - **Type**: (props: [TextInputProps](https://callstack.github.io/react-native-paper/text-input.html)) =\u003e React.ReactElement\n   - **Required**: false\n   - **Default**: _uses TextInput of react-native-paper_\n   - **Description**: Renders search input inside modal (by default looks same as trigger/host input)\n\n# Showcase\n\n1. Default modal mode\n\n```tsx\n\u003cAutocomplete\n  multiple\n  value={value}\n  onChange={setValue}\n  style={{ width: 300 }}\n  options={[\n    { value: \"1\", label: \"option 1\" },\n    { value: \"2\", label: \"option 2\" },\n    { value: \"3\", label: \"option 3\" },\n  ]}\n/\u003e\n```\n\n![default mode](https://media.giphy.com/media/dX1enKz3tW8CjY8BjU/giphy.gif)\n\n2. Flat mode\n\n```tsx\n\u003cAutocomplete\n  multiple\n  renderDropdown={(props) =\u003e \u003cFlatDropdown menuOffset={40} {...props} /\u003e}\n  value={value}\n  onChange={setValue}\n  style={{ width: 300 }}\n  options={[\n    { value: \"1\", label: \"option 1\" },\n    { value: \"2\", label: \"option 2\" },\n    { value: \"3\", label: \"option 3\" },\n  ]}\n/\u003e\n```\n\n![flat mode](https://media.giphy.com/media/4YlhkQViF5pYN9kZui/giphy.gif)\n\n3. Custom option\n\n```tsx\n\u003cAutocomplete\n  multiple\n  value={value}\n  onChange={setValue}\n  style={{ width: 300 }}\n  options={[\n    {\n      value: \"1\",\n      label: \"option 1\",\n      description: \"some description 1\",\n    },\n    {\n      value: \"2\",\n      label: \"option 2\",\n      description: \"some description 2\",\n    },\n    {\n      value: \"3\",\n      label: \"option 3\",\n      description: \"some description 3\",\n    },\n  ]}\n  renderOption={({ selected, onSelect, label }, { description }) =\u003e {\n    return (\n      \u003cList.Item\n        onPress={onSelect}\n        title={label}\n        description={description}\n        left={(props) =\u003e \u003cList.Icon {...props} icon=\"mail\" /\u003e}\n        right={\n          selected\n            ? (props) =\u003e \u003cList.Icon {...props} icon=\"check\" /\u003e\n            : undefined\n        }\n      /\u003e\n    );\n  }}\n/\u003e\n```\n\n![custom option](https://media.giphy.com/media/h8GS08RlbTaWvOBIL3/giphy.gif)\n\n4. Custom option + flat mode + custom filter\n\n```tsx\n\u003cAutocomplete\n  multiple\n  value={value}\n  onChange={setValue}\n  style={{ width: 300 }}\n  options={[\n    {\n      value: \"1\",\n      label: \"option 1\",\n      description: \"some description 1\",\n    },\n    {\n      value: \"2\",\n      label: \"option 2\",\n      description: \"some description 2\",\n    },\n    {\n      value: \"3\",\n      label: \"option 3\",\n      description: \"some description 3\",\n    },\n  ]}\n  filterOptions={(options, input) =\u003e {\n    if (!input) {\n      return options;\n    }\n    const includesIgnoreNoWhiteSpaceCase = (a: string, b: string): boolean =\u003e {\n      const optionQuery = (a || \"\").replace(/\\s/g, \"\").toUpperCase();\n      const inputQuery = (b || \"\").replace(/\\s/g, \"\").toUpperCase();\n      return (\n        optionQuery.includes(inputQuery) || inputQuery.includes(optionQuery)\n      );\n    };\n    return options.filter((option) =\u003e {\n      return (\n        includesIgnoreNoWhiteSpaceCase(option.label, input) ||\n        includesIgnoreNoWhiteSpaceCase(option.description, input)\n      );\n    });\n  }}\n  renderDropdown={(props) =\u003e \u003cFlatDropdown menuOffset={40} {...props} /\u003e}\n  renderOption={({ selected, onSelect, label }, { description }) =\u003e {\n    return (\n      \u003cList.Item\n        onPress={onSelect}\n        title={label}\n        description={description}\n        left={(props) =\u003e \u003cList.Icon {...props} icon=\"folder\" /\u003e}\n        right={\n          selected\n            ? (props) =\u003e \u003cList.Icon {...props} icon=\"check\" /\u003e\n            : undefined\n        }\n      /\u003e\n    );\n  }}\n/\u003e\n```\n\n![custom option + flat + filter](https://media.giphy.com/media/kf8IZ07p2lwb1NF8Us/giphy.gif)\n\n5. Custom search input for modal mode\n\n```tsx\n\u003cAutocomplete\n  multiple\n  renderDropdown={(props) =\u003e (\n    \u003cModalDropdown\n      {...props}\n      renderSearchInput={(props) =\u003e (\n        \u003cTextInput\n          {...props}\n          left={\u003cTextInput.Icon name=\"arrow-down\" size={20} /\u003e}\n        /\u003e\n      )}\n    /\u003e\n  )}\n  value={value}\n  onChange={setValue}\n  style={{ width: 300 }}\n  options={[\n    { value: \"1\", label: \"option 1\" },\n    { value: \"2\", label: \"option 2\" },\n    { value: \"3\", label: \"option 3\" },\n  ]}\n/\u003e\n```\n\n![custom search](https://media.giphy.com/media/yv1v1PlCe78rPUWGsi/giphy.gif)\n\n6. Custom chips\n\n```tsx\n\u003cAutocomplete\n  multiple\n  renderSelectedItem={({ label, value, onDelete }) =\u003e (\n    \u003cChip key={value} icon=\"folder\" mode=\"outlined\" onClose={onDelete}\u003e\n      {label}\n    \u003c/Chip\u003e\n  )}\n  value={value}\n  onChange={setValue}\n  style={{ width: 300 }}\n  options={[\n    { value: \"1\", label: \"option 1\" },\n    { value: \"2\", label: \"option 2\" },\n    { value: \"3\", label: \"option 3\" },\n  ]}\n/\u003e\n```\n\n![custom chips](https://media.giphy.com/media/s9wrnUVrtUTgjfp4rq/giphy.gif)\n\n7. Validation\n\n```tsx\n\u003cAutocomplete\n  multiple\n  onOpen={() =\u003e {}}\n  onClose={() =\u003e {}}\n  value={value}\n  error={value.length !== 2}\n  renderHelper={\n    value.length !== 2\n      ? () =\u003e (\n          \u003cHelperText type=\"error\" visible\u003e\n            You should select 2 items\n          \u003c/HelperText\u003e\n        )\n      : null\n  }\n  onChange={setValue}\n  style={{ width: 300 }}\n  options={[\n    { value: \"1\", label: \"option 1\" },\n    { value: \"2\", label: \"option 2\" },\n    { value: \"3\", label: \"option 3\" },\n  ]}\n/\u003e\n```\n\n![validation](https://media.giphy.com/media/rE6x7d7L0igyjKxj1a/giphy.gif)\n\n8. Single selection autocomplete\n\n```tsx\n\u003cAutocomplete\n  menuOffset={40}\n  value={value}\n  onChange={setValue}\n  style={{ width: 300 }}\n  options={[\n    { value: \"1\", label: \"option 1\" },\n    { value: \"2\", label: \"option 2\" },\n    { value: \"3\", label: \"option 3\" },\n  ]}\n/\u003e\n```\n\n![single selection](https://media.giphy.com/media/ui2OsIJIdyI4tdEvFv/giphy.gif)\n\n9. Custom host element\n\n```tsx\n\u003cAutocomplete\n  menuOffset={15}\n  renderHost={() =\u003e (\n    \u003cButton mode=\"contained\"\u003e\n      {value\n        ? options.find((op) =\u003e op.value === value)?.label\n        : \"Select value...\"}\n    \u003c/Button\u003e\n  )}\n  filterOptions={(options) =\u003e options}\n  onOpen={() =\u003e {}}\n  onClose={() =\u003e {}}\n  value={value}\n  onChange={setValue}\n  style={{ width: 300 }}\n  options={options}\n/\u003e\n```\n\n![custom host](https://media.giphy.com/media/BFz2x25motsoj1YvcX/giphy.gif)\n\n10. Plain Dropdown Component (Modal)\n\n```tsx\n\u003cModalDropdown\n  onOpen={() =\u003e {}}\n  onClose={() =\u003e {}}\n  onChangeText={setInput}\n  style={{ width: 300 }}\n  inputValue={input}\n  options={[\n    { value: \"1\", label: \"option 1\" },\n    { value: \"2\", label: \"option 2\" },\n    { value: \"3\", label: \"option 3\" },\n  ]}\n  renderOption={({ item }) =\u003e (\n    \u003cMenu.Item onPress={() =\u003e {}} title={item.label} /\u003e\n  )}\n/\u003e\n```\n\n![modal dropdown](https://media.giphy.com/media/h9Qd8io8mOPmUV2jr4/giphy.gif)\n\n11. Plain Dropdown Component (Flat)\n\n```tsx\n\u003cFlatDropdown\n  onOpen={() =\u003e {}}\n  onClose={() =\u003e {}}\n  onChangeText={setInput}\n  menuOffset={40}\n  style={{ width: 300 }}\n  inputValue={input}\n  options={[\n    { value: \"1\", label: \"option 1\" },\n    { value: \"2\", label: \"option 2\" },\n    { value: \"3\", label: \"option 3\" },\n  ]}\n  renderOption={({ item }) =\u003e (\n    \u003cMenu.Item onPress={() =\u003e {}} title={item.label} /\u003e\n  )}\n/\u003e\n```\n\n![flat dropdown](https://media.giphy.com/media/1NSQcfrQF1r3SBHQgP/giphy.gif)\n\n12. Writing Autocomplete which works in mixed mode (flat+modal)\n\n```tsx\nimport {\n  FlatDropdown,\n  ModalDropdown,\n  Autocomplete,\n  AutocompleteProps,\n} from \"@telenko/react-native-paper-autocomplete\";\nimport React, { useState } from \"react\";\n\nconst AutocompleteMixed: React.FC\u003cAutocompleteProps\u003e = (props) =\u003e {\n  const [modal, setModal] = useState(false);\n  const [currentOpen, setCurrentOpen] = useState(props.openOnMount);\n  return (\n    \u003cAutocomplete\n      renderDropdown={(props) =\u003e\n        modal ? (\n          \u003cModalDropdown openOnMount={currentOpen} {...props} /\u003e\n        ) : (\n          \u003cFlatDropdown openOnMount={currentOpen} menuOffset={40} {...props} /\u003e\n        )\n      }\n      onClose={() =\u003e {\n        setCurrentOpen(false);\n        setModal(false);\n      }}\n      onChangeText={(v) =\u003e {\n        setCurrentOpen(true);\n        setModal(v.length \u003e 0);\n      }}\n      {...props}\n    /\u003e\n  );\n};\n```\n\n![mixed mode](https://media.giphy.com/media/U3rNdlAdLs8gfYa9qi/giphy.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftelenko%2Freact-native-paper-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftelenko%2Freact-native-paper-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftelenko%2Freact-native-paper-autocomplete/lists"}