{"id":3985,"url":"https://github.com/sohobloo/react-native-modal-dropdown","last_synced_at":"2026-01-14T22:57:23.633Z","repository":{"id":37561744,"uuid":"68097953","full_name":"sohobloo/react-native-modal-dropdown","owner":"sohobloo","description":"A react-native dropdown/picker/selector component for both Android \u0026 iOS.","archived":false,"fork":false,"pushed_at":"2022-07-20T07:13:35.000Z","size":1658,"stargazers_count":1211,"open_issues_count":105,"forks_count":475,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-10-06T08:24:57.769Z","etag":null,"topics":["dropdown","modal","option","picker","react","react-native","react-native-component","select","selector"],"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/sohobloo.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":"2016-09-13T10:17:51.000Z","updated_at":"2025-10-03T19:49:16.000Z","dependencies_parsed_at":"2022-08-31T18:31:14.438Z","dependency_job_id":null,"html_url":"https://github.com/sohobloo/react-native-modal-dropdown","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/sohobloo/react-native-modal-dropdown","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohobloo%2Freact-native-modal-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohobloo%2Freact-native-modal-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohobloo%2Freact-native-modal-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohobloo%2Freact-native-modal-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sohobloo","download_url":"https://codeload.github.com/sohobloo/react-native-modal-dropdown/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sohobloo%2Freact-native-modal-dropdown/sbom","scorecard":{"id":836542,"data":{"date":"2025-08-11","repo":{"name":"github.com/sohobloo/react-native-modal-dropdown","commit":"eee01b148923020b277cefbf11b9fce79a1ed74a"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.2,"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":2,"reason":"Found 6/22 approved changesets -- score normalized to 2","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":"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":"Binary-Artifacts","score":9,"reason":"binaries present in source code","details":["Warn: binary detected: example/android/gradle/wrapper/gradle-wrapper.jar:1"],"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":"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":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"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":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"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":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 16 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-23T19:11:41.839Z","repository_id":37561744,"created_at":"2025-08-23T19:11:41.839Z","updated_at":"2025-08-23T19:11:41.839Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28437542,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T22:37:52.437Z","status":"ssl_error","status_checked_at":"2026-01-14T22:37:31.496Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["dropdown","modal","option","picker","react","react-native","react-native-component","select","selector"],"created_at":"2024-01-05T20:16:57.662Z","updated_at":"2026-01-14T22:57:23.606Z","avatar_url":"https://github.com/sohobloo.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript","Others"],"sub_categories":["UI"],"readme":"[![npm version](https://badge.fury.io/js/react-native-modal-dropdown.svg)](https://badge.fury.io/js/react-native-modal-dropdown)\n\n# react-native-modal-dropdown\nA react-native dropdown/picker/selector component for both Android \u0026 iOS.\n\n## Features\n- Pure JS.\n- Compatible with both iOS and Android.\n- Auto position. (Won't be covered or clipped by the edge of screen.)\n- Zero configuration. (Options are needed of course or a loading indicator will show.)\n- Highly customizable.\n- Controllable with API by code. (Show/Hide/Select)\n- Change everything into a dropdown list trigger.\n\n## Demo\n\u003cimg src=\"https://github.com/sohobloo/react-native-modal-dropdown/blob/master/docs/demo_1.gif?raw=true\" width = \"160\" height = \"287.5\" alt=\"Demo 1\"/\u003e \u003cimg src=\"https://github.com/sohobloo/react-native-modal-dropdown/blob/master/docs/demo_2.gif?raw=true\" width = \"160\" height = \"287.5\" alt=\"Demo 2\"/\u003e \u003cimg src=\"https://github.com/sohobloo/react-native-modal-dropdown/blob/master/docs/demo_3.gif?raw=true\" width = \"160\" height = \"287.5\" alt=\"Demo 3\"/\u003e\n\nYou can find them in the example.\n\n## Update History\n\n### v0.7.0\n- Quick fix for react native 0.60. (Thanks to [@ibtesamlatif2997](https://github.com/ibtesamlatif2997))\n\n[Full update history list](https://github.com/sohobloo/react-native-modal-dropdown/wiki/Update-History)\n\n## Installation\n```sh\nnpm i react-native-modal-dropdown -save\n```\n\n## Usage\n### Basic\nImport this module:\n```javascript\nimport ModalDropdown from 'react-native-modal-dropdown';\n```\nUse as a component:\n```javascript\n\u003cModalDropdown options={['option 1', 'option 2']}/\u003e\n```\nUse as a wrapper / container:\n```javascript\n\u003cModalDropdown options={['option 1', 'option 2']}\u003e\n  ...\n\u003c/ModalDropdown\u003e\n```\n\n### Customization\nGive the style props as your choice:\n- `style`: Change the style of the button (basic mode) / container (wrapper mode).\n- `textStyle`: Change the style of text of the button. *Invalid in wrapper mode.*\n- `dropdownStyle`: Change the style of dropdown container.\n\nYou can also render your option row and row separator by implement `renderRow` and `renderSeparator` function.\n\n## API\n### Props\nProp                | Type     | Optional | Default   | Description\n------------------- | -------- | -------- | --------- | -----------\n`disabled`          | bool     | Yes      | false     | disable / enable the component.\n`defaultIndex`      | number   | Yes      | -1        | Init selected index. `-1`: None is selected. **This only change the highlight of the dropdown row, you have to give a `defaultValue` to change the init text.**\n`defaultValue`      | string   | Yes      | Please select... | Init text of the button. **Invalid in wrapper mode.**\n`options`           | array    | Yes      |           | Options. **The dropdown will show a loading indicator if `options` is `null`/`undefined`.**\n`animated`          | bool     | Yes      | true      | Disable / enable fade animation.\n`showsVerticalScrollIndicator` | bool | Yes | true    | Show / hide vertical scroll indicator.\n`style`             | object   | Yes      |           | Style of the button.\n`textStyle`         | object   | Yes      |           | Style of the button text. **Invalid in wrapper mode.**\n`dropdownStyle`     | object   | Yes      |           | Style of the dropdown list.\n`dropdownTextStyle` | object   | Yes      |           | Style of the dropdown option text.\n`dropdownTextHighlightStyle`   | object | Yes      |  | Style of the dropdown selected option text.\n`adjustFrame`       | func     | Yes      |           | This is a callback after the frame of the dropdown have been calculated and before showing. You will receive a style object as argument with some of the props like `width` `height` `top` `left` and `right`. Change them to appropriate values that accord with your requirement and **make the new style as the return value of this function**.\n`renderRow`         | func     | Yes      |           | Customize render option rows: `function(option,index,isSelected)` **Will render a default row if `null`/`undefined`.**\n`renderSeparator`   | func     | Yes      |           | Customize render dropdown list separators. **Will render a default thin gray line if `null`/`undefined`.**\n`renderButtonText`  | func     | Yes      |           | Use this to extract and return text from option object. This text will show on button after option selected. **Invalid in wrapper mode.**\n`onDropdownWillShow`| func     | Yes      |           | Trigger when dropdown will show by touching the button. **Return `false` can cancel the event.**\n`onDropdownWillHide`| func     | Yes      |           | Trigger when dropdown will hide by touching the button. **Return `false` can cancel the event.**\n`onSelect`          | func     | Yes      |           | Trigger when option row touched with selected `index` and `value`. **Return `false` can cancel the event.**\n`accessible`          | bool     | Yes      | true    | Set accessibility of dropdown modal and dropdown rows\n`keyboardShouldPersistTaps`    | enum('always', 'never', 'handled') | Yes | 'never' | See react-native `ScrollView` props\n\n### Methods\nMethod            |  Description\n----------------- |  -----------\n`show()`          |  Show the dropdown. **Won't trigger `onDropdownWillShow`.**\n`hide()`          |  Hide the dropdown. **Won't trigger `onDropdownWillHide`.**\n`select(idx)`     |  Select the specified option of the `idx`. Select `-1` will reset it to display `defaultValue`. **Won't trigger `onSelect`.**\n\n## Next version\nAny suggestion is welcome.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohobloo%2Freact-native-modal-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsohobloo%2Freact-native-modal-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsohobloo%2Freact-native-modal-dropdown/lists"}