{"id":4004,"url":"https://github.com/alinz/react-native-dropdown","last_synced_at":"2025-05-16T04:07:20.083Z","repository":{"id":36185768,"uuid":"40489947","full_name":"alinz/react-native-dropdown","owner":"alinz","description":"This is simple implementation of drop down menu","archived":false,"fork":false,"pushed_at":"2020-04-12T16:53:02.000Z","size":256,"stargazers_count":662,"open_issues_count":5,"forks_count":159,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-13T16:15:46.917Z","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/alinz.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":"2015-08-10T15:23:48.000Z","updated_at":"2025-05-11T12:57:20.000Z","dependencies_parsed_at":"2022-08-08T13:33:34.410Z","dependency_job_id":null,"html_url":"https://github.com/alinz/react-native-dropdown","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alinz%2Freact-native-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alinz%2Freact-native-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alinz%2Freact-native-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alinz%2Freact-native-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alinz","download_url":"https://codeload.github.com/alinz/react-native-dropdown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464897,"owners_count":22075571,"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-01-05T20:16:58.208Z","updated_at":"2025-05-16T04:07:17.282Z","avatar_url":"https://github.com/alinz.png","language":"JavaScript","readme":"# React Native Dropdown\nSimple DropDown menu for React Native App!\n\n## Introduction\nReact Native Dropdown is simple, customizable and easy to use dropdown in React Native. Works with both Android and IOS. \n\n## Installation\n```\nnpm i react-native-dropdown --save\n```\n\n## Usage\nRequire it inside your Javascript files. Also supporting components using object-deconstructing. \n```Select``` ```Option``` ```OptionList```, Also a positioning utility method ```updatePosition```. \n\nupdatePosition should be called in ```componentDidMount``` with refs to the ```\u003cSelect /\u003e``` component and ```\u003cOptionList /\u003e```. \n\nThis calculates component's PositionX and PositionY and sets it back into the component. The component uses it to position the ```\u003cOptionList\u003e``` using this co-ordinates.\n\n\n## Example\n\n```js\nvar React = require('react-native');\nvar {\n  Component,\n  AppRegistry,\n  Text,\n  View,\n} = React;\n\nconst DropDown = require('react-native-dropdown');\nconst {\n  Select,\n  Option,\n  OptionList,\n  updatePosition\n} = DropDown;\n\nclass App extends Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      canada: ''\n    };\n  }\n\n  componentDidMount() {\n    updatePosition(this.refs['SELECT1']);\n    updatePosition(this.refs['OPTIONLIST']);\n  }\n\n  _getOptionList() {\n    return this.refs['OPTIONLIST'];\n  }\n\n  \n  _canada(province) {\n\n\tthis.setState({\n      ...this.state,\n      canada: province\n    });\n  }\n\n  render() {\n    return (\n      \u003cView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}\u003e\n          \u003cSelect\n            width={250}\n            ref=\"SELECT1\"\n            optionListRef={this._getOptionList.bind(this)}\n            defaultValue=\"Select a Province in Canada ...\"\n            onSelect={this._canada.bind(this)}\u003e\n            \u003cOption\u003eAlberta\u003c/Option\u003e\n            \u003cOption\u003eBritish Columbia\u003c/Option\u003e\n            \u003cOption\u003eManitoba\u003c/Option\u003e\n            \u003cOption\u003eNew Brunswick\u003c/Option\u003e\n            \u003cOption\u003eNewfoundland and Labrador\u003c/Option\u003e\n            \u003cOption\u003eNorthwest Territories\u003c/Option\u003e\n            \u003cOption\u003eNova Scotia\u003c/Option\u003e\n            \u003cOption\u003eNunavut\u003c/Option\u003e\n            \u003cOption\u003eOntario\u003c/Option\u003e\n            \u003cOption\u003ePrince Edward Island\u003c/Option\u003e\n            \u003cOption\u003eQuebec\u003c/Option\u003e\n            \u003cOption\u003eSaskatchewan\u003c/Option\u003e\n            \u003cOption\u003eYukon\u003c/Option\u003e\n          \u003c/Select\u003e\n\n          \u003cText\u003eSelected province of Canada: {this.state.canada}\u003c/Text\u003e\n          \n          \u003cOptionList ref=\"OPTIONLIST\"/\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nAppRegistry.registerComponent('App', () =\u003e App);\n\n\n```\nFor complete implementation checkout example folder. \n\n### Configuration\n\n##### Select:\n| Property | Type | Default | Description |\n|---------------|----------|--------------|----------------------------------------------------------------|\n| width | number | 400 | Width of the selection |\n| height | number | 50 | Height of the selection |\n| optionListRef | function | required | Reference to ```\u003cOptionList /\u003e``` to display the selection menu |\n| style | object | null | Custom styles to be applied if supplied |\n| defaultValue | string | first option | The value to be displayed if none of the options are selected. |\n\n##### Option:\n\n| Property | Type | Default | Description |\n|-----------|--------|---------|--------------------------------------------|\n| style | object | null | Styles to be applied on 'Option' component |\n| styleText | object |  null | Styles to be applied on text inside of 'Option'  |\n\n\n## Demo\n\u003cp align=\"center\"\u003e\n    \u003cimg src =\"https://raw.githubusercontent.com/alinz/react-native-dropdown/master/dropdown.gif\" /\u003e\n\u003c/p\u003e\n","funding_links":[],"categories":["Components","组件","Libraries","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falinz%2Freact-native-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falinz%2Freact-native-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falinz%2Freact-native-dropdown/lists"}