{"id":21765170,"url":"https://github.com/hoaphantn7604/react-native-element-dropdown","last_synced_at":"2025-10-04T02:25:18.158Z","repository":{"id":37406511,"uuid":"379370578","full_name":"hoaphantn7604/react-native-element-dropdown","owner":"hoaphantn7604","description":"A react-native dropdown component easy to customize for both iOS and Android. ","archived":false,"fork":false,"pushed_at":"2025-01-11T03:16:47.000Z","size":1097,"stargazers_count":1252,"open_issues_count":174,"forks_count":200,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-10T22:50:27.020Z","etag":null,"topics":["components","dropdown","elements","lazy-loading","load-more","material","multiselect","picker","react-native","select","select-country"],"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/hoaphantn7604.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-22T18:50:00.000Z","updated_at":"2025-09-07T17:10:12.000Z","dependencies_parsed_at":"2023-12-04T03:23:41.114Z","dependency_job_id":"1d7d921e-33a3-4c12-a01b-0fdb23c4f2b4","html_url":"https://github.com/hoaphantn7604/react-native-element-dropdown","commit_stats":{"total_commits":319,"total_committers":7,"mean_commits":45.57142857142857,"dds":0.3260188087774295,"last_synced_commit":"7542ab246dc2d57744cbd0e1bc213681e3fd7047"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/hoaphantn7604/react-native-element-dropdown","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-element-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-element-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-element-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-element-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoaphantn7604","download_url":"https://codeload.github.com/hoaphantn7604/react-native-element-dropdown/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-element-dropdown/sbom","scorecard":{"id":467131,"data":{"date":"2025-08-11","repo":{"name":"github.com/hoaphantn7604/react-native-element-dropdown","commit":"5787e1f33f7ca890322457b1ee2dcd2e68e78ed1"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.8,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","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":"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":"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":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/ci.yml:1","Info: no jobLevel write permissions found"],"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":"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":"Code-Review","score":0,"reason":"Found 0/30 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":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/hoaphantn7604/react-native-element-dropdown/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/hoaphantn7604/react-native-element-dropdown/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/hoaphantn7604/react-native-element-dropdown/ci.yml/master?enable=pin","Info: 0 out of 3 GitHub-owned GitHubAction dependencies pinned"],"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":"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":"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":"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":"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":"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":"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":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"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":"70 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-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","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-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-3q56-9cc2-46j4","Warn: Project is vulnerable to: GHSA-6w63-h3fj-q4vw","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h","Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx","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-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-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","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-7fh5-64p2-3v2j","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-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-7jxr-cg7f-gpgv","Warn: Project is vulnerable to: GHSA-xj72-wvfv-8985","Warn: Project is vulnerable to: GHSA-ch3r-j5x3-6q2m","Warn: Project is vulnerable to: GHSA-p5gc-c584-jj6v","Warn: Project is vulnerable to: GHSA-whpj-8f3w-67p5","Warn: Project is vulnerable to: GHSA-cchq-frgv-rjh5","Warn: Project is vulnerable to: GHSA-g644-9gfx-q4q4","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7"],"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-19T12:50:09.374Z","repository_id":37406511,"created_at":"2025-08-19T12:50:09.374Z","updated_at":"2025-08-19T12:50:09.374Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278254666,"owners_count":25956644,"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-04T02:00:05.491Z","response_time":63,"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":["components","dropdown","elements","lazy-loading","load-more","material","multiselect","picker","react-native","select","select-country"],"created_at":"2024-11-26T13:10:51.073Z","updated_at":"2025-10-04T02:25:18.141Z","avatar_url":"https://github.com/hoaphantn7604.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[\u003cimg src=\"https://github.com/hoaphantn7604/file-upload/blob/master/document/dropdown/react-native-element-dropdown-demo.png\"\u003e](https://github.com/hoaphantn7604/file-upload/blob/master/document/dropdown/react-native-element-dropdown-demo.png)\n\n# react-native-element-dropdown\nReact Native Element Dropdown is a library that provides a customizable dropdown component for React Native applications. This library simplifies the process of creating dropdown menus and provides a variety of options to customize the dropdown to match the design and functionality of your application.\n\n## Features\n* Dropdown and Multiselect in one package\n* Easy to use\n* Consistent look and feel on iOS and Android\n* Customizable font size, colors and animation duration\n* Implemented with typescript\n\n```js\nIf you love this library, give us a star, you will be a ray of sunshine in our lives :)\n```\n\n### Free React Native Boilerplate\n[React Native Template](https://github.com/hoaphantn7604/react-native-template-components) with a beautiful UI.\n\n## Getting started\n```js\nnpm install react-native-element-dropdown --save\n```\nor\n\n```js\nyarn add react-native-element-dropdown\n```\n### Demo\n\n[\u003cimg src=\"https://github.com/hoaphantn7604/file-upload/blob/master/document/dropdown/react-native-element-dropdown-thumbnal.jpg\"\u003e](https://youtu.be/FhTDR_Ad_14)\n\n\n\u003cbr /\u003e\n\n![](https://github.com/hoaphantn7604/file-upload/blob/master/document/dropdown/react-native-drpdown.gif)\n![](https://github.com/hoaphantn7604/file-upload/blob/master/document/dropdown/react-native-multiselect.gif)\n\n### Dropdown Props\n| Props | Params | isRequire | Description |\n| ------------------ | ----------------------------------------------- | --------- | ------------------------------------------------------------------- |\n| mode | 'default' or 'modal' of 'auto' | No | Mode 'modal' is show the dropdown in the middle of the screen. |\n| data | Array | Yes | Data is a plain array |\n| labelField | String | Yes | Extract the label from the data item |\n| valueField | String | Yes | Extract the primary key from the data item |\n| searchField | String | No | Specify the field of data list you want to search |\n| onChange | (item: object) =\u003e void | Yes | Selection callback |\n| onChangeText | (search: string) =\u003e void | No | Callback that is called when the text input's text changes |\n| value | Item | No | Set default value |\n| placeholder | String | No | The string that will be rendered before dropdown has been selected |\n| placeholderStyle | TextStyle | No | Styling for text placeholder |\n| selectedTextStyle | TextStyle | No | Styling for selected text |\n| selectedTextProps | TextProps | No | Text Props for selected text. Ex: numberOfLines={1} |\n| style | ViewStyle | No | Styling for view container |\n| containerStyle | ViewStyle | No | Styling for list container |\n| maxHeight | Number | No | Customize max height for list container |\n| minHeight | Number | No | Customize min height for list container |\n| fontFamily | String | No | Customize font style |\n| iconStyle | ImageStyle | No | Styling for icon |\n| iconColor | String | No | Color of icons |\n| itemContainerStyle | TextStyle | No | Styling for item container in list |\n| itemTextStyle | TextStyle | No | Styling for text item in list |\n| activeColor | String | No | Background color for item selected in list container |\n| search | Boolean | No | Show or hide input search |\n| searchQuery | (keyword: string, labelValue: string) =\u003e Boolean| No | Callback used to filter the list of items |\n| inputSearchStyle | ViewStyle | No | Styling for input search |\n| searchPlaceholder | String | No | The string that will be rendered before text input has been entered |\n| searchPlaceholderTextColor | String | No | The text color of the placeholder string |\n| renderInputSearch | (onSearch: (text:string) =\u003e void) =\u003e JSX.Element| No | Customize TextInput search |\n| disable | Boolean | No | Specifies the disabled state of the Dropdown |\n| dropdownPosition | 'auto' or 'top' or 'bottom' | No | Dropdown list position. Default is 'auto' |\n| autoScroll | Boolean | No | Auto scroll to index item selected, default is true |\n| showsVerticalScrollIndicator | Boolean | No | When true, shows a vertical scroll indicator, default is true |\n| renderLeftIcon | (visible?: boolean) =\u003e JSX.Element | No | Customize left icon for dropdown |\n| renderRightIcon | (visible?: boolean) =\u003e JSX.Element | No | Customize right icon for dropdown |\n| renderItem | (item: object, selected: Boolean) =\u003e JSX.Element| No | Takes an item from data and renders it into the list |\n| flatListProps | FlatListProps | No | Customize FlatList element |\n| inverted | Boolean | No | Reverses the direction of scroll on top position mode. Default is true|\n| onFocus | () =\u003e void | No | Callback that is called when the dropdown is focused |\n| onBlur | () =\u003e void | No | Callback that is called when the dropdown is blurred |\n| keyboardAvoiding | Boolean | No | keyboardAvoiding default is true |\n| backgroundColor | String | No | Set background color |\n| confirmSelectItem | Boolean | No | Turn On confirm select item. Refer example/src/dropdown/example3 |\n| onConfirmSelectItem | (item: object) =\u003e void | No | Selection callback. Refer example/src/dropdown/example3 |\n| testID | String | No | Used to locate this view in end-to-end tests |\n| itemTestIDField | String | No | Add this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}]|\n| accessibilityLabel | String | No | Set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected |\n| itemAccessibilityLabelField | String | No | Add this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}]|\n| closeModalWhenSelectedItem | Boolean | No | By default, closeModalWhenSelectedItem is set to true. When closeModalWhenSelectedItem is set to false, the Modal won't close when an item is selected. |\n| excludeItems | Item[] | No | The array containing the items to be excluded. |\n| excludeSearchItems | Item[] | No | The array containing the items to be excluded. |\n\n\n\n### MultiSelect Props\n| Props | Params | isRequire | Description |\n| ------------------ | -----------------------------------------------------| --------- | ------------------------------------------------------------------- |\n| mode | 'default' or 'modal' of 'auto' | No | Mode 'modal' is show the dropdown in the middle of the screen. |\n| data | Array | Yes | Data is a plain array |\n| labelField | String | Yes | Extract the label from the data item |\n| valueField | String | Yes | Extract the primary key from the data item |\n| searchField | String | No | Specify the field of data list you want to search |\n| onChange | (value[]) =\u003e void | Yes | Selection callback. A array containing the \"valueField\". |\n| onChangeText | (search: string) =\u003e void | No | Callback that is called when the text input's text changes |\n| value | Item[] | No | Set default value. A array containing the \"valueField\". |\n| placeholder | String | No | The string that will be rendered before dropdown has been selected |\n| placeholderStyle | TextStyle | No | Styling for text placeholder |\n| style | ViewStyle | No | Styling for view container |\n| containerStyle | ViewStyle | No | Styling for list container |\n| maxHeight | Number | No | Customize max height for list container |\n| minHeight | Number | No | Customize min height for list container |\n| maxSelect | Number | No | maximum number of items that can be selected |\n| fontFamily | String | No | Customize font style |\n| iconStyle | ImageStyle | No | Styling for icon |\n| iconColor | String | No | Color of icons |\n| activeColor | String | No | Background color for item selected in list container |\n| itemContainerStyle | TextStyle | No | Styling for item container in list |\n| itemTextStyle | TextStyle | No | Styling for text item in list |\n| selectedStyle | ViewStyle | No | Styling for selected view |\n| selectedTextStyle | TextStyle | No | Styling for selected text |\n| selectedTextProps | TextProps | No | Text Props for selected text. Ex: numberOfLines={1} |\n| renderSelectedItem | (item: object, unSelect?: () =\u003e void) =\u003e JSX.Element | No | Takes an item from data and renders it into the list selected |\n| alwaysRenderSelectedItem | Boolean | No | Always show the list of selected items |\n| visibleSelectedItem | Boolean | No | Option to hide selected item list, Ẽx: visibleSelectedItem={false} |\n| search | Boolean | No | Show or hide input search |\n| searchQuery | (keyword: string, labelValue: string) =\u003e Boolean | No | Callback used to filter the list of items |\n| inputSearchStyle | ViewStyle | No | Styling for input search |\n| searchPlaceholder | String | No | The string that will be rendered before text input has been entered |\n| searchPlaceholderTextColor | String | No | The text color of the placeholder string |\n| renderInputSearch | (onSearch: (text:string) =\u003e void) =\u003e JSX.Element | No | Customize TextInput search |\n| disable | Boolean | No | Specifies the disabled state of the Dropdown |\n| dropdownPosition | 'auto' or 'top' or 'bottom' | No | Dropdown list position. Default is 'auto' |\n| showsVerticalScrollIndicator | Boolean | No | When true, shows a vertical scroll indicator, default is true |\n| renderLeftIcon | (visible?: boolean) =\u003e JSX.Element | No | Customize left icon for dropdown |\n| renderRightIcon | (visible?: boolean) =\u003e JSX.Element | No | Customize right icon for dropdown |\n| renderItem | (item: object, selected: Boolean) =\u003e JSX.Element | No | Takes an item from data and renders it into the list |\n| flatListProps | FlatListProps | No | Customize FlatList element |\n| inverted | Boolean | No | Reverses the direction of scroll on top position mode. Default is true|\n| onFocus | () =\u003e void | No | Callback that is called when the dropdown is focused |\n| onBlur | () =\u003e void | No | Callback that is called when the dropdown is blurred |\n| keyboardAvoiding | Boolean | No | keyboardAvoiding default is true |\n| inside | Boolean | No | inside default is false |\n| backgroundColor | String | No | Set background color |\n| confirmSelectItem | Boolean | No | Turn On confirm select item. Refer example/src/dropdown/example7 |\n| confirmUnSelectItem | Boolean | No | Turn On confirm un-select item. Refer example/src/dropdown/example7 |\n| onConfirmSelectItem | (item: any) =\u003e void | No | Selection callback. Refer example/src/dropdown/example7 |\n| testID | String | No | Used to locate this view in end-to-end tests |\n| itemTestIDField | String | No | Add this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}]|\n| accessibilityLabel | String | No | Set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected |\n| itemAccessibilityLabelField | String | No | Add this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}]|\n| excludeItems | Item[] | No | The array containing the items to be excluded. |\n| excludeSearchItems | Item[] | No | The array containing the items to be excluded. |\n\n\n\n### SelectCountry extends Dropdown\n| Props | Params | isRequire | Description |\n| ------------------ | -------------------- | --------- | ------------------------------------ |\n| imageField | String | Yes | Extract the image from the data item |\n| imageStyle | ImageStyle | No | Styling for image |\n\n\n### Method\n| API | Params | Description |\n| ----------- | ------------| ---------------------|\n| open | () =\u003e void | Open dropdown list |\n| close | () =\u003e void | Close dropdown list |\n\n\n### Dropdown example\n![](https://github.com/hoaphantn7604/file-upload/blob/master/document/dropdown/react-native-dropdown-1.png)\n```js\n import React, { useState } from 'react';\n import { StyleSheet, Text, View } from 'react-native';\n import { Dropdown } from 'react-native-element-dropdown';\n import AntDesign from '@expo/vector-icons/AntDesign';\n\n const data = [\n { label: 'Item 1', value: '1' },\n { label: 'Item 2', value: '2' },\n { label: 'Item 3', value: '3' },\n { label: 'Item 4', value: '4' },\n { label: 'Item 5', value: '5' },\n { label: 'Item 6', value: '6' },\n { label: 'Item 7', value: '7' },\n { label: 'Item 8', value: '8' },\n ];\n\n const DropdownComponent = () =\u003e {\n const [value, setValue] = useState(null);\n const [isFocus, setIsFocus] = useState(false);\n\n const renderLabel = () =\u003e {\n if (value || isFocus) {\n return (\n \u003cText style={[styles.label, isFocus \u0026\u0026 { color: 'blue' }]}\u003e\n Dropdown label\n \u003c/Text\u003e\n );\n }\n return null;\n };\n\n return (\n \u003cView style={styles.container}\u003e\n {renderLabel()}\n \u003cDropdown\n style={[styles.dropdown, isFocus \u0026\u0026 { borderColor: 'blue' }]}\n placeholderStyle={styles.placeholderStyle}\n selectedTextStyle={styles.selectedTextStyle}\n inputSearchStyle={styles.inputSearchStyle}\n iconStyle={styles.iconStyle}\n data={data}\n search\n maxHeight={300}\n labelField=\"label\"\n valueField=\"value\"\n placeholder={!isFocus ? 'Select item' : '...'}\n searchPlaceholder=\"Search...\"\n value={value}\n onFocus={() =\u003e setIsFocus(true)}\n onBlur={() =\u003e setIsFocus(false)}\n onChange={item =\u003e {\n setValue(item.value);\n setIsFocus(false);\n }}\n renderLeftIcon={() =\u003e (\n \u003cAntDesign\n style={styles.icon}\n color={isFocus ? 'blue' : 'black'}\n name=\"Safety\"\n size={20}\n /\u003e\n )}\n /\u003e\n \u003c/View\u003e\n );\n };\n\n export default DropdownComponent;\n\n const styles = StyleSheet.create({\n container: {\n backgroundColor: 'white',\n padding: 16,\n },\n dropdown: {\n height: 50,\n borderColor: 'gray',\n borderWidth: 0.5,\n borderRadius: 8,\n paddingHorizontal: 8,\n },\n icon: {\n marginRight: 5,\n },\n label: {\n position: 'absolute',\n backgroundColor: 'white',\n left: 22,\n top: 8,\n zIndex: 999,\n paddingHorizontal: 8,\n fontSize: 14,\n },\n placeholderStyle: {\n fontSize: 16,\n },\n selectedTextStyle: {\n fontSize: 16,\n },\n iconStyle: {\n width: 20,\n height: 20,\n },\n inputSearchStyle: {\n height: 40,\n fontSize: 16,\n },\n });\n```\n\n### Dropdown example 1\n![](https://github.com/hoaphantn7604/file-upload/blob/master/document/dropdown/react-native-dropdown-2.png)\n```javascript\n import React, { useState } from 'react';\n import { StyleSheet } from 'react-native';\n import { Dropdown } from 'react-native-element-dropdown';\n import AntDesign from '@expo/vector-icons/AntDesign';\n\n const data = [\n { label: 'Item 1', value: '1' },\n { label: 'Item 2', value: '2' },\n { label: 'Item 3', value: '3' },\n { label: 'Item 4', value: '4' },\n { label: 'Item 5', value: '5' },\n { label: 'Item 6', value: '6' },\n { label: 'Item 7', value: '7' },\n { label: 'Item 8', value: '8' },\n ];\n\n const DropdownComponent = () =\u003e {\n const [value, setValue] = useState(null);\n\n return (\n \u003cDropdown\n style={styles.dropdown}\n placeholderStyle={styles.placeholderStyle}\n selectedTextStyle={styles.selectedTextStyle}\n inputSearchStyle={styles.inputSearchStyle}\n iconStyle={styles.iconStyle}\n data={data}\n search\n maxHeight={300}\n labelField=\"label\"\n valueField=\"value\"\n placeholder=\"Select item\"\n searchPlaceholder=\"Search...\"\n value={value}\n onChange={item =\u003e {\n setValue(item.value);\n }}\n renderLeftIcon={() =\u003e (\n \u003cAntDesign style={styles.icon} color=\"black\" name=\"Safety\" size={20} /\u003e\n )}\n /\u003e\n );\n };\n\n export default DropdownComponent;\n\n const styles = StyleSheet.create({\n dropdown: {\n margin: 16,\n height: 50,\n borderBottomColor: 'gray',\n borderBottomWidth: 0.5,\n },\n icon: {\n marginRight: 5,\n },\n placeholderStyle: {\n fontSize: 16,\n },\n selectedTextStyle: {\n fontSize: 16,\n },\n iconStyle: {\n width: 20,\n height: 20,\n },\n inputSearchStyle: {\n height: 40,\n fontSize: 16,\n },\n });\n```\n\n### Dropdown example 2\n![](https://github.com/hoaphantn7604/file-upload/blob/master/document/dropdown/react-native-dropdown-3.png)\n```javascript\n import React, { useState } from 'react';\n import { StyleSheet, View, Text } from 'react-native';\n import { Dropdown } from 'react-native-element-dropdown';\n import AntDesign from '@expo/vector-icons/AntDesign';\n\n const data = [\n { label: 'Item 1', value: '1' },\n { label: 'Item 2', value: '2' },\n { label: 'Item 3', value: '3' },\n { label: 'Item 4', value: '4' },\n { label: 'Item 5', value: '5' },\n { label: 'Item 6', value: '6' },\n { label: 'Item 7', value: '7' },\n { label: 'Item 8', value: '8' },\n ];\n\n const DropdownComponent = () =\u003e {\n const [value, setValue] = useState(null);\n\n const renderItem = item =\u003e {\n return (\n \u003cView style={styles.item}\u003e\n \u003cText style={styles.textItem}\u003e{item.label}\u003c/Text\u003e\n {item.value === value \u0026\u0026 (\n \u003cAntDesign\n style={styles.icon}\n color=\"black\"\n name=\"Safety\"\n size={20}\n /\u003e\n )}\n \u003c/View\u003e\n );\n };\n\n return (\n \u003cDropdown\n style={styles.dropdown}\n placeholderStyle={styles.placeholderStyle}\n selectedTextStyle={styles.selectedTextStyle}\n inputSearchStyle={styles.inputSearchStyle}\n iconStyle={styles.iconStyle}\n data={data}\n search\n maxHeight={300}\n labelField=\"label\"\n valueField=\"value\"\n placeholder=\"Select item\"\n searchPlaceholder=\"Search...\"\n value={value}\n onChange={item =\u003e {\n setValue(item.value);\n }}\n renderLeftIcon={() =\u003e (\n \u003cAntDesign style={styles.icon} color=\"black\" name=\"Safety\" size={20} /\u003e\n )}\n renderItem={renderItem}\n /\u003e\n );\n };\n\n export default DropdownComponent;\n\n const styles = StyleSheet.create({\n dropdown: {\n margin: 16,\n height: 50,\n backgroundColor: 'white',\n borderRadius: 12,\n padding: 12,\n shadowColor: '#000',\n shadowOffset: {\n width: 0,\n height: 1,\n },\n shadowOpacity: 0.2,\n shadowRadius: 1.41,\n\n elevation: 2,\n },\n icon: {\n marginRight: 5,\n },\n item: {\n padding: 17,\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n },\n textItem: {\n flex: 1,\n fontSize: 16,\n },\n placeholderStyle: {\n fontSize: 16,\n },\n selectedTextStyle: {\n fontSize: 16,\n },\n iconStyle: {\n width: 20,\n height: 20,\n },\n inputSearchStyle: {\n height: 40,\n fontSize: 16,\n },\n });\n```\n\n### MultiSelect example 1\n![](https://github.com/hoaphantn7604/file-upload/blob/master/document/dropdown/react-native-multiselect-1.png)\n```js\n import React, { useState } from 'react';\n import { StyleSheet, View } from 'react-native';\n import { MultiSelect } from 'react-native-element-dropdown';\n import AntDesign from '@expo/vector-icons/AntDesign';\n\n const data = [\n { label: 'Item 1', value: '1' },\n { label: 'Item 2', value: '2' },\n { label: 'Item 3', value: '3' },\n { label: 'Item 4', value: '4' },\n { label: 'Item 5', value: '5' },\n { label: 'Item 6', value: '6' },\n { label: 'Item 7', value: '7' },\n { label: 'Item 8', value: '8' },\n ];\n\n const MultiSelectComponent = () =\u003e {\n const [selected, setSelected] = useState([]);\n\n return (\n \u003cView style={styles.container}\u003e\n \u003cMultiSelect\n style={styles.dropdown}\n placeholderStyle={styles.placeholderStyle}\n selectedTextStyle={styles.selectedTextStyle}\n inputSearchStyle={styles.inputSearchStyle}\n iconStyle={styles.iconStyle}\n search\n data={data}\n labelField=\"label\"\n valueField=\"value\"\n placeholder=\"Select item\"\n searchPlaceholder=\"Search...\"\n value={selected}\n onChange={item =\u003e {\n setSelected(item);\n }}\n renderLeftIcon={() =\u003e (\n \u003cAntDesign\n style={styles.icon}\n color=\"black\"\n name=\"Safety\"\n size={20}\n /\u003e\n )}\n selectedStyle={styles.selectedStyle}\n /\u003e\n \u003c/View\u003e\n );\n };\n\n export default MultiSelectComponent;\n\n const styles = StyleSheet.create({\n container: { padding: 16 },\n dropdown: {\n height: 50,\n backgroundColor: 'transparent',\n borderBottomColor: 'gray',\n borderBottomWidth: 0.5,\n },\n placeholderStyle: {\n fontSize: 16,\n },\n selectedTextStyle: {\n fontSize: 14,\n },\n iconStyle: {\n width: 20,\n height: 20,\n },\n inputSearchStyle: {\n height: 40,\n fontSize: 16,\n },\n icon: {\n marginRight: 5,\n },\n selectedStyle: {\n borderRadius: 12,\n },\n });\n```\n\n### MultiSelect example 2\n![](https://github.com/hoaphantn7604/file-upload/blob/master/document/dropdown/react-native-multiselect-2.png)\n```js\n import React, { useState } from 'react';\n import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';\n import { MultiSelect } from 'react-native-element-dropdown';\n import AntDesign from '@expo/vector-icons/AntDesign';\n\n const data = [\n { label: 'Item 1', value: '1' },\n { label: 'Item 2', value: '2' },\n { label: 'Item 3', value: '3' },\n { label: 'Item 4', value: '4' },\n { label: 'Item 5', value: '5' },\n { label: 'Item 6', value: '6' },\n { label: 'Item 7', value: '7' },\n { label: 'Item 8', value: '8' },\n ];\n\n const MultiSelectComponent = () =\u003e {\n const [selected, setSelected] = useState([]);\n\n const renderItem = item =\u003e {\n return (\n \u003cView style={styles.item}\u003e\n \u003cText style={styles.selectedTextStyle}\u003e{item.label}\u003c/Text\u003e\n \u003cAntDesign style={styles.icon} color=\"black\" name=\"Safety\" size={20} /\u003e\n \u003c/View\u003e\n );\n };\n\n return (\n \u003cView style={styles.container}\u003e\n \u003cMultiSelect\n style={styles.dropdown}\n placeholderStyle={styles.placeholderStyle}\n selectedTextStyle={styles.selectedTextStyle}\n inputSearchStyle={styles.inputSearchStyle}\n iconStyle={styles.iconStyle}\n data={data}\n labelField=\"label\"\n valueField=\"value\"\n placeholder=\"Select item\"\n value={selected}\n search\n searchPlaceholder=\"Search...\"\n onChange={item =\u003e {\n setSelected(item);\n }}\n renderLeftIcon={() =\u003e (\n \u003cAntDesign\n style={styles.icon}\n color=\"black\"\n name=\"Safety\"\n size={20}\n /\u003e\n )}\n renderItem={renderItem}\n renderSelectedItem={(item, unSelect) =\u003e (\n \u003cTouchableOpacity onPress={() =\u003e unSelect \u0026\u0026 unSelect(item)}\u003e\n \u003cView style={styles.selectedStyle}\u003e\n \u003cText style={styles.textSelectedStyle}\u003e{item.label}\u003c/Text\u003e\n \u003cAntDesign color=\"black\" name=\"delete\" size={17} /\u003e\n \u003c/View\u003e\n \u003c/TouchableOpacity\u003e\n )}\n /\u003e\n \u003c/View\u003e\n );\n };\n\n export default MultiSelectComponent;\n\n const styles = StyleSheet.create({\n container: { padding: 16 },\n dropdown: {\n height: 50,\n backgroundColor: 'white',\n borderRadius: 12,\n padding: 12,\n shadowColor: '#000',\n shadowOffset: {\n width: 0,\n height: 1,\n },\n shadowOpacity: 0.2,\n shadowRadius: 1.41,\n\n elevation: 2,\n },\n placeholderStyle: {\n fontSize: 16,\n },\n selectedTextStyle: {\n fontSize: 14,\n },\n iconStyle: {\n width: 20,\n height: 20,\n },\n inputSearchStyle: {\n height: 40,\n fontSize: 16,\n },\n icon: {\n marginRight: 5,\n },\n item: {\n padding: 17,\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n },\n selectedStyle: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 14,\n backgroundColor: 'white',\n shadowColor: '#000',\n marginTop: 8,\n marginRight: 12,\n paddingHorizontal: 12,\n paddingVertical: 8,\n shadowOffset: {\n width: 0,\n height: 1,\n },\n shadowOpacity: 0.2,\n shadowRadius: 1.41,\n\n elevation: 2,\n },\n textSelectedStyle: {\n marginRight: 5,\n fontSize: 16,\n },\n });\n```\n\n### SelectCountry example 1\n![](https://github.com/hoaphantn7604/file-upload/blob/master/document/dropdown/react-native-dropdown-4.png)\n```js\n import React, { useState } from 'react';\n import { StyleSheet } from 'react-native';\n import { SelectCountry } from 'react-native-element-dropdown';\n\n const local_data = [\n {\n value: '1',\n lable: 'Country 1',\n image: {\n uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',\n },\n },\n {\n value: '2',\n lable: 'Country 2',\n image: {\n uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',\n },\n },\n {\n value: '3',\n lable: 'Country 3',\n image: {\n uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',\n },\n },\n {\n value: '4',\n lable: 'Country 4',\n image: {\n uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',\n },\n },\n {\n value: '5',\n lable: 'Country 5',\n image: {\n uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',\n },\n },\n ];\n\n const SelectCountryScreen = _props =\u003e {\n const [country, setCountry] = useState('1');\n\n return (\n \u003cSelectCountry\n style={styles.dropdown}\n selectedTextStyle={styles.selectedTextStyle}\n placeholderStyle={styles.placeholderStyle}\n imageStyle={styles.imageStyle}\n inputSearchStyle={styles.inputSearchStyle}\n iconStyle={styles.iconStyle}\n search\n maxHeight={200}\n value={country}\n data={local_data}\n valueField=\"value\"\n labelField=\"lable\"\n imageField=\"image\"\n placeholder=\"Select country\"\n searchPlaceholder=\"Search...\"\n onChange={e =\u003e {\n setCountry(e.value);\n }}\n /\u003e\n );\n };\n\n export default SelectCountryScreen;\n\n const styles = StyleSheet.create({\n dropdown: {\n margin: 16,\n height: 50,\n borderBottomColor: 'gray',\n borderBottomWidth: 0.5,\n },\n imageStyle: {\n width: 24,\n height: 24,\n },\n placeholderStyle: {\n fontSize: 16,\n },\n selectedTextStyle: {\n fontSize: 16,\n marginLeft: 8,\n },\n iconStyle: {\n width: 20,\n height: 20,\n },\n inputSearchStyle: {\n height: 40,\n fontSize: 16,\n },\n });\n```\n\n### SelectCountry example 2\n![](https://github.com/hoaphantn7604/file-upload/blob/master/document/dropdown/react-native-dropdown-5.png)\n```js\n import React, { useState } from 'react';\n import { StyleSheet } from 'react-native';\n import { SelectCountry } from 'react-native-element-dropdown';\n\n const local_data = [\n {\n value: '1',\n lable: 'Country 1',\n image: {\n uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',\n },\n },\n {\n value: '2',\n lable: 'Country 2',\n image: {\n uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',\n },\n },\n {\n value: '3',\n lable: 'Country 3',\n image: {\n uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',\n },\n },\n {\n value: '4',\n lable: 'Country 4',\n image: {\n uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',\n },\n },\n {\n value: '5',\n lable: 'Country 5',\n image: {\n uri: 'https://www.vigcenter.com/public/all/images/default-image.jpg',\n },\n },\n ];\n\n const SelectCountryScreen = _props =\u003e {\n const [country, setCountry] = useState('1');\n\n return (\n \u003cSelectCountry\n style={styles.dropdown}\n selectedTextStyle={styles.selectedTextStyle}\n placeholderStyle={styles.placeholderStyle}\n imageStyle={styles.imageStyle}\n iconStyle={styles.iconStyle}\n maxHeight={200}\n value={country}\n data={local_data}\n valueField=\"value\"\n labelField=\"lable\"\n imageField=\"image\"\n placeholder=\"Select country\"\n searchPlaceholder=\"Search...\"\n onChange={e =\u003e {\n setCountry(e.value);\n }}\n /\u003e\n );\n };\n\n export default SelectCountryScreen;\n\n const styles = StyleSheet.create({\n dropdown: {\n margin: 16,\n height: 50,\n width: 150,\n backgroundColor: '#EEEEEE',\n borderRadius: 22,\n paddingHorizontal: 8,\n },\n imageStyle: {\n width: 24,\n height: 24,\n borderRadius: 12,\n },\n placeholderStyle: {\n fontSize: 16,\n },\n selectedTextStyle: {\n fontSize: 16,\n marginLeft: 8,\n },\n iconStyle: {\n width: 20,\n height: 20,\n },\n });\n```\n\n\u003cbr/\u003e\n\n[\u003cimg src=\"https://github.com/hoaphantn7604/file-upload/blob/master/document/profile/hoa_phan_dev_banner.png\"\u003e](https://github.com/hoaphantn7604)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoaphantn7604%2Freact-native-element-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoaphantn7604%2Freact-native-element-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoaphantn7604%2Freact-native-element-dropdown/lists"}