{"id":13472668,"url":"https://github.com/sauzy34/react-native-multi-selectbox","last_synced_at":"2025-04-04T22:05:57.395Z","repository":{"id":35018547,"uuid":"199612778","full_name":"sauzy34/react-native-multi-selectbox","owner":"sauzy34","description":"Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker. The idea is to bring out the common user interface \u0026 user experience on both platforms.","archived":false,"fork":false,"pushed_at":"2024-03-13T09:06:00.000Z","size":2535,"stargazers_count":212,"open_issues_count":47,"forks_count":32,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T21:06:08.613Z","etag":null,"topics":["dropdown","expo","expo-dropdown","expo-multi-select","expo-picker","expo-select","expo-selectbox","multi-select","picker","react","react-native","react-native-component","react-native-multiselect","react-native-select","selectbox"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-multi-selectbox","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/sauzy34.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2019-07-30T08:48:49.000Z","updated_at":"2024-07-20T18:28:03.000Z","dependencies_parsed_at":"2024-06-18T16:43:40.487Z","dependency_job_id":"437ce731-bfee-4808-bcc6-046f1e5e59f8","html_url":"https://github.com/sauzy34/react-native-multi-selectbox","commit_stats":{"total_commits":33,"total_committers":6,"mean_commits":5.5,"dds":0.6363636363636364,"last_synced_commit":"bbc901af9c30fd8477cc481bc09d89d7cd4b8f29"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sauzy34%2Freact-native-multi-selectbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sauzy34%2Freact-native-multi-selectbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sauzy34%2Freact-native-multi-selectbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sauzy34%2Freact-native-multi-selectbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sauzy34","download_url":"https://codeload.github.com/sauzy34/react-native-multi-selectbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256110,"owners_count":20909240,"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","expo","expo-dropdown","expo-multi-select","expo-picker","expo-select","expo-selectbox","multi-select","picker","react","react-native","react-native-component","react-native-multiselect","react-native-select","selectbox"],"created_at":"2024-07-31T16:00:56.923Z","updated_at":"2025-04-04T22:05:57.361Z","avatar_url":"https://github.com/sauzy34.png","language":"JavaScript","readme":"# react-native-multi-selectbox\n\n[![npm version](https://badge.fury.io/js/react-native-multi-selectbox.svg)](https://badge.fury.io/js/react-native-multi-selectbox)\n[![npm downloads](https://img.shields.io/npm/dm/react-native-multi-selectbox.svg?style=flat-square)](https://www.npmjs.com/package/react-native-multi-selectbox)\n\nPlatform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker. The idea is to bring out the common user-interface \u0026 user-experience on both platforms.\n\n![demo](https://raw.githubusercontent.com/sauzy34/react-native-multi-selectbox/master/demo.gif)\n\n## Getting started\n\n### How to install 🎹\n\n### `npm install react-native-multi-selectbox`\n\nor\n\n### `yarn add react-native-multi-selectbox`\n\n### Usage 𖣠\n\n```\nimport React, { useState } from 'react'\nimport { Text, View } from 'react-native'\nimport SelectBox from 'react-native-multi-selectbox'\nimport { xorBy } from 'lodash'\n\n// Options data must contain 'item' \u0026 'id' keys\n\nconst K_OPTIONS = [\n {\n item: 'Juventus',\n id: 'JUVE',\n },\n {\n item: 'Real Madrid',\n id: 'RM',\n },\n {\n item: 'Barcelona',\n id: 'BR',\n },\n {\n item: 'PSG',\n id: 'PSG',\n },\n {\n item: 'FC Bayern Munich',\n id: 'FBM',\n },\n {\n item: 'Manchester United FC',\n id: 'MUN',\n },\n {\n item: 'Manchester City FC',\n id: 'MCI',\n },\n {\n item: 'Everton FC',\n id: 'EVE',\n },\n {\n item: 'Tottenham Hotspur FC',\n id: 'TOT',\n },\n {\n item: 'Chelsea FC',\n id: 'CHE',\n },\n {\n item: 'Liverpool FC',\n id: 'LIV',\n },\n {\n item: 'Arsenal FC',\n id: 'ARS',\n },\n\n {\n item: 'Leicester City FC',\n id: 'LEI',\n },\n]\n\nfunction App() {\n const [selectedTeam, setSelectedTeam] = useState({})\n const [selectedTeams, setSelectedTeams] = useState([])\n return (\n \u003cView style={{ margin: 30 }}\u003e\n \u003cView style={{ width: '100%', alignItems: 'center' }}\u003e\n \u003cText style={{ fontSize: 30, paddingBottom: 20 }}\u003eDemos\u003c/Text\u003e\n \u003c/View\u003e\n \u003cText style={{ fontSize: 20, paddingBottom: 10 }}\u003eSelect Demo\u003c/Text\u003e\n \u003cSelectBox\n label=\"Select single\"\n options={K_OPTIONS}\n value={selectedTeam}\n onChange={onChange()}\n hideInputFilter={false}\n /\u003e\n \u003cView style={{ height: 40 }} /\u003e\n \u003cText style={{ fontSize: 20, paddingBottom: 10 }}\u003eMultiSelect Demo\u003c/Text\u003e\n \u003cSelectBox\n label=\"Select multiple\"\n options={K_OPTIONS}\n selectedValues={selectedTeams}\n onMultiSelect={onMultiChange()}\n onTapClose={onMultiChange()}\n isMulti\n /\u003e\n \u003c/View\u003e\n )\n\n function onMultiChange() {\n return (item) =\u003e setSelectedTeams(xorBy(selectedTeams, [item], 'id'))\n }\n\n function onChange() {\n return (val) =\u003e setSelectedTeam(val)\n }\n}\n\nexport default App\n\n\n```\n\n| Prop | Type | Default Value |\n| ------------------------- | :----------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n| label | String | Label |\n| inputPlaceholder | string | Label |\n| listEmptyText | String | \"No results found\" |\n| width | string | \"100%\" |\n| viewMargin | string | \"0px\" |\n| isMulti | boolean | false |\n| hideInputFilter | boolean | true |\n| selectedValues | array | [] |\n| value | array | [] |\n| selectIcon | component | \u003cIcon name={'downArrow'} /\u003e |\n| labelStyle | style object | Default style |\n| containerStyle | style object | Default style |\n| inputFilterContainerStyle | style object | Default style |\n| inputFilterStyle | style object | Default style |\n| optionsLabelStyle | style object | Default style |\n| optionContainerStyle | style object | Default style |\n| multiOptionContainerStyle | style object | Default style |\n| multiOptionsLabelStyle | style object | Default style |\n| multiListEmptyLabelStyle | style object | Default style |\n| listEmptyLabelStyle | style object | Default style |\n| selectedItemStyle | style object | Default style |\nsearchInputProps | object | Default props |\nmultiSelectInputFieldProps | object | Default props |\n| listOptionProps | object | Default props |\n| arrowIconColor | color string | Default primary color |\n| searchIconColor | color string | Default primary color |\n| toggleIconColor | color string | Default primary color |\n| options | array | `[{ item: 'Juventus', id: 'JUVE'},{ item: 'Real Madrid', id: 'RM'},{ item: 'Barcelona', id: 'BR'},{ item: 'PSG', id: 'PSG'},{ item: 'FC Bayern Munich', id: 'FBM'}]` |\n\n## Want to be a contributor? 👷🏼‍♂️👷🏼‍♀️\n\nCheck-in `develop` branch and submit a new pull-request\n\n## Issues or feature request? ✍🏼\n\nYou can submit a request on https://github.com/sauzy34/react-native-multi-selectbox/issues\n\n## Support \u0026 Share 💆🏼‍♂️\n\nPlease star the repository on Github to enhance the reach to more developers.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsauzy34%2Freact-native-multi-selectbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsauzy34%2Freact-native-multi-selectbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsauzy34%2Freact-native-multi-selectbox/lists"}