{"id":4189,"url":"https://github.com/tableflip/react-native-select-multiple","last_synced_at":"2025-04-04T15:06:45.973Z","repository":{"id":14037436,"uuid":"75713991","full_name":"tableflip/react-native-select-multiple","owner":"tableflip","description":"☑️ A customiseable FlatList that allows you to select multiple rows","archived":false,"fork":false,"pushed_at":"2023-11-24T10:02:24.000Z","size":238,"stargazers_count":192,"open_issues_count":23,"forks_count":62,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-12-21T12:36:48.666Z","etag":null,"topics":["checkbox","label","list","react-native","select","ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tableflip.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-12-06T09:06:28.000Z","updated_at":"2024-11-18T08:59:53.000Z","dependencies_parsed_at":"2024-01-08T01:02:17.751Z","dependency_job_id":"63b06f75-891f-458e-bf3f-c326ecf4a2f8","html_url":"https://github.com/tableflip/react-native-select-multiple","commit_stats":{"total_commits":48,"total_committers":13,"mean_commits":"3.6923076923076925","dds":0.5,"last_synced_commit":"b47162f0dbabe85ac9a5719349accee70552ef29"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tableflip%2Freact-native-select-multiple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tableflip%2Freact-native-select-multiple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tableflip%2Freact-native-select-multiple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tableflip%2Freact-native-select-multiple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tableflip","download_url":"https://codeload.github.com/tableflip/react-native-select-multiple/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247198449,"owners_count":20900079,"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":["checkbox","label","list","react-native","select","ui"],"created_at":"2024-01-05T20:17:03.917Z","updated_at":"2025-04-04T15:06:45.950Z","avatar_url":"https://github.com/tableflip.png","language":"JavaScript","readme":"# react-native-select-multiple\n\n[![Build Status](https://travis-ci.org/tableflip/react-native-select-multiple.svg?branch=master)](https://travis-ci.org/tableflip/react-native-select-multiple)\n[![dependencies Status](https://david-dm.org/tableflip/react-native-select-multiple/status.svg)](https://david-dm.org/tableflip/react-native-select-multiple)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n\u003e A customiseable FlatList that allows you to select multiple rows.\n\n![select-multiple](https://cloud.githubusercontent.com/assets/152863/20929245/3569a3c6-bbc1-11e6-9d80-7f13e4c532c5.gif)\n\n## Install\n\n```sh\nnpm install react-native-select-multiple\n```\n\n## Usage\n\n```js\nimport React, { Component } from 'react'\nimport { View } from 'react-native'\nimport SelectMultiple from 'react-native-select-multiple'\n\nconst fruits = ['Apples', 'Oranges', 'Pears']\n// --- OR ---\n// const fruits = [\n//   { label: 'Apples', value: 'appls' },\n//   { label: 'Oranges', value: 'orngs' },\n//   { label: 'Pears', value: 'pears' }\n// ]\n\nclass App extends Component {\n  state = { selectedFruits: [] }\n\n  onSelectionsChange = (selectedFruits) =\u003e {\n    // selectedFruits is array of { label, value }\n    this.setState({ selectedFruits })\n  }\n\n  render () {\n    return (\n      \u003cView\u003e\n        \u003cSelectMultiple\n          items={fruits}\n          selectedItems={this.state.selectedFruits}\n          onSelectionsChange={this.onSelectionsChange} /\u003e\n      \u003c/View\u003e\n    )\n  }\n}\nexport default App\n\n```\n\n## Customize label\n\n```js\nimport React, { Component } from 'react'\nimport { View, Text, Image } from 'react-native'\nimport SelectMultiple from 'react-native-select-multiple'\n\nconst fruits = ['Apples', 'Oranges', 'Pears']\n// --- OR ---\n// const fruits = [\n//   { label: 'Apples', value: 'appls' },\n//   { label: 'Oranges', value: 'orngs' },\n//   { label: 'Pears', value: 'pears' }\n// ]\n\nconst renderLabel = (label, style) =\u003e {\n  return (\n    \u003cView style={{flexDirection: 'row', alignItems: 'center'}}\u003e\n      \u003cImage style={{width: 42, height: 42}} source={{uri: 'https://dummyimage.com/100x100/52c25a/fff\u0026text=S'}} /\u003e\n      \u003cView style={{marginLeft: 10}}\u003e\n        \u003cText style={style}\u003e{label}\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\n  )\n}\n\nclass App extends Component {\n  state = { selectedFruits: [] }\n\n  onSelectionsChange = (selectedFruits) =\u003e {\n    // selectedFruits is array of { label, value }\n    this.setState({ selectedFruits })\n  }\n\n  render () {\n    return (\n      \u003cView\u003e\n        \u003cSelectMultiple\n          items={fruits}\n          renderLabel={renderLabel}\n          selectedItems={this.state.selectedFruits}\n          onSelectionsChange={this.onSelectionsChange} /\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n## Properties\n\n| Prop  | Default  | Type | Description |\n| :------------ |:---------------:| :---------------:| :-----|\n| items | - | `array` | All items available in the list (array of `string` or `{ label, value }`) |\n| selectedItems | `[]` | `array` | The currently selected items (array of `string` or `{ label, value }`) |\n| onSelectionsChange | - | `func` | Callback called when a user selects or de-selects an item, passed `(selections, item)` |\n| keyExtractor | `index` | `func` | [keyExtractor](https://facebook.github.io/react-native/docs/flatlist.html#keyextractor) for the `FlatList` |\n| checkboxSource | [image](images/icon-checkbox.png) | `object` | [Image source](https://facebook.github.io/react-native/docs/image.html#source) for the checkbox (unchecked). |\n| selectedCheckboxSource | [image](images/icon-checkbox-checked.png) | `object` | [Image source](https://facebook.github.io/react-native/docs/image.html#source) for the checkbox (checked). |\n| flatListProps | {} | `object` | Additional props for the flat list |\n| style | [default styles](src/SelectMultiple.styles.js) | `object` | [Style](https://facebook.github.io/react-native/docs/scrollview.html#style) for the `FlatList` container. |\n| rowStyle | [default styles](src/SelectMultiple.styles.js) | `object` | [Style](https://facebook.github.io/react-native/docs/view.html#style) for the row container. |\n| checkboxStyle | [default styles](src/SelectMultiple.styles.js) | `object` | [Style](https://facebook.github.io/react-native/docs/image.html#style) for the checkbox image. |\n| labelStyle | [default styles](src/SelectMultiple.styles.js) | `object` | [Style](https://facebook.github.io/react-native/docs/text.html#style) for the text label. |\n| selectedRowStyle | [default styles](src/SelectMultiple.styles.js) | `object` | [Style](https://facebook.github.io/react-native/docs/view.html#style) for the row container when selected. |\n| selectedCheckboxStyle | [default styles](src/SelectMultiple.styles.js) | `object` | [Style](https://facebook.github.io/react-native/docs/image.html#style) for the checkbox image when selected. |\n| selectedLabelStyle | [default styles](src/SelectMultiple.styles.js) | `object` | [Style](https://facebook.github.io/react-native/docs/text.html#style) for the text label when selected. |\n| renderLabel | null | `func` | Function for render label. |\n| maxSelect | null | `int` | Maximum number of selected items|\n\n## Contribute\n\nFeel free to dive in! [Open an issue](https://github.com/tableflip/react-native-select-multiple/issues/new) or submit PRs.\n\n## License\n\n[ISC](LICENSE) © TABLEFLIP\n\n----\n\nA [(╯°□°）╯︵TABLEFLIP](https://tableflip.io) side project.\n","funding_links":[],"categories":["Components","JavaScript"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftableflip%2Freact-native-select-multiple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftableflip%2Freact-native-select-multiple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftableflip%2Freact-native-select-multiple/lists"}