{"id":24986893,"url":"https://github.com/adelredaa97/react-native-select-dropdown","last_synced_at":"2025-05-15T18:05:43.851Z","repository":{"id":37751745,"uuid":"341729852","full_name":"AdelRedaa97/react-native-select-dropdown","owner":"AdelRedaa97","description":"react-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for andriod and iOS platforms.","archived":false,"fork":false,"pushed_at":"2024-06-26T10:09:22.000Z","size":4243,"stargazers_count":314,"open_issues_count":35,"forks_count":135,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-08-09T10:56:58.647Z","etag":null,"topics":["dropdown","react-native","select"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/AdelRedaa97.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-24T00:25:18.000Z","updated_at":"2024-07-22T05:42:37.000Z","dependencies_parsed_at":"2024-03-26T00:30:04.863Z","dependency_job_id":"7f4af980-2853-44a3-ba0a-a7097520b559","html_url":"https://github.com/AdelRedaa97/react-native-select-dropdown","commit_stats":{"total_commits":85,"total_committers":22,"mean_commits":"3.8636363636363638","dds":0.5058823529411764,"last_synced_commit":"0597f53517c39589fa25b046478625317a13d5a3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdelRedaa97%2Freact-native-select-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdelRedaa97%2Freact-native-select-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdelRedaa97%2Freact-native-select-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdelRedaa97%2Freact-native-select-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AdelRedaa97","download_url":"https://codeload.github.com/AdelRedaa97/react-native-select-dropdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254394719,"owners_count":22063984,"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":["dropdown","react-native","select"],"created_at":"2025-02-04T11:33:15.134Z","updated_at":"2025-05-15T18:05:43.783Z","avatar_url":"https://github.com/AdelRedaa97.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-select-dropdown\n\nreact-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for android and iOS platforms.\n\n## Installation\n\n#### # Using npm\n\n```bash\nnpm install react-native-select-dropdown\n```\n\n#### # Using yarn\n\n```bash\nyarn add react-native-select-dropdown\n```\n\n## Demo\n\n#### Code provided in Examples folder.\n\n\u003cp float=\"left\"\u003e\n\t\u003cimg src=\"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbms4YWRncmdudjFlMmx2bHc1a2hzNWw3bno0cGtrdXkxYTlyN2oxcSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/RymCaYuta5eMPILl3n/giphy.gif\" width=\"300\" height=\"650\"\u003e\n\t\u003cimg src=\"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExOTlkcGJxaDJ5ZWJ0NjdmM3ZjN3EwZzhudDcxZmNjMnh0NmZ6ZzZscyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/nRi2BIZ67JTsb2CXOK/source.gif\" width=\"300\" height=\"650\"\u003e\n\t\u003cimg src=\"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExYW95emwzdG1kdXlrdzV2YWp5cXd5eThodWplZzc2dmViaTFyZGp4dSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5K2jqeCXiyLeIWSyEg/giphy.gif\" width=\"300\" height=\"650\"\u003e\n\u003c/p\u003e\n\n#### Search Functionality (Code provided in Examples folder).\n\n\u003cp float=\"left\"\u003e\n\t\u003cimg src=\"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNjVoemczdHdoc2ZxajgwN3RhaTM5MGhhaG1yZGY4MGhqaWxlMW9rYSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Q4jfg5sUF6k648goG4/giphy.gif\" width=\"300\" height=\"650\"\u003e\n\u003c/p\u003e\n\n## 🚀 Major Changes\n\n### Version 4.0\n\n- (defaultButtonText, buttonTextAfterSelection, buttonStyle, buttonTextStyle, renderCustomizedButtonChild, renderDropdownIcon, dropdownIconPosition) have been removed and (renderButton) has been added to customize dropdown button\n- (rowTextForSelection, rowStyle, rowTextStyle, selectedRowStyle, selectedRowTextStyle, renderCustomizedRowChild) have been removed and (renderItem) has been added to customize each dropdown item\n- testID added to scroll the dropdown menu in e2e tests.\n- Most of issues have been fixed.\n- Updated readme.md file\n- More examples in examples folder.\n\n## Usage\n\n```\nimport SelectDropdown from 'react-native-select-dropdown'\nimport Icon from 'react-native-vector-icons/MaterialCommunityIcons';\n...\n  const emojisWithIcons = [\n    {title: 'happy', icon: 'emoticon-happy-outline'},\n    {title: 'cool', icon: 'emoticon-cool-outline'},\n    {title: 'lol', icon: 'emoticon-lol-outline'},\n    {title: 'sad', icon: 'emoticon-sad-outline'},\n    {title: 'cry', icon: 'emoticon-cry-outline'},\n    {title: 'angry', icon: 'emoticon-angry-outline'},\n    {title: 'confused', icon: 'emoticon-confused-outline'},\n    {title: 'excited', icon: 'emoticon-excited-outline'},\n    {title: 'kiss', icon: 'emoticon-kiss-outline'},\n    {title: 'devil', icon: 'emoticon-devil-outline'},\n    {title: 'dead', icon: 'emoticon-dead-outline'},\n    {title: 'wink', icon: 'emoticon-wink-outline'},\n    {title: 'sick', icon: 'emoticon-sick-outline'},\n    {title: 'frown', icon: 'emoticon-frown-outline'},\n  ];\n...\n  \u003cSelectDropdown\n    data={emojisWithIcons}\n    onSelect={(selectedItem, index) =\u003e {\n      console.log(selectedItem, index);\n    }}\n    renderButton={(selectedItem, isOpened) =\u003e {\n      return (\n        \u003cView style={styles.dropdownButtonStyle}\u003e\n          {selectedItem \u0026\u0026 (\n            \u003cIcon name={selectedItem.icon} style={styles.dropdownButtonIconStyle} /\u003e\n          )}\n          \u003cText style={styles.dropdownButtonTxtStyle}\u003e\n            {(selectedItem \u0026\u0026 selectedItem.title) || 'Select your mood'}\n          \u003c/Text\u003e\n          \u003cIcon name={isOpened ? 'chevron-up' : 'chevron-down'} style={styles.dropdownButtonArrowStyle} /\u003e\n        \u003c/View\u003e\n      );\n    }}\n    renderItem={(item, index, isSelected) =\u003e {\n      return (\n        \u003cView style={{...styles.dropdownItemStyle, ...(isSelected \u0026\u0026 {backgroundColor: '#D2D9DF'})}}\u003e\n          \u003cIcon name={item.icon} style={styles.dropdownItemIconStyle} /\u003e\n          \u003cText style={styles.dropdownItemTxtStyle}\u003e{item.title}\u003c/Text\u003e\n        \u003c/View\u003e\n      );\n    }}\n    showsVerticalScrollIndicator={false}\n    dropdownStyle={styles.dropdownMenuStyle}\n  /\u003e\n...\n  const styles = StyleSheet.create({\n    dropdownButtonStyle: {\n      width: 200,\n      height: 50,\n      backgroundColor: '#E9ECEF',\n      borderRadius: 12,\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignItems: 'center',\n      paddingHorizontal: 12,\n    },\n    dropdownButtonTxtStyle: {\n      flex: 1,\n      fontSize: 18,\n      fontWeight: '500',\n      color: '#151E26',\n    },\n    dropdownButtonArrowStyle: {\n      fontSize: 28,\n    },\n    dropdownButtonIconStyle: {\n      fontSize: 28,\n      marginRight: 8,\n    },\n    dropdownMenuStyle: {\n      backgroundColor: '#E9ECEF',\n      borderRadius: 8,\n    },\n    dropdownItemStyle: {\n      width: '100%',\n      flexDirection: 'row',\n      paddingHorizontal: 12,\n      justifyContent: 'center',\n      alignItems: 'center',\n      paddingVertical: 8,\n    },\n    dropdownItemTxtStyle: {\n      flex: 1,\n      fontSize: 18,\n      fontWeight: '500',\n      color: '#151E26',\n    },\n    dropdownItemIconStyle: {\n      fontSize: 28,\n      marginRight: 8,\n    },\n  });\n```\n\n### Props\n\n- [`data`](#data)\n\n- [`onSelect`](#onSelect)\n\n- [`renderButton`](#renderButton)\n\n- [`renderItem`](#renderItem)\n\n- [`defaultValue`](#defaultValue)\n\n- [`defaultValueByIndex`](#defaultValueByIndex)\n\n- [`disabled`](#disabled)\n\n- [`disabledIndexes`](#disabledIndexes)\n\n- [`disableAutoScroll`](#disableAutoScroll)\n\n- [`testID`](#testID)\n\n- [`onFocus`](#onFocus)\n\n- [`onBlur`](#onBlur)\n\n- [`onScrollEndReached`](#onScrollEndReached)\n\n- [`statusBarTranslucent`](#statusBarTranslucent)\n\n- [`dropdownStyle`](#dropdownStyle)\n\n- [`dropdownOverlayColor`](#dropdownOverlayColor)\n\n- [`showsVerticalScrollIndicator`](#showsVerticalScrollIndicator)\n\n- [`search`](#search)\n\n- [`searchInputStyle`](#searchInputStyle)\n\n- [`searchInputTxtColor`](#searchInputTxtColor)\n\n- [`searchInputTxtStyle`](#searchInputTxtStyle)\n\n- [`searchPlaceHolder`](#searchPlaceHolder)\n\n- [`searchPlaceHolderColor`](#searchPlaceHolderColor)\n\n- [`renderSearchInputLeftIcon`](#renderSearchInputLeftIcon)\n\n- [`renderSearchInputRightIcon`](#renderSearchInputRightIcon)\n\n- [`onChangeSearchInputText`](#onChangeSearchInputText)\n\n### Methods\n\n- [`reset`](#License)\n- [`openDropdown`](#License)\n- [`closeDropdown`](#License)\n- [`selectIndex`](#License)\n\n---\n\n### data\n\narray of data that will be represented in dropdown 'can be array of objects\n\n| Type  | Required |\n| ----- | -------- |\n| array | Yes      |\n\n---\n\n### onSelect\n\nfunction recieves selected item and its index in data array\n\n| Type     | Required |\n| -------- | -------- |\n| function | Yes      |\n\n---\n\n### renderButton\n\nfunction returns React component for the dropdown button\n\n| Type     | Required |\n| -------- | -------- |\n| function | Yes      |\n\n---\n\n### renderItem\n\nfunction returns React component for each dropdown item\n\n| Type     | Required |\n| -------- | -------- |\n| function | Yes      |\n\n---\n\n### defaultValue\n\ndefault selected item in dropdown ( check examples in Demo1)\n\n| Type | Required |\n| ---- | -------- |\n| any  | No       |\n\n---\n\n### defaultValueByIndex\n\ndefault selected item index\n\n| Type    | Required |\n| ------- | -------- |\n| integer | No       |\n\n---\n\n### disabled\n\ndisable dropdown\n\n| Type    | Required |\n| ------- | -------- |\n| boolean | No       |\n\n---\n\n### disabledIndexes\n\narray of disabled items index\n\n| Type  | Required |\n| ----- | -------- |\n| array | No       |\n\n---\n\n### disableAutoScroll\n\ndisable auto scroll to selected value\n\n| Type    | Required |\n| ------- | -------- |\n| boolean | No       |\n\n---\n\n### testID\n\ndropdown menu testID\n\n| Type   | Required |\n| ------ | -------- |\n| string | No       |\n\n---\n\n### onFocus\n\nfunction fires when dropdown is opened\n\n| Type     | Required |\n| -------- | -------- |\n| function | No       |\n\n---\n\n### onBlur\n\nfunction fires when dropdown is closed\n\n| Type     | Required |\n| -------- | -------- |\n| function | No       |\n\n---\n\n### onScrollEndReached\n\nfunction fires when dropdown scrolls to the end (for paginations)\n\n| Type     | Required |\n| -------- | -------- |\n| function | No       |\n\n---\n\n### statusBarTranslucent\n\nrequired to set true when statusbar is translucent `(android only)`\n\n| Type    | Required |\n| ------- | -------- |\n| boolean | No       |\n\n---\n\n### dropdownStyle\n\nstyle object for dropdown view\n\n| Type   | Required |\n| ------ | -------- |\n| object | No       |\n\n---\n\n### dropdownOverlayColor\n\nbackdrop color when dropdown is opened\n\n| Type   | Required |\n| ------ | -------- |\n| string | No       |\n\n---\n\n### showsVerticalScrollIndicator\n\nWhen true, shows a vertical scroll indicator.\n\n| Type    | Required |\n| ------- | -------- |\n| boolean | No       |\n\n---\n\n### search\n\nenable search functionality\n\n| Type    | Required |\n| ------- | -------- |\n| boolean | No       |\n\n---\n\n### searchInputStyle\n\nstyle object for search input\n\n| Type   | Required |\n| ------ | -------- |\n| object | No       |\n\n---\n\n### searchInputTxtColor\n\ntext color for search input\n\n| Type   | Required |\n| ------ | -------- |\n| string | No       |\n\n---\n\n### searchInputTxtStyle\n\nstyle object for search input text\n\n| Type   | Required |\n| ------ | -------- |\n| object | No       |\n\n---\n\n### searchPlaceHolder\n\nplaceholder text for search input\n\n| Type   | Required |\n| ------ | -------- |\n| string | No       |\n\n---\n\n### searchPlaceHolderColor\n\ntext color for search input placeholder\n\n| Type   | Required |\n| ------ | -------- |\n| string | No       |\n\n---\n\n### renderSearchInputLeftIcon\n\nfunction returns React component for search input icon\n\n| Type     | Required |\n| -------- | -------- |\n| function | No       |\n\n---\n\n### renderSearchInputRightIcon\n\nfunction returns React component for search input icon\n\n| Type     | Required |\n| -------- | -------- |\n| function | No       |\n\n---\n\n### onChangeSearchInputText\n\nfunction callback when the search input text changes, this will automatically disable the dropdown's internal search to be implemented manually outside the component\n\n| Type     | Required |\n| -------- | -------- |\n| function | No       |\n\n---\n\n| Method               | Description                      |\n| -------------------- | -------------------------------- |\n| `reset()`            | Remove selection \u0026 reset it      |\n| `openDropdown()`     | Open the dropdown.               |\n| `closeDropdown()`    | Close the dropdown.              |\n| `selectIndex(index)` | Select a specific item by index. |\n\n---\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadelredaa97%2Freact-native-select-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadelredaa97%2Freact-native-select-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadelredaa97%2Freact-native-select-dropdown/lists"}