{"id":21017297,"url":"https://github.com/richecr/rn-multiple-select","last_synced_at":"2026-04-19T10:32:02.580Z","repository":{"id":42927799,"uuid":"235415921","full_name":"richecr/rn-multiple-select","owner":"richecr","description":"Repository for the multi-selection library code for React Native","archived":false,"fork":false,"pushed_at":"2023-07-18T21:00:15.000Z","size":354,"stargazers_count":2,"open_issues_count":3,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-26T11:47:19.401Z","etag":null,"topics":["hacktoberfest","multiple","react-native","select"],"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/richecr.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-21T18:46:07.000Z","updated_at":"2022-09-06T17:01:02.000Z","dependencies_parsed_at":"2025-01-20T12:23:50.896Z","dependency_job_id":"d121d9fe-e410-4148-b7bd-9da5591fb10e","html_url":"https://github.com/richecr/rn-multiple-select","commit_stats":null,"previous_names":["rickecr/rn-multiple-select"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/richecr/rn-multiple-select","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richecr%2Frn-multiple-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richecr%2Frn-multiple-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richecr%2Frn-multiple-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richecr%2Frn-multiple-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/richecr","download_url":"https://codeload.github.com/richecr/rn-multiple-select/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richecr%2Frn-multiple-select/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32004035,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["hacktoberfest","multiple","react-native","select"],"created_at":"2024-11-19T10:18:48.578Z","updated_at":"2026-04-19T10:32:02.560Z","avatar_url":"https://github.com/richecr.png","language":"JavaScript","readme":"# [rn-multiple-select](https://www.npmjs.com/package/rn-multiple-select)\n![npm](https://img.shields.io/npm/dm/rn-multiple-select?style=for-the-badge)\n![npm](https://img.shields.io/npm/v/rn-multiple-select?style=for-the-badge)\n\nLibrary for creating a custom multiple option selector for React Native\n\n## Install\n### Step 1\n\n```shell\n$ npm install rn-multiple-select\n```\n\nor\n\n```shell\n$ yarn add rn-multiple-select\n```\n### Step 2\nInstall react-native-vector-icons (for icons) package as a dependecy\n\n```shell\n$ npm install --save react-native-vector-icons\n```\n### Step 3\n\n```shell\n$ react-native link react-native-vector-icons\n```\n\n## Required Props\n\n- `options` | Array\n- `onSelected` | Function\n\n## Basic Example\n\n```js\nimport React, { useState } from \"react\";\nimport { StyleSheet, Text, View } from \"react-native\";\n\nimport SelectMultiple from \"rn-multiple-select\";\n\nexport default function App() {\n  const [data, setData] = useState([\n    {\n      label: \"White rice\",\n      value: \"1\",\n    },\n    {\n      label: \"Black bean\",\n      value: \"2\",\n    },\n    {\n      label: \"Sauteed rice\",\n      value: \"3\",\n    },\n    {\n      label: \"Baked beans\",\n      value: \"4\",\n    },\n    {\n      label: \"Spaghetti\",\n      value: \"5\",\n    },\n    {\n      label: \"Pasta in sauce\",\n      value: \"6\",\n    },\n  ]);\n\n  function onSelectionsChange(data, item) {\n    console.log(data, item);\n  }\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cText\u003eTest rn-multiple-select\u003c/Text\u003e\n      \u003cSelectMultiple\n        options={data}\n        onSelected={onSelectionsChange}\n        messageMaxSelected=\"Máximo de itens selecionados!\"\n        maxSelected={2}\n        styles={{\n          containerStyle: {\n            backgroundColor: \"transparent\",\n            borderColor: \"transparent\",\n          },\n          checkedColor: \"green\",\n        }}\n        size={24}\n      /\u003e\n    \u003c/View\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \"#fff\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n});\n\n```\n\n### Example:\n\n![Imgur](https://i.imgur.com/eOFbPiX.jpg)\n\n## Properties\n\n| Prop                        | Default |   type   | Desciption |\n| --------------------------- | ------- | -------- | ---- |\n| options | null | `array` of `object` | The items |\n| onSelected | null | `funct` | Function to be called after an item is selected, passing the selected items and the new item that was clicked, either selecting or deselecting the item |\n| styles | {} | `object` | Stylization for checkboxes |\n| iconType | 'font-awesome' | `string` | Type of Icon |\n| size | 24 | `number` | Check box size |\n| iconRight | false | `boolean` | Icon to the right of the text |\n| checkedIcon | 'check-square-o' | `string` ou `React Native Component` | Default icon checked |\n| uncheckedIcon | 'square-o' | `string` ou `React Native Component` | Default icon unchecked |\n| checkedTitle | none | `string` | Specify a message for a marked checkbox |\n\n- Prop of `styles`:\n    - `containerStyle`: Checkbox main container style (background and etc).\n    - `textStyle`: Style of text.\n    - `checkedColor`: Default color for a selected item.\n    - `uncheckedColor`: Default color for a unselected item.\n    - `fontFamily`: The font-family of texts.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichecr%2Frn-multiple-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frichecr%2Frn-multiple-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichecr%2Frn-multiple-select/lists"}