{"id":15656988,"url":"https://github.com/thehanimo/react-native-modal-dropdown-deprecated-support","last_synced_at":"2025-03-30T02:14:16.767Z","repository":{"id":57338410,"uuid":"197757208","full_name":"thehanimo/react-native-modal-dropdown-deprecated-support","owner":"thehanimo","description":null,"archived":false,"fork":false,"pushed_at":"2019-07-19T11:05:13.000Z","size":6,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-18T06:37:49.455Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/thehanimo.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":"2019-07-19T10:56:37.000Z","updated_at":"2020-08-08T15:39:53.000Z","dependencies_parsed_at":"2022-08-31T03:51:48.175Z","dependency_job_id":null,"html_url":"https://github.com/thehanimo/react-native-modal-dropdown-deprecated-support","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thehanimo%2Freact-native-modal-dropdown-deprecated-support","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thehanimo%2Freact-native-modal-dropdown-deprecated-support/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thehanimo%2Freact-native-modal-dropdown-deprecated-support/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thehanimo%2Freact-native-modal-dropdown-deprecated-support/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thehanimo","download_url":"https://codeload.github.com/thehanimo/react-native-modal-dropdown-deprecated-support/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246122239,"owners_count":20726822,"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":[],"created_at":"2024-10-03T13:04:58.829Z","updated_at":"2025-03-30T02:14:16.745Z","avatar_url":"https://github.com/thehanimo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/react-native-modal-dropdown-deprecated-support.svg)](https://badge.fury.io/js/react-native-modal-dropdown-deprecated-support)\n\n# react-native-modal-dropdown-deprecated-support\nA react-native dropdown/picker/selector component for both Android \u0026 iOS supporting deprecated ListView.\n\n## Features\n- UPDATED to support deprecated-listview. Use only if you really need it. Like REALLY.\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\n## Installation\n\n```sh\nyarn add react-native-modal-dropdown-deprecated-support\n```\n\n## Usage\n### Basic\nImport this module:\n```javascript\nimport ModalDropdown from 'react-native-modal-dropdown-deprecated-support';\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthehanimo%2Freact-native-modal-dropdown-deprecated-support","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthehanimo%2Freact-native-modal-dropdown-deprecated-support","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthehanimo%2Freact-native-modal-dropdown-deprecated-support/lists"}