{"id":4087,"url":"https://github.com/gs-akhan/react-native-select","last_synced_at":"2025-04-09T14:12:32.399Z","repository":{"id":45009873,"uuid":"47914380","full_name":"gs-akhan/react-native-select","owner":"gs-akhan","description":"A simple dropdown for react native - IOS and Android ","archived":false,"fork":false,"pushed_at":"2018-08-12T13:46:32.000Z","size":618,"stargazers_count":187,"open_issues_count":3,"forks_count":30,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-02T12:09:44.026Z","etag":null,"topics":["android","chooser","ios","react-native","select-tag"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-selectme","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/gs-akhan.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-12-13T10:15:48.000Z","updated_at":"2024-10-16T20:20:20.000Z","dependencies_parsed_at":"2022-08-25T14:51:46.068Z","dependency_job_id":null,"html_url":"https://github.com/gs-akhan/react-native-select","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gs-akhan%2Freact-native-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gs-akhan%2Freact-native-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gs-akhan%2Freact-native-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gs-akhan%2Freact-native-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gs-akhan","download_url":"https://codeload.github.com/gs-akhan/react-native-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054195,"owners_count":21039952,"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":["android","chooser","ios","react-native","select-tag"],"created_at":"2024-01-05T20:17:00.654Z","updated_at":"2025-04-09T14:12:32.371Z","avatar_url":"https://github.com/gs-akhan.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript","Others"],"sub_categories":["UI"],"readme":"\n# React Native Selectme\nSimple DropDown menu for React Native App! Your Select Tag for React Native. \n\n\n## Alternatives :\n\n[react-native-chooser](https://github.com/gs-akhan/react-native-chooser) : This is an upgraded and simple-to-use API. You can customize it to fullest.\n\n\n## Introduction\n\nReact Native Selectme is simple, customizable and easy to use dropdown in React Native. It has been tested on both Android and IOS and works like a charm. \n\n## Installation\n```\nnpm i react-native-selectme --save\n```\n\n## Usage\nRequire it inside your Javascript files. Also supporting components using object-deconstructing. \n```Select``` ```Option``` ```OptionList```.\n\n```\u003cOptionList /\u003e``` Is to be used to append the options. This has to be placed as a last component so that it take the highest Z-Index.\n\n## Example\n\n```jsx\nimport React, {\n  Component,\n  AppRegistry,\n  Text,\n  View,\n} from 'react-native';\n\nimport DropDown, {\n  Select,\n  Option,\n  OptionList,\n} from 'react-native-selectme';\n\nclass App extends Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      canada: ''\n    };\n  }\n\n  _getOptionList() {\n    return this.refs['OPTIONLIST'];\n  }\n\n  \n  _canada(province) {\n\n  this.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 value = {{id : \"alberta\"}}\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 Canada's province: {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```\n\n### Configuration\n\n##### Select:\n| Property | Type | Default | Description |\n|---------------|----------|--------------|----------------------------------------------------------------|\n| width | number | 400 | Width of the selection |\n| onSelect | function(text, value) | null | function to be invoked when option is selected |\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```blur()``` : close the select by calling blur ```this.refs.SELECT1.blur();```\n\n\n##### Option:\n\n| Property | Type | Default | Description |\n|-----------|--------|---------|--------------------------------------------|\n| value | any |  null | value will be passed on callback `onSelect` as second argument  |\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##### OptionList:\n\n| Property | Type | Default | Description |\n|-----------|--------|---------|--------------------------------------------|\n| overlayStyles | object | null | Styles to be applied on 'overlay' backdrop |\n| itemsStyles | object | null | Styles to be applied on 'items' dropdown |\n\n\n## Demo\n#####  IOS and Android:\n\u003cp align=\"center\"\u003e\n    \u003cimg src =\"https://raw.githubusercontent.com/gs-akhan/react-native-select/master/dropdown-both.gif\" /\u003e\n\u003c/p\u003e\n\n## Contributions\nYour contributions and suggestions are heartily♡ welcome. (✿◠‿◠)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgs-akhan%2Freact-native-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgs-akhan%2Freact-native-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgs-akhan%2Freact-native-select/lists"}