rn-multiple-select v1.0.1

rn-multiple-select

Library for creating a custom multiple option selector for React Native

Install

$ npm install rn-multiple-select

ou

$ yarn add rn-multiple-select

Required Props

• options | Array
• onSelected | Function

Basic Example

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';

import SelectMultiple from "./SelectMultiple";

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 (
    <View style={styles.container}>
      <SelectMultiple
        options={data}
        onSelected={onSelectionsChange} 
        styles={{
          containerStyle: {
            backgroundColor: 'transparent',
            borderColor: 'transparent',
          },
          checkedColor: 'green',
        }}
        size={24}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Properties

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