https://github.com/richecr/rn-multiple-select

Repository for the multi-selection library code for React Native
https://github.com/richecr/rn-multiple-select

hacktoberfest multiple react-native select

Last synced: about 4 hours ago
JSON representation

Repository for the multi-selection library code for React Native

• Host: GitHub
• URL: https://github.com/richecr/rn-multiple-select
• Owner: richecr
• License: mit
• Created: 2020-01-21T18:46:07.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-18T21:00:15.000Z (over 1 year ago)
• Last Synced: 2024-09-27T16:17:53.294Z (about 2 months ago)
• Topics: hacktoberfest, multiple, react-native, select
• Language: JavaScript
• Homepage:
• Size: 346 KB
• Stars: 2
• Watchers: 0
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [rn-multiple-select](https://www.npmjs.com/package/rn-multiple-select)

![npm](https://img.shields.io/npm/dm/rn-multiple-select?style=for-the-badge)

![npm](https://img.shields.io/npm/v/rn-multiple-select?style=for-the-badge)

Library for creating a custom multiple option selector for React Native

## Install

### Step 1

```shell

$ npm install rn-multiple-select

```

or

```shell

$ yarn add rn-multiple-select

```

### Step 2

Install react-native-vector-icons (for icons) package as a dependecy

```shell

$ npm install --save react-native-vector-icons

```

### Step 3

```shell

$ react-native link react-native-vector-icons

```

## Required Props

- `options` | Array

- `onSelected` | Function

## Basic Example

```js

import React, { useState } from "react";

import { StyleSheet, Text, View } from "react-native";

import SelectMultiple from "rn-multiple-select";

export default function App() {

  const [data, setData] = useState([

    {

      label: "White rice",

      value: "1",

    },

    {

      label: "Black bean",

      value: "2",

    },

    {

      label: "Sauteed rice",

      value: "3",

    },

    {

      label: "Baked beans",

      value: "4",

    },

    {

      label: "Spaghetti",

      value: "5",

    },

    {

      label: "Pasta in sauce",

      value: "6",

    },

  ]);

  function onSelectionsChange(data, item) {

    console.log(data, item);

  }

  return (

    

      Test rn-multiple-select

      

    

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: "#fff",

    alignItems: "center",

    justifyContent: "center",

  },

});

```

### Example:

![Imgur](https://i.imgur.com/eOFbPiX.jpg)

## Properties

| Prop                        | Default |   type   | Desciption |

| --------------------------- | ------- | -------- | ---- |

| options | null | `array` of `object` | The items |

| 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 |

| styles | {} | `object` | Stylization for checkboxes |

| iconType | 'font-awesome' | `string` | Type of Icon |

| size | 24 | `number` | Check box size |

| iconRight | false | `boolean` | Icon to the right of the text |

| checkedIcon | 'check-square-o' | `string` ou `React Native Component` | Default icon checked |

| uncheckedIcon | 'square-o' | `string` ou `React Native Component` | Default icon unchecked |

| checkedTitle | none | `string` | Specify a message for a marked checkbox |

- Prop of `styles`:

    - `containerStyle`: Checkbox main container style (background and etc).

    - `textStyle`: Style of text.

    - `checkedColor`: Default color for a selected item.

    - `uncheckedColor`: Default color for a unselected item.

    - `fontFamily`: The font-family of texts.